Version Packages (#8687)

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

.vscode/settings.json

@@ -1,4 +1,6 @@
 {
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2,
   "[css]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
@@ -18,8 +20,9 @@
     "editor.defaultFormatter": "biomejs.biome"
   },
   "editor.codeActionsOnSave": {
-    "quickfix.biome": "explicit",
-    "source.fixAll.biome": "explicit"
+    "quickfix.biome": "always",
+    "source.fixAll.biome": "always",
+    "source.organizeImports.biome": "always"
   },
   "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true,

apps/dashboard/.env.example

@@ -66,3 +66,6 @@ ANALYTICS_SERVICE_URL=""
 STRIPE_SECRET_KEY=""
 GROWTH_PLAN_SKU=""
 PAYMENT_METHOD_CONFIGURATION=""
+
+# required for bridge iframe (/bridge/widget) page
+NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID=""

apps/dashboard/framer-rewrites.js

@@ -68,4 +68,7 @@ module.exports = [
   "/token",
   "/vault",
   "/monetize/bridge",
+  // ai
+  "/ai-privacy-policy",
+  "/ai-terms",
 ];

apps/dashboard/next.config.ts

@@ -18,6 +18,11 @@ const ContentSecurityPolicy = `
   block-all-mixed-content;
 `;
 
+const EmbedContentSecurityPolicy = `
+  ${ContentSecurityPolicy}
+  frame-ancestors *;
+`;
+
 const securityHeaders = [
   {
     key: "X-DNS-Prefetch-Control",
@@ -138,6 +143,78 @@ const baseNextConfig: NextConfig = {
         // Apply these headers to all routes in your application.
         source: "/(.*)",
       },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/widget",
+      },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/widget/:path*",
+      },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/checkout-widget",
+      },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/checkout-widget/:path*",
+      },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/swap-widget",
+      },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/swap-widget/:path*",
+      },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/buy-widget",
+      },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/buy-widget/:path*",
+      },
     ];
   },
   images: {

apps/dashboard/package.json

@@ -44,7 +44,7 @@
     "ioredis": "^5.6.1",
     "ipaddr.js": "^2.2.0",
     "lucide-react": "0.525.0",
-    "next": "15.3.5",
+    "next": "15.3.8",
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
     "nuqs": "^2.4.3",
@@ -53,10 +53,10 @@
     "pluralize": "^8.0.0",
     "posthog-js": "1.256.1",
     "prettier": "3.6.2",
-    "react": "19.1.0",
+    "react": "19.2.1",
     "react-children-utilities": "^2.10.0",
     "react-day-picker": "^8.10.1",
-    "react-dom": "19.1.0",
+    "react-dom": "19.2.1",
     "react-dropzone": "^14.3.8",
     "react-error-boundary": "6.0.0",
     "react-hook-form": "7.55.0",
@@ -82,8 +82,8 @@
   "devDependencies": {
     "@biomejs/biome": "2.0.6",
     "@chromatic-com/storybook": "4.0.1",
-    "@next/bundle-analyzer": "15.3.5",
-    "@next/eslint-plugin-next": "15.3.5",
+    "@next/bundle-analyzer": "15.3.8",
+    "@next/eslint-plugin-next": "15.3.8",
     "@storybook/addon-docs": "9.0.15",
     "@storybook/addon-links": "9.0.15",
     "@storybook/addon-onboarding": "9.0.15",
@@ -92,8 +92,8 @@
     "@types/node": "22.14.1",
     "@types/papaparse": "^5.3.16",
     "@types/pluralize": "^0.0.33",
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
     "@types/swagger-ui-react": "^5.18.0",

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

@@ -109,6 +109,18 @@ export async function getChainInfraCheckoutURL(options: {
   }
 
   const json = await res.json();
+
+  if (
+    "error" in json &&
+    "message" in json.error &&
+    typeof json.error.message === "string"
+  ) {
+    return {
+      error: json.error.message,
+      status: "error",
+    } as const;
+  }
+
   if (!json.result) {
     return {
       error: "An unknown error occurred, please try again later.",

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

@@ -232,13 +232,13 @@ type TokenSwapParams = {
   buyTokenAddress: string;
   sellTokenChainId: number;
   sellTokenAddress: string;
-  pageType: "asset" | "bridge" | "chain";
+  pageType: "asset" | "bridge" | "chain" | "bridge-iframe";
 };
 
 type TokenBuyParams = {
   buyTokenChainId: number | undefined;
   buyTokenAddress: string | undefined;
-  pageType: "asset" | "bridge" | "chain";
+  pageType: "asset" | "bridge" | "chain" | "bridge-iframe";
 };
 
 /**
@@ -298,7 +298,7 @@ export function reportTokenSwapSuccessful(properties: TokenSwapParams) {
  * @MananTank
  */
 export function reportSwapWidgetShown(properties: {
-  pageType: "asset" | "bridge" | "chain";
+  pageType: "asset" | "bridge" | "chain" | "bridge-iframe";
 }) {
   posthog.capture("swap widget shown", properties);
 }
@@ -683,7 +683,7 @@ export function reportProductFeedback(properties: {
  *
  */
 export function reportBridgePageLinkClick(params: {
-  linkType: "bridge-docs" | "trending-tokens";
+  linkType: "bridge-docs" | "trending-tokens" | "integrate-bridge-widget";
 }) {
   posthog.capture("bridge page link clicked", params);
 }

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

@@ -1,19 +1,20 @@
 import "server-only";
 
 import { unstable_cache } from "next/cache";
+import { getWalletInfo, type WalletId } from "thirdweb/wallets";
 import { ANALYTICS_SERVICE_URL } from "@/constants/server-envs";
 import { normalizeTime } from "@/lib/time";
 import type {
   AIUsageStats,
   AnalyticsQueryParams,
   EcosystemWalletStats,
-  EngineCloudStats,
   InAppWalletStats,
   TransactionStats,
   UniversalBridgeStats,
   UniversalBridgeWalletStats,
   UserOpStats,
   WalletStats,
+  WalletStatsWithName,
   WebhookLatencyStats,
   WebhookSummaryStats,
   X402QueryParams,
@@ -148,13 +149,7 @@ const cached_getWalletConnections = unstable_cache(
     }
 
     const json = await res.json();
-    return (json.data as WalletStats[]).filter(
-      (w) =>
-        w.walletType !== "smart" &&
-        w.walletType !== "smartWallet" &&
-        w.walletType !== "inApp" &&
-        w.walletType !== "inAppWallet",
-    );
+    return json.data as WalletStats[];
   },
   ["getWalletConnections"],
   {
@@ -162,11 +157,116 @@ const cached_getWalletConnections = unstable_cache(
   },
 );
 
-export function getWalletConnections(
+const cache_getEOAWalletConnections = unstable_cache(
+  async (
+    params: AnalyticsQueryParams,
+    authToken: string,
+  ): Promise<WalletStatsWithName[]> => {
+    const result = await cached_getWalletConnections(
+      normalizedParams(params),
+      authToken,
+    );
+    const filteredResult = result.filter(
+      (w) =>
+        w.walletType !== "smart" &&
+        w.walletType !== "smartWallet" &&
+        w.walletType !== "inApp" &&
+        w.walletType !== "inAppWallet",
+    );
+
+    const modifiedResult = await Promise.all(
+      filteredResult.map(async (w) => {
+        const wallet = await getWalletInfo(w.walletType as WalletId).catch(
+          () => undefined,
+        );
+
+        if (!wallet) {
+          return {
+            ...w,
+            walletName: w.walletType,
+          };
+        }
+
+        return {
+          ...w,
+          walletName: wallet.name,
+        };
+      }),
+    );
+
+    return modifiedResult;
+  },
+  ["getEOAWalletConnections"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
+
+export async function getEOAWalletConnections(
   params: AnalyticsQueryParams,
   authToken: string,
 ) {
-  return cached_getWalletConnections(normalizedParams(params), authToken);
+  return cache_getEOAWalletConnections(normalizedParams(params), authToken);
+}
+
+const cache_getEOAAndInAppWalletConnections = unstable_cache(
+  async (
+    params: AnalyticsQueryParams,
+    authToken: string,
+  ): Promise<WalletStatsWithName[]> => {
+    const result = await cached_getWalletConnections(
+      normalizedParams(params),
+      authToken,
+    );
+
+    const modifiedResult = await Promise.all(
+      result.map(async (w) => {
+        if (
+          w.walletType === "inApp" ||
+          w.walletType === "inAppWallet" ||
+          w.walletType === "smart" ||
+          w.walletType === "smartWallet"
+        ) {
+          return {
+            ...w,
+            walletName: "User wallet",
+          };
+        }
+
+        const wallet = await getWalletInfo(w.walletType as WalletId).catch(
+          () => undefined,
+        );
+
+        if (!wallet) {
+          return {
+            ...w,
+            walletName: w.walletType,
+          };
+        }
+
+        return {
+          ...w,
+          walletName: wallet.name,
+        };
+      }),
+    );
+
+    return modifiedResult;
+  },
+  ["getEOAAndInAppWalletConnections"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
+
+export async function getEOAAndInAppWalletConnections(
+  params: AnalyticsQueryParams,
+  authToken: string,
+): Promise<WalletStatsWithName[]> {
+  return cache_getEOAAndInAppWalletConnections(
+    normalizedParams(params),
+    authToken,
+  );
 }
 
 const cached_getInAppWalletUsage = unstable_cache(
@@ -691,41 +791,6 @@ export function getUniversalBridgeWalletUsage(
   );
 }
 
-const cached_getEngineCloudMethodUsage = unstable_cache(
-  async (
-    params: AnalyticsQueryParams,
-    authToken: string,
-  ): Promise<EngineCloudStats[]> => {
-    const searchParams = buildSearchParams(params);
-    const res = await fetchAnalytics({
-      authToken,
-      url: `v2/engine-cloud/requests?${searchParams.toString()}`,
-      init: {
-        method: "GET",
-      },
-    });
-
-    if (res?.status !== 200) {
-      console.error("Failed to fetch Engine Cloud method usage");
-      return [];
-    }
-
-    const json = await res.json();
-    return json.data as EngineCloudStats[];
-  },
-  ["getEngineCloudMethodUsage"],
-  {
-    revalidate: 60 * 60, // 1 hour
-  },
-);
-
-export function getEngineCloudMethodUsage(
-  params: AnalyticsQueryParams,
-  authToken: string,
-) {
-  return cached_getEngineCloudMethodUsage(normalizedParams(params), authToken);
-}
-
 const _cached_getWebhookSummary = unstable_cache(
   async (
     params: AnalyticsQueryParams & { webhookId: string },

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

@@ -105,6 +105,7 @@ type PartnerPermission = "PROMPT_USER_V1" | "FULL_CONTROL_V1";
 export type Partner = {
   id: string;
   name: string;
+  imageUrl?: string;
   allowlistedDomains: string[];
   allowlistedBundleIds: string[];
   permissions: [PartnerPermission];

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

@@ -8,7 +8,10 @@ import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import { API_SERVER_SECRET } from "@/constants/server-envs";
 import { getMemberByAccountId } from "./team-members";
 
-export type Team = TeamResponse & { stripeCustomerId: string | null };
+export type Team = TeamResponse & {
+  stripeCustomerId: string | null;
+  isLegacyPlan: boolean;
+};
 
 export async function getTeamBySlug(slug: string) {
   const token = await getAuthToken();

apps/dashboard/src/@/components/analytics/empty-chart-state.tsx

@@ -1,42 +1,23 @@
 "use client";
-import { useId, useMemo } from "react";
-import { Area, AreaChart, Bar, BarChart } from "recharts";
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import { ArrowUpRightIcon, XIcon } from "lucide-react";
+import Link from "next/link";
 import { LoadingDots } from "@/components/ui/LoadingDots";
 import { cn } from "@/lib/utils";
+import { Button } from "../ui/button";
 
-type FakeCartData = {
-  value: number;
-};
-
-function generateRandomData(): FakeCartData[] {
-  return Array.from({ length: 30 }, () => ({
-    value: Math.floor(Math.random() * 100 + 30),
-  }));
-}
-
-const skeletonChartConfig = {
-  value: {
-    color: "hsl(var(--muted)/90%)",
-    label: "Value",
-  },
-} satisfies ChartConfig;
-
-export function EmptyChartState({
-  children,
-  type,
-}: {
-  children?: React.ReactNode;
-  type: "bar" | "area";
-}) {
-  const barChartData = useMemo(() => generateRandomData(), []);
-
+export function EmptyChartState({ content }: { content?: React.ReactNode }) {
   return (
     <div className="relative z-0 h-full w-full">
-      <div className="absolute inset-0 z-[1] flex flex-col items-center justify-center font-medium text-base text-muted-foreground">
-        {children ?? "No data available"}
+      <div className="absolute inset-0 z-[1] flex flex-col items-center justify-center text-base text-muted-foreground">
+        {content || (
+          <div className="flex items-center gap-3 flex-col">
+            <div className="rounded-full border p-2 bg-background">
+              <XIcon className="size-4" />
+            </div>
+            <p className="text-sm"> No data available </p>
+          </div>
+        )}
       </div>
-      <SkeletonBarChart data={barChartData} type={type} />
     </div>
   );
 }
@@ -45,7 +26,7 @@ export function LoadingChartState({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        "pointer-events-none flex h-full w-full items-center justify-center rounded-lg bg-muted/30",
+        "pointer-events-none flex h-full w-full items-center justify-center bg-card rounded-lg",
         className,
       )}
     >
@@ -54,51 +35,42 @@ export function LoadingChartState({ className }: { className?: string }) {
   );
 }
 
-function SkeletonBarChart(props: {
-  data: FakeCartData[];
-  type: "bar" | "area";
+export function EmptyChartStateGetStartedCTA(props: {
+  link?: {
+    label: string;
+    href: string;
+  };
+  title: string;
+  description?: string;
 }) {
-  const fillAreaSkeletonId = useId();
   return (
-    <ChartContainer
-      className="pointer-events-none h-full w-full blur-[5px]"
-      config={skeletonChartConfig}
-    >
-      {props.type === "bar" ? (
-        <BarChart
-          data={props.data}
-          margin={{
-            top: 20,
-          }}
+    <div className="flex items-center flex-col">
+      <div className="rounded-full border p-2 mb-4">
+        <XIcon className="size-4 text-foreground" />
+      </div>
+      <div className="mb-5 space-y-1">
+        <h3 className="text-base text-foreground text-center font-medium">
+          {props.title}
+        </h3>
+        {props.description && (
+          <p className="text-center text-sm text-muted-foreground">
+            {props.description}
+          </p>
+        )}
+      </div>
+
+      {props.link && (
+        <Button
+          asChild
+          className="rounded-full gap-2"
+          variant="default"
+          size="sm"
         >
-          <Bar dataKey="value" fill="var(--color-value)" radius={8} />
-        </BarChart>
-      ) : (
-        <AreaChart
-          data={props.data}
-          margin={{
-            top: 20,
-          }}
-        >
-          <defs>
-            <linearGradient id={fillAreaSkeletonId} x1="0" x2="0" y1="0" y2="1">
-              <stop
-                offset="5%"
-                stopColor={"hsl(var(--muted-foreground)/0.5)"}
-                stopOpacity={0.8}
-              />
-              <stop offset="95%" stopColor="transparent" stopOpacity={0.1} />
-            </linearGradient>
-          </defs>
-          <Area
-            dataKey="value"
-            fill={`url(#${fillAreaSkeletonId})`}
-            radius={8}
-            stroke="hsl(var(--muted-foreground))"
-            type="monotone"
-          />
-        </AreaChart>
+          <Link href={props.link.href}>
+            {props.link.label} <ArrowUpRightIcon className="size-4" />
+          </Link>
+        </Button>
       )}
-    </ChartContainer>
+    </div>
   );
 }

apps/dashboard/src/@/components/analytics/stat.tsx

@@ -6,13 +6,16 @@ export const StatCard: React.FC<{
   icon: React.FC<{ className?: string }>;
   formatter?: (value: number) => string;
   isPending: boolean;
-}> = ({ label, value, formatter, icon: Icon, isPending }) => {
+  emptyText?: string;
+}> = ({ label, value, formatter, icon: Icon, isPending, emptyText }) => {
   return (
     <dl className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-4 pr-6">
       <div>
         <dd className="mb-0.5 font-semibold text-2xl tracking-tight">
           {isPending ? (
             <Skeleton className="h-8 w-20" />
+          ) : emptyText ? (
+            <span className="text-muted-foreground">{emptyText}</span>
           ) : value !== undefined && formatter ? (
             formatter(value)
           ) : (

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

@@ -2,9 +2,8 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { defineChain } from "thirdweb";
-import { BuyWidget, SwapWidget } from "thirdweb/react";
+import { useEffect, useMemo, useRef } from "react";
+import { BridgeWidget, type SupportedFiatCurrency } from "thirdweb/react";
 import type { Wallet } from "thirdweb/wallets";
 import {
   reportAssetBuyCancelled,
@@ -18,21 +17,21 @@ import {
   reportTokenSwapFailed,
   reportTokenSwapSuccessful,
 } from "@/analytics/report";
-import { Button } from "@/components/ui/button";
 import {
   NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID,
+  NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID,
   NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID,
   NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID,
 } from "@/constants/public-envs";
-import { cn } from "@/lib/utils";
 import { parseError } from "@/utils/errorParser";
 import { getSDKTheme } from "@/utils/sdk-component-theme";
 import { appMetadata } from "../../constants/connect";
 import { getConfiguredThirdwebClient } from "../../constants/thirdweb.server";
 
-type PageType = "asset" | "bridge" | "chain";
+type PageType = "asset" | "bridge" | "chain" | "bridge-iframe";
 
 export type BuyAndSwapEmbedProps = {
+  persistTokenSelections?: boolean;
   buyTab:
     | {
         buyToken:
@@ -64,11 +63,12 @@ export type BuyAndSwapEmbedProps = {
     | undefined;
   pageType: PageType;
   wallets?: Wallet[];
+  currency?: SupportedFiatCurrency;
+  showThirdwebBranding?: boolean;
 };
 
 export function BuyAndSwapEmbed(props: BuyAndSwapEmbedProps) {
   const { theme } = useTheme();
-  const [tab, setTab] = useState<"buy" | "swap">("swap");
   const themeObj = getSDKTheme(theme === "light" ? "light" : "dark");
   const isMounted = useRef(false);
 
@@ -92,215 +92,170 @@ export function BuyAndSwapEmbed(props: BuyAndSwapEmbedProps) {
             ? NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID
             : props.pageType === "chain"
               ? NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID
-              : undefined,
+              : props.pageType === "bridge-iframe"
+                ? NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID
+                : undefined,
       secretKey: undefined,
       teamId: undefined,
     });
   }, [props.pageType]);
 
   return (
-    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10 shadow-xl min-w-0">
-      <div className="flex gap-2.5 p-4 border-b border-dashed">
-        <TabButton
-          label="Swap"
-          onClick={() => setTab("swap")}
-          isActive={tab === "swap"}
-        />
-        <TabButton
-          label="Buy"
-          onClick={() => setTab("buy")}
-          isActive={tab === "buy"}
-        />
-      </div>
+    <BridgeWidget
+      client={client}
+      theme={themeObj}
+      className="z-10 min-w-0 shadow-xl"
+      connectOptions={{
+        autoConnect: false,
+        wallets: props.wallets,
+        appMetadata: appMetadata,
+      }}
+      buy={
+        props.buyTab
+          ? {
+              amount: props.buyTab.buyToken?.amount,
+              chainId: props.buyTab.buyToken?.chainId,
+              tokenAddress: props.buyTab.buyToken?.tokenAddress,
+              onError: (e, quote) => {
+                const errorMessage = parseError(e);
 
-      {tab === "buy" && (
-        <BuyWidget
-          amount={props.buyTab?.buyToken?.amount || "1"}
-          chain={
-            props.buyTab?.buyToken?.chainId
-              ? defineChain(props.buyTab.buyToken.chainId)
-              : undefined
-          }
-          tokenAddress={
-            props.buyTab?.buyToken?.tokenAddress as `0x${string}` | undefined
-          }
-          className="!rounded-2xl !border-none"
-          title=""
-          client={client}
-          connectOptions={{
-            autoConnect: false,
-            wallets: props.wallets,
-            appMetadata: appMetadata,
-          }}
-          onError={(e, quote) => {
-            const errorMessage = parseError(e);
+                const buyChainId =
+                  quote?.type === "buy"
+                    ? quote.intent.destinationChainId
+                    : quote?.type === "onramp"
+                      ? quote.intent.chainId
+                      : undefined;
 
-            const buyChainId =
-              quote?.type === "buy"
-                ? quote.intent.destinationChainId
-                : quote?.type === "onramp"
-                  ? quote.intent.chainId
-                  : undefined;
+                if (!buyChainId) {
+                  return;
+                }
 
-            if (!buyChainId) {
-              return;
+                reportTokenBuyFailed({
+                  buyTokenChainId: buyChainId,
+                  buyTokenAddress:
+                    quote?.type === "buy"
+                      ? quote.intent.destinationTokenAddress
+                      : quote?.type === "onramp"
+                        ? quote.intent.tokenAddress
+                        : undefined,
+                  pageType: props.pageType,
+                });
+
+                if (props.pageType === "asset") {
+                  reportAssetBuyFailed({
+                    assetType: "coin",
+                    chainId: buyChainId,
+                    error: errorMessage,
+                    contractType: undefined,
+                    is_testnet: false,
+                  });
+                }
+              },
+              onCancel: (quote) => {
+                const buyChainId =
+                  quote?.type === "buy"
+                    ? quote.intent.destinationChainId
+                    : quote?.type === "onramp"
+                      ? quote.intent.chainId
+                      : undefined;
+
+                if (!buyChainId) {
+                  return;
+                }
+
+                reportTokenBuyCancelled({
+                  buyTokenChainId: buyChainId,
+                  buyTokenAddress:
+                    quote?.type === "buy"
+                      ? quote.intent.destinationTokenAddress
+                      : quote?.type === "onramp"
+                        ? quote.intent.tokenAddress
+                        : undefined,
+                  pageType: props.pageType,
+                });
+
+                if (props.pageType === "asset") {
+                  reportAssetBuyCancelled({
+                    assetType: "coin",
+                    chainId: buyChainId,
+                    contractType: undefined,
+                    is_testnet: false,
+                  });
+                }
+              },
+              onSuccess: ({ quote }) => {
+                const buyChainId =
+                  quote?.type === "buy"
+                    ? quote.intent.destinationChainId
+                    : quote?.type === "onramp"
+                      ? quote.intent.chainId
+                      : undefined;
+
+                if (!buyChainId) {
+                  return;
+                }
+
+                reportTokenBuySuccessful({
+                  buyTokenChainId: buyChainId,
+                  buyTokenAddress:
+                    quote?.type === "buy"
+                      ? quote.intent.destinationTokenAddress
+                      : quote?.type === "onramp"
+                        ? quote.intent.tokenAddress
+                        : undefined,
+                  pageType: props.pageType,
+                });
+
+                if (props.pageType === "asset") {
+                  reportAssetBuySuccessful({
+                    assetType: "coin",
+                    chainId: buyChainId,
+                    contractType: undefined,
+                    is_testnet: false,
+                  });
+                }
+              },
             }
-
-            reportTokenBuyFailed({
-              buyTokenChainId: buyChainId,
-              buyTokenAddress:
-                quote?.type === "buy"
-                  ? quote.intent.destinationTokenAddress
-                  : quote?.type === "onramp"
-                    ? quote.intent.tokenAddress
-                    : undefined,
-              pageType: props.pageType,
-            });
-
-            if (props.pageType === "asset") {
-              reportAssetBuyFailed({
-                assetType: "coin",
-                chainId: buyChainId,
-                error: errorMessage,
-                contractType: undefined,
-                is_testnet: false,
-              });
-            }
-          }}
-          onCancel={(quote) => {
-            const buyChainId =
-              quote?.type === "buy"
-                ? quote.intent.destinationChainId
-                : quote?.type === "onramp"
-                  ? quote.intent.chainId
-                  : undefined;
-
-            if (!buyChainId) {
-              return;
-            }
-
-            reportTokenBuyCancelled({
-              buyTokenChainId: buyChainId,
-              buyTokenAddress:
-                quote?.type === "buy"
-                  ? quote.intent.destinationTokenAddress
-                  : quote?.type === "onramp"
-                    ? quote.intent.tokenAddress
-                    : undefined,
-              pageType: props.pageType,
-            });
-
-            if (props.pageType === "asset") {
-              reportAssetBuyCancelled({
-                assetType: "coin",
-                chainId: buyChainId,
-                contractType: undefined,
-                is_testnet: false,
-              });
-            }
-          }}
-          onSuccess={({ quote }) => {
-            const buyChainId =
-              quote?.type === "buy"
-                ? quote.intent.destinationChainId
-                : quote?.type === "onramp"
-                  ? quote.intent.chainId
-                  : undefined;
-
-            if (!buyChainId) {
-              return;
-            }
-
-            reportTokenBuySuccessful({
-              buyTokenChainId: buyChainId,
-              buyTokenAddress:
-                quote?.type === "buy"
-                  ? quote.intent.destinationTokenAddress
-                  : quote?.type === "onramp"
-                    ? quote.intent.tokenAddress
-                    : undefined,
-              pageType: props.pageType,
-            });
-
-            if (props.pageType === "asset") {
-              reportAssetBuySuccessful({
-                assetType: "coin",
-                chainId: buyChainId,
-                contractType: undefined,
-                is_testnet: false,
-              });
-            }
-          }}
-          theme={themeObj}
-          paymentMethods={["card"]}
-        />
-      )}
-
-      {tab === "swap" && (
-        <SwapWidget
-          client={client}
-          theme={themeObj}
-          className="!rounded-2xl !border-none"
-          connectOptions={{
-            autoConnect: false,
-            wallets: props.wallets,
-            appMetadata: appMetadata,
-          }}
-          prefill={{
-            buyToken: props.swapTab?.buyToken,
-            sellToken: props.swapTab?.sellToken,
-          }}
-          onError={(error, quote) => {
-            const errorMessage = parseError(error);
-            reportTokenSwapFailed({
-              errorMessage: errorMessage,
-              buyTokenChainId: quote.intent.destinationChainId,
-              buyTokenAddress: quote.intent.destinationTokenAddress,
-              sellTokenChainId: quote.intent.originChainId,
-              sellTokenAddress: quote.intent.originTokenAddress,
-              pageType: props.pageType,
-            });
-          }}
-          onSuccess={({ quote }) => {
-            reportTokenSwapSuccessful({
-              buyTokenChainId: quote.intent.destinationChainId,
-              buyTokenAddress: quote.intent.destinationTokenAddress,
-              sellTokenChainId: quote.intent.originChainId,
-              sellTokenAddress: quote.intent.originTokenAddress,
-              pageType: props.pageType,
-            });
-          }}
-          onCancel={(quote) => {
-            reportTokenSwapCancelled({
-              buyTokenChainId: quote.intent.destinationChainId,
-              buyTokenAddress: quote.intent.destinationTokenAddress,
-              sellTokenChainId: quote.intent.originChainId,
-              sellTokenAddress: quote.intent.originTokenAddress,
-              pageType: props.pageType,
-            });
-          }}
-        />
-      )}
-    </div>
-  );
-}
-
-function TabButton(props: {
-  label: string;
-  onClick: () => void;
-  isActive: boolean;
-}) {
-  return (
-    <Button
-      onClick={props.onClick}
-      size="sm"
-      className={cn(
-        "rounded-full text-muted-foreground px-4 bg-accent",
-        props.isActive && "text-foreground border-foreground/50",
-      )}
-      variant="outline"
-    >
-      {props.label}
-    </Button>
+          : undefined
+      }
+      swap={{
+        persistTokenSelections: props.persistTokenSelections,
+        prefill: {
+          buyToken: props.swapTab?.buyToken,
+          sellToken: props.swapTab?.sellToken,
+        },
+        onError: (error, quote) => {
+          const errorMessage = parseError(error);
+          reportTokenSwapFailed({
+            errorMessage: errorMessage,
+            buyTokenChainId: quote.intent.destinationChainId,
+            buyTokenAddress: quote.intent.destinationTokenAddress,
+            sellTokenChainId: quote.intent.originChainId,
+            sellTokenAddress: quote.intent.originTokenAddress,
+            pageType: props.pageType,
+          });
+        },
+        onSuccess: ({ quote }) => {
+          reportTokenSwapSuccessful({
+            buyTokenChainId: quote.intent.destinationChainId,
+            buyTokenAddress: quote.intent.destinationTokenAddress,
+            sellTokenChainId: quote.intent.originChainId,
+            sellTokenAddress: quote.intent.originTokenAddress,
+            pageType: props.pageType,
+          });
+        },
+        onCancel: (quote) => {
+          reportTokenSwapCancelled({
+            buyTokenChainId: quote.intent.destinationChainId,
+            buyTokenAddress: quote.intent.destinationTokenAddress,
+            sellTokenChainId: quote.intent.originChainId,
+            sellTokenAddress: quote.intent.originTokenAddress,
+            pageType: props.pageType,
+          });
+        },
+      }}
+      currency={props.currency}
+      showThirdwebBranding={props.showThirdwebBranding}
+    />
   );
 }

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

@@ -34,7 +34,8 @@ export function ExportToCSVButton(props: {
 
   return (
     <Button
-      className={cn("flex items-center gap-2 border text-xs", props.className)}
+      className={cn("gap-2 rounded-full", props.className)}
+      size="sm"
       disabled={props.disabled || exportMutation.isPending}
       onClick={async () => {
         exportMutation.mutate();
@@ -42,16 +43,11 @@ export function ExportToCSVButton(props: {
       variant="outline"
     >
       {exportMutation.isPending ? (
-        <>
-          Downloading
-          <Spinner className="size-3" />
-        </>
+        <Spinner className="size-3.5 text-muted-foreground" />
       ) : (
-        <>
-          <DownloadIcon className="size-3" />
-          Export as CSV
-        </>
+        <DownloadIcon className="size-3.5 text-muted-foreground" />
       )}
+      Export
     </Button>
   );
 }

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

@@ -70,6 +70,7 @@ function Variants() {
             key={currentPlan}
             requiredPlan={requiredPlan}
             teamSlug="foo"
+            isLegacyPlan={false}
           />
         </BadgeContainer>
       ))}

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

@@ -14,6 +14,7 @@ type GatedSwitchProps = {
   trackingLabel?: string;
   currentPlan: Team["billingPlan"];
   requiredPlan: Team["billingPlan"];
+  isLegacyPlan: boolean;
   teamSlug: string;
   switchProps?: SwitchProps;
 };
@@ -33,7 +34,7 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
           <div className="w-full min-w-[280px]">
             <h3 className="font-medium text-base">
               <span className="capitalize">
-                {getTeamPlanBadgeLabel(props.requiredPlan)}+
+                {getTeamPlanBadgeLabel(props.requiredPlan, false)}+
               </span>{" "}
               plan required
             </h3>
@@ -48,7 +49,8 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
                   rel="noopener noreferrer"
                   target="_blank"
                 >
-                  Upgrade to {getTeamPlanBadgeLabel(props.requiredPlan)} plan
+                  Upgrade to {getTeamPlanBadgeLabel(props.requiredPlan, false)}{" "}
+                  plan
                   <ExternalLinkIcon className="size-4" />
                 </Link>
               </Button>
@@ -61,6 +63,7 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
         {isUpgradeRequired && (
           <TeamPlanBadge
             plan={props.requiredPlan}
+            isLegacyPlan={props.isLegacyPlan}
             postfix="+"
             teamSlug={props.teamSlug}
           />

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

@@ -23,28 +23,42 @@ const teamPlanToBadgeVariant: Record<
   starter: "warning",
 };
 
-export function getTeamPlanBadgeLabel(plan: Team["billingPlan"]) {
+export function getTeamPlanBadgeLabel(
+  plan: Team["billingPlan"],
+  isLegacyPlan: boolean,
+) {
   if (plan === "growth_legacy") {
     return "Growth - Legacy";
   }
 
+  if (isLegacyPlan) {
+    return `${plan} - Legacy`;
+  }
+
   return plan;
 }
 
 export function TeamPlanBadge(props: {
   teamSlug: string;
   plan: Team["billingPlan"];
+  isLegacyPlan: boolean;
   className?: string;
   postfix?: string;
 }) {
   const router = useDashboardRouter();
 
   function handleNavigateToBilling(e: React.MouseEvent | React.KeyboardEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (props.isLegacyPlan) {
+      router.push(`/team/${props.teamSlug}/~/billing`);
+      return;
+    }
+
     if (props.plan !== "free") {
       return;
     }
-    e.stopPropagation();
-    e.preventDefault();
     router.push(`/team/${props.teamSlug}/~/billing?showPlans=true`);
   }
 
@@ -57,11 +71,13 @@ export function TeamPlanBadge(props: {
           handleNavigateToBilling(e);
         }
       }}
-      role={props.plan === "free" ? "button" : undefined}
-      tabIndex={props.plan === "free" ? 0 : undefined}
-      variant={teamPlanToBadgeVariant[props.plan]}
+      role={props.plan === "free" || props.isLegacyPlan ? "button" : undefined}
+      tabIndex={props.plan === "free" || props.isLegacyPlan ? 0 : undefined}
+      variant={
+        props.isLegacyPlan ? "warning" : teamPlanToBadgeVariant[props.plan]
+      }
     >
-      {`${getTeamPlanBadgeLabel(props.plan)}${props.postfix || ""}`}
+      {`${getTeamPlanBadgeLabel(props.plan, props.isLegacyPlan)}${props.postfix || ""}`}
     </Badge>
   );
 }

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

@@ -40,7 +40,7 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
 
   yAxis?: boolean;
   xAxis?: {
-    sameDay?: boolean;
+    showHour?: boolean;
   };
 
   variant?: "stacked" | "individual";
@@ -90,9 +90,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
           {props.isPending ? (
             <LoadingChartState />
           ) : props.data.length === 0 ? (
-            <EmptyChartState type="area">
-              {props.emptyChartState}
-            </EmptyChartState>
+            <EmptyChartState content={props.emptyChartState} />
           ) : (
             <AreaChart
               accessibilityLayer
@@ -112,7 +110,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
                 tickFormatter={(value) =>
                   format(
                     new Date(value),
-                    props.xAxis?.sameDay ? "MMM dd, HH:mm" : "MMM dd",
+                    props.xAxis?.showHour ? "MMM dd, HH:mm" : "MMM dd",
                   )
                 }
                 tickLine={false}

apps/dashboard/src/@/components/blocks/charts/automerge-barchart.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import type { InAppWalletAuth } from "thirdweb/wallets";
 import { BadgeContainer } from "@/storybook/utils";
-import type { InAppWalletStats } from "@/types/analytics";
-import { InAppWalletUsersChartCardUI } from "./InAppWalletUsersChartCard";
+import { AutoMergeBarChart, type StatData } from "./automerge-barchart";
 
 const meta = {
   component: Component,
-  title: "Charts/InAppWallets",
+  title: "Charts/AutoMergeBarChart",
 } satisfies Meta<typeof Component>;
 
 export default meta;
@@ -22,57 +21,106 @@ function Component() {
     "This is an example of a description about user wallet usage chart";
   return (
     <div className="container flex max-w-6xl flex-col gap-10 py-10">
-      <BadgeContainer label="30 days">
-        <InAppWalletUsersChartCardUI
+      <BadgeContainer label="10 days, view more variant">
+        <AutoMergeBarChart
+          viewMoreLink={"#"}
           description={description}
-          inAppWalletStats={createInAppWalletStatsStub(30)}
+          stats={createStatsStub(10)}
           isPending={false}
           title={title}
+          maxLabelsToShow={5}
+          emptyChartState={undefined}
+          exportButton={undefined}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="30 days">
+        <AutoMergeBarChart
+          viewMoreLink={undefined}
+          description={description}
+          stats={createStatsStub(30)}
+          isPending={false}
+          title={title}
+          maxLabelsToShow={5}
+          emptyChartState={undefined}
+          exportButton={{
+            fileName: "in-app-wallets",
+          }}
         />
       </BadgeContainer>
 
       <BadgeContainer label="60 days">
-        <InAppWalletUsersChartCardUI
+        <AutoMergeBarChart
+          viewMoreLink={undefined}
           description={description}
-          inAppWalletStats={createInAppWalletStatsStub(60)}
+          stats={createStatsStub(60)}
           isPending={false}
           title={title}
+          maxLabelsToShow={5}
+          emptyChartState={undefined}
+          exportButton={{
+            fileName: "in-app-wallets",
+          }}
         />
       </BadgeContainer>
 
       <BadgeContainer label="120 days">
-        <InAppWalletUsersChartCardUI
+        <AutoMergeBarChart
+          viewMoreLink={undefined}
           description={description}
-          inAppWalletStats={createInAppWalletStatsStub(120)}
+          stats={createStatsStub(120)}
           isPending={false}
           title={title}
+          maxLabelsToShow={5}
+          emptyChartState={undefined}
+          exportButton={{
+            fileName: "in-app-wallets",
+          }}
         />
       </BadgeContainer>
 
       <BadgeContainer label="10 days">
-        <InAppWalletUsersChartCardUI
+        <AutoMergeBarChart
+          viewMoreLink={undefined}
           description={description}
-          inAppWalletStats={createInAppWalletStatsStub(10)}
+          stats={createStatsStub(10)}
           isPending={false}
           title={title}
+          maxLabelsToShow={5}
+          emptyChartState={undefined}
+          exportButton={{
+            fileName: "in-app-wallets",
+          }}
         />
       </BadgeContainer>
 
       <BadgeContainer label="Empty List">
-        <InAppWalletUsersChartCardUI
+        <AutoMergeBarChart
+          viewMoreLink={undefined}
           description={description}
-          inAppWalletStats={createInAppWalletStatsStub(0)}
+          stats={createStatsStub(0)}
           isPending={false}
           title={title}
+          maxLabelsToShow={5}
+          emptyChartState={undefined}
+          exportButton={{
+            fileName: "in-app-wallets",
+          }}
         />
       </BadgeContainer>
 
       <BadgeContainer label="Pending">
-        <InAppWalletUsersChartCardUI
+        <AutoMergeBarChart
+          viewMoreLink={undefined}
           description={description}
-          inAppWalletStats={[]}
+          stats={[]}
           isPending={true}
           title={title}
+          maxLabelsToShow={5}
+          emptyChartState={undefined}
+          exportButton={{
+            fileName: "in-app-wallets",
+          }}
         />
       </BadgeContainer>
     </div>
@@ -111,17 +159,16 @@ const pickRandomAuthMethod = () => {
   return capitalized;
 };
 
-function createInAppWalletStatsStub(days: number): InAppWalletStats[] {
-  const stubbedData: InAppWalletStats[] = [];
+function createStatsStub(days: number): StatData[] {
+  const stubbedData: StatData[] = [];
 
   let d = days;
   while (d !== 0) {
     const uniqueWallets = Math.floor(Math.random() * 100);
     stubbedData.push({
-      authenticationMethod: pickRandomAuthMethod(),
+      label: pickRandomAuthMethod(),
       date: new Date(2024, 11, d).toLocaleString(),
-      uniqueWalletsConnected: uniqueWallets,
-      newUsers: Math.floor(Math.random() * 100) + 1,
+      count: uniqueWallets,
     });
 
     if (Math.random() > 0.7) {

apps/dashboard/src/@/components/blocks/charts/automerge-barchart.tsx

@@ -0,0 +1,173 @@
+"use client";
+import { format } from "date-fns";
+import { useMemo } from "react";
+import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
+import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
+import type { ChartConfig } from "@/components/ui/chart";
+import { TotalValueChartHeader } from "./chart-header";
+
+export type StatData = {
+  date: string;
+  count: number;
+  label: string;
+};
+
+type ChartData = Record<string, number> & {
+  time: string; // human readable date
+};
+
+const defaultLabel = "Unknown";
+
+// merges the multiple stats in single bar if they share the same date
+// shows the top `maxLabelsToShow` labels, merge the rest into "Others"
+
+export function AutoMergeBarChart(props: {
+  stats: StatData[];
+  isPending: boolean;
+  title: string;
+  emptyChartState: React.ReactElement | undefined;
+  description: string | undefined;
+  maxLabelsToShow: number;
+  exportButton:
+    | {
+        fileName: string;
+      }
+    | undefined;
+  viewMoreLink: string | undefined;
+}) {
+  const { stats, maxLabelsToShow } = props;
+
+  const { chartConfig, chartData } = useMemo(() => {
+    const _chartConfig: ChartConfig = {};
+    const _chartDataMap: Map<string, ChartData> = new Map();
+    const labelToCountMap: Map<string, number> = new Map();
+    // for each stat, add it in _chartDataMap
+    for (const stat of stats) {
+      const chartData = _chartDataMap.get(stat.date);
+
+      // if no data for current day - create new entry
+      if (!chartData && stat.count > 0) {
+        _chartDataMap.set(stat.date, {
+          time: stat.date,
+          [stat.label || defaultLabel]: stat.count,
+        } as ChartData);
+      } else if (chartData) {
+        chartData[stat.label || defaultLabel] =
+          (chartData[stat.label || defaultLabel] || 0) + stat.count;
+      }
+
+      labelToCountMap.set(
+        stat.label || defaultLabel,
+        stat.count + (labelToCountMap.get(stat.label || defaultLabel) || 0),
+      );
+    }
+
+    const labelsSorted = Array.from(labelToCountMap.entries())
+      .sort((a, b) => b[1] - a[1])
+      .map((w) => w[0]);
+
+    const labelsToShow = labelsSorted.slice(0, maxLabelsToShow);
+    const labelsToShowAsOther = labelsSorted.slice(maxLabelsToShow);
+
+    // replace chainIdsToTagAsOther chainId with "other"
+    for (const data of _chartDataMap.values()) {
+      for (const dataKey in data) {
+        if (labelsToShowAsOther.includes(dataKey)) {
+          data.others = (data.others || 0) + (data[dataKey] || 0);
+          delete data[dataKey];
+        }
+      }
+    }
+
+    labelsToShow.forEach((walletType, i) => {
+      _chartConfig[walletType] = {
+        color: `hsl(var(--chart-${(i % 10) + 1}))`,
+        label: labelsToShow[i],
+      };
+    });
+
+    // Add Other
+    if (labelsToShow.length >= maxLabelsToShow) {
+      labelsToShow.push("others");
+      _chartConfig.others = {
+        color: "hsl(var(--muted-foreground))",
+        label: "Others",
+      };
+    }
+
+    return {
+      chartConfig: _chartConfig,
+      chartData: Array.from(_chartDataMap.values()).sort(
+        (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
+      ),
+    };
+  }, [stats, maxLabelsToShow]);
+
+  const uniqueLabels = Object.keys(chartConfig);
+
+  const total = useMemo(() => {
+    return props.stats.reduce((acc, stat) => acc + stat.count, 0);
+  }, [props.stats]);
+
+  return (
+    <ThirdwebBarChart
+      chartClassName="h-[275px] w-full"
+      config={chartConfig}
+      customHeader={
+        props.viewMoreLink ? (
+          <TotalValueChartHeader
+            total={total}
+            title={props.title}
+            isPending={props.isPending}
+            viewMoreLink={props.viewMoreLink}
+          />
+        ) : (
+          <div className="relative px-6 pt-6">
+            <div className="space-y-1">
+              <h3 className="font-semibold text-lg tracking-tight leading-none">
+                {props.title}
+              </h3>
+              {props.description && (
+                <p className="text-muted-foreground text-sm">
+                  {props.description}
+                </p>
+              )}
+            </div>
+
+            {props.exportButton && props.stats.length > 0 && (
+              <ExportToCSVButton
+                className="top-6 right-6 mb-4 w-full bg-background md:absolute md:mb-0 md:flex md:w-auto"
+                fileName={props.exportButton.fileName}
+                getData={async () => {
+                  // Shows the number of each type of wallet connected on all dates
+                  const header = ["Time", ...uniqueLabels];
+                  const rows = chartData.map((data) => {
+                    const { time, ...rest } = data;
+                    return [
+                      new Date(time).toISOString(),
+                      ...uniqueLabels.map((w) => (rest[w] || 0).toString()),
+                    ];
+                  });
+                  return { header, rows };
+                }}
+              />
+            )}
+          </div>
+        )
+      }
+      data={chartData}
+      emptyChartState={props.emptyChartState}
+      hideLabel={false}
+      isPending={props.isPending}
+      showLegend
+      toolTipLabelFormatter={(_v, item) => {
+        if (Array.isArray(item)) {
+          const time = item[0].payload.time as number;
+          return format(new Date(time), "MMM d, yyyy");
+        }
+        return undefined;
+      }}
+      variant="stacked"
+    />
+  );
+}

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

@@ -44,6 +44,10 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   toolTipValueFormatter?: (value: unknown) => React.ReactNode;
   hideLabel?: boolean;
   emptyChartState?: React.ReactElement;
+  className?: string;
+  xAxis?: {
+    showHour?: boolean;
+  };
 };
 
 export function ThirdwebBarChart<TConfig extends ChartConfig>(
@@ -55,7 +59,7 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
     props.variant || configKeys.length > 4 ? "stacked" : "grouped";
 
   return (
-    <Card>
+    <Card className={cn("overflow-hidden", props.className)}>
       {props.header && (
         <CardHeader>
           <CardTitle className={cn("mb-2", props.header.titleClassName)}>
@@ -74,16 +78,19 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
           {props.isPending ? (
             <LoadingChartState />
           ) : props.data.length === 0 ? (
-            <EmptyChartState type="bar">
-              {props.emptyChartState}
-            </EmptyChartState>
+            <EmptyChartState content={props.emptyChartState} />
           ) : (
             <BarChart accessibilityLayer data={props.data}>
               <CartesianGrid vertical={false} />
               <XAxis
                 axisLine={false}
                 dataKey="time"
-                tickFormatter={(value) => format(new Date(value), "MMM d")}
+                tickFormatter={(value) =>
+                  format(
+                    new Date(value),
+                    props.xAxis?.showHour ? "MMM dd, HH:mm" : "MMM dd",
+                  )
+                }
                 tickLine={false}
                 tickMargin={10}
               />

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

@@ -0,0 +1,60 @@
+import { ArrowUpRightIcon } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { SkeletonContainer } from "@/components/ui/skeleton";
+
+export function TotalValueChartHeader(props: {
+  total: number;
+  title: string;
+  isUsd?: boolean;
+  isPending: boolean;
+  viewMoreLink: string | undefined;
+}) {
+  return (
+    <div className="space-y-1 p-6 pb-0 flex justify-between items-start gap-3">
+      <div>
+        <SkeletonContainer
+          loadedData={!props.isPending ? props.total : undefined}
+          skeletonData={100}
+          render={(value) => {
+            return (
+              <p className="text-3xl font-semibold tracking-tight">
+                {props.isUsd
+                  ? compactUSDFormatter.format(value)
+                  : compactNumberFormatter.format(value)}
+              </p>
+            );
+          }}
+        />
+
+        <h3 className="text-muted-foreground">{props.title}</h3>
+      </div>
+
+      {props.viewMoreLink && (
+        <Button
+          asChild
+          size="sm"
+          variant="outline"
+          className="gap-2 rounded-full text-muted-foreground hover:text-foreground"
+        >
+          <Link href={props.viewMoreLink}>
+            <span>View More</span>
+            <ArrowUpRightIcon className="size-4" />
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+}
+
+const compactNumberFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 2,
+});
+
+const compactUSDFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 2,
+  style: "currency",
+  currency: "USD",
+});

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

@@ -125,7 +125,7 @@ export const SelectWithSearch = React.forwardRef<
                   ? renderOption(selectedOption)
                   : selectedOption?.label || placeholder}
               </span>
-              <ChevronDownIcon className="size-4 cursor-pointer text-muted-foreground" />
+              <ChevronDownIcon className="size-3.5 cursor-pointer text-muted-foreground shrink-0" />
             </div>
           </Button>
         </PopoverTrigger>

apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx

@@ -22,6 +22,7 @@ interface UpsellWrapperProps {
   isLocked?: boolean;
   requiredPlan: Team["billingPlan"];
   currentPlan?: Team["billingPlan"];
+  isLegacyPlan?: boolean;
   featureName: string;
   featureDescription: string;
   benefits?: {
@@ -41,6 +42,7 @@ export function UpsellWrapper({
   featureDescription,
   benefits = [],
   className,
+  isLegacyPlan = false,
 }: UpsellWrapperProps) {
   if (!isLocked) {
     return <>{children}</>;
@@ -66,6 +68,7 @@ export function UpsellWrapper({
           featureDescription={featureDescription}
           featureName={featureName}
           requiredPlan={requiredPlan}
+          isLegacyPlan={isLegacyPlan}
           teamSlug={teamSlug}
         />
       </div>
@@ -79,6 +82,7 @@ export function UpsellContent(props: {
   featureDescription: string;
   requiredPlan: Team["billingPlan"];
   currentPlan: Team["billingPlan"];
+  isLegacyPlan: boolean;
   benefits?: {
     description: string;
     status: "available" | "soon";
@@ -96,6 +100,7 @@ export function UpsellContent(props: {
             plan={props.requiredPlan}
             postfix=" Feature"
             teamSlug={props.teamSlug}
+            isLegacyPlan={props.isLegacyPlan}
           />
           <div className="space-y-1">
             <CardTitle className="font-bold text-2xl text-foreground md:text-3xl">

apps/dashboard/src/@/components/contracts/code-overview.tsx

@@ -69,7 +69,7 @@ export default function Component() {
 
 // Get your contract
 var contract = await ThirdwebManager.Instance.GetContract(
-  address: "{{contract_address}}", 
+  address: "{{contract_address}}",
   chainId: {{chainId}},
 );
 
@@ -124,7 +124,7 @@ export default function Component() {
 
 // Get your contract
 var contract = await ThirdwebManager.Instance.GetContract(
-  address: "{{contract_address}}", 
+  address: "{{contract_address}}",
   chainId: {{chainId}}
 );
 
@@ -214,7 +214,7 @@ function App() {
 
 // Get your contract
 var contract = await ThirdwebManager.Instance.GetContract(
-  address: "{{contract_address}}", 
+  address: "{{contract_address}}",
   chainId: {{chainId}}
 );`,
     dotnet: `using Thirdweb;
@@ -272,7 +272,7 @@ export default function Component() {
 
 // Get your contract
 var contract = await ThirdwebManager.Instance.GetContract(
-  address: "{{contract_address}}", 
+  address: "{{contract_address}}",
   chainId: {{chainId}}
 );
 
@@ -1103,7 +1103,7 @@ function AccountFactorySection(props: {
           <AlertDescription>
             The recommended way to use account factories is to integrate the{" "}
             <UnderlineLink
-              href="https://portal.thirdweb.com/transactions/sponsor"
+              href="https://portal.thirdweb.com/wallets/sponsor-gas"
               rel="noopener noreferrer"
               target="_blank"
             >

apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx

@@ -1,371 +0,0 @@
-"use client";
-
-import { createColumnHelper } from "@tanstack/react-table";
-import { format } from "date-fns";
-import { ArrowLeftIcon, ArrowRightIcon, UserIcon } from "lucide-react";
-import Papa from "papaparse";
-import { useCallback, useMemo, useState } from "react";
-import type { ThirdwebClient } from "thirdweb";
-import type { WalletUser } from "thirdweb/wallets";
-import { TWTable } from "@/components/blocks/TWTable";
-import { WalletAddress } from "@/components/blocks/wallet-address";
-import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner";
-import {
-  ToolTipLabel,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import {
-  useAllEmbeddedWallets,
-  useEmbeddedWallets,
-} from "@/hooks/useEmbeddedWallets";
-import { CopyTextButton } from "../ui/CopyTextButton";
-import { AdvancedSearchInput } from "./AdvancedSearchInput";
-import { SearchResults } from "./SearchResults";
-import { searchUsers } from "./searchUsers";
-import type { SearchType } from "./types";
-
-const getAuthIdentifier = (accounts: WalletUser["linkedAccounts"]) => {
-  const mainDetail = accounts[0]?.details;
-  return (
-    mainDetail?.id ??
-    mainDetail?.email ??
-    mainDetail?.phone ??
-    mainDetail?.address
-  );
-};
-
-const getPrimaryEmail = (accounts: WalletUser["linkedAccounts"]) => {
-  const emailFromPrimary = accounts[0]?.details?.email;
-  if (emailFromPrimary) {
-    return emailFromPrimary;
-  }
-
-  const emailAccount = accounts.find((account) => {
-    return typeof account.details?.email === "string" && account.details.email;
-  });
-
-  if (emailAccount && typeof emailAccount.details.email === "string") {
-    return emailAccount.details.email;
-  }
-
-  return undefined;
-};
-
-const columnHelper = createColumnHelper<WalletUser>();
-
-const truncateIdentifier = (value: string) => {
-  if (value.length <= 18) {
-    return value;
-  }
-  return `${value.slice(0, 8)}...${value.slice(-4)}`;
-};
-
-export function InAppWalletUsersPageContent(
-  props: {
-    authToken: string;
-    client: ThirdwebClient;
-    teamId: string;
-  } & (
-    | { projectClientId: string; ecosystemSlug?: never }
-    | { ecosystemSlug: string; projectClientId?: never }
-  ),
-) {
-  const columns = useMemo(() => {
-    return [
-      columnHelper.accessor("id", {
-        cell: (cell) => {
-          const userId = cell.getValue();
-
-          if (!userId) {
-            return "N/A";
-          }
-
-          return (
-            <CopyTextButton
-              textToShow={truncateIdentifier(userId)}
-              textToCopy={userId}
-              tooltip="Copy User Identifier"
-              copyIconPosition="left"
-              variant="ghost"
-            />
-          );
-        },
-        header: "User Identifier",
-        id: "user_identifier",
-      }),
-      columnHelper.accessor("linkedAccounts", {
-        cell: (cell) => {
-          const identifier = getAuthIdentifier(cell.getValue());
-
-          if (!identifier) {
-            return "N/A";
-          }
-
-          return (
-            <CopyTextButton
-              textToShow={truncateIdentifier(identifier)}
-              textToCopy={identifier}
-              tooltip="Copy Auth Identifier"
-              copyIconPosition="left"
-              variant="ghost"
-            />
-          );
-        },
-        enableColumnFilter: true,
-        header: "Auth Identifier",
-        id: "auth_identifier",
-      }),
-      columnHelper.accessor("wallets", {
-        cell: (cell) => {
-          const address = cell.getValue()[0]?.address;
-          return address ? (
-            <WalletAddress address={address} client={props.client} />
-          ) : null;
-        },
-        header: "Address",
-        id: "address",
-      }),
-      columnHelper.accessor("linkedAccounts", {
-        cell: (cell) => {
-          const email = getPrimaryEmail(cell.getValue());
-
-          if (!email) {
-            return <span className="text-muted-foreground text-sm">N/A</span>;
-          }
-
-          return (
-            <CopyTextButton
-              textToShow={email}
-              textToCopy={email}
-              tooltip="Copy Email"
-              copyIconPosition="left"
-              variant="ghost"
-            />
-          );
-        },
-        header: "Email",
-        id: "email",
-      }),
-      columnHelper.accessor("wallets", {
-        cell: (cell) => {
-          const value = cell.getValue()[0]?.createdAt;
-
-          if (!value) {
-            return;
-          }
-          return (
-            <ToolTipLabel
-              label={format(new Date(value), "MMM dd, yyyy 'at' h:mm:ss a zzz")}
-              hoverable
-            >
-              <span className="text-sm">
-                {format(new Date(value), "MMM dd, yyyy")}
-              </span>
-            </ToolTipLabel>
-          );
-        },
-        header: "Created",
-        id: "created_at",
-      }),
-      columnHelper.accessor("linkedAccounts", {
-        cell: (cell) => {
-          const value = cell.getValue();
-          const loginMethodsDisplay = value.reduce((acc, curr) => {
-            if (acc.length === 2) {
-              acc.push("...");
-            }
-            if (acc.length < 2) {
-              acc.push(curr.type);
-            }
-            return acc;
-          }, [] as string[]);
-          const loginMethods = value.map((v) => v.type).join(", ");
-          return (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger className="text-sm">
-                  {loginMethodsDisplay.join(", ")}
-                </TooltipTrigger>
-                <TooltipContent>
-                  <span className="text-sm">{loginMethods}</span>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          );
-        },
-        header: "Login Methods",
-        id: "login_methods",
-      }),
-    ];
-  }, [props.client]);
-
-  const [activePage, setActivePage] = useState(1);
-  const [searchResults, setSearchResults] = useState<WalletUser[]>([]);
-  const [isSearching, setIsSearching] = useState(false);
-  const [hasSearchResults, setHasSearchResults] = useState(false);
-  const walletsQuery = useEmbeddedWallets({
-    authToken: props.authToken,
-    clientId: props.projectClientId,
-    ecosystemSlug: props.ecosystemSlug,
-    teamId: props.teamId,
-    page: activePage,
-  });
-  const wallets = walletsQuery?.data?.users || [];
-  const { mutateAsync: getAllEmbeddedWallets, isPending } =
-    useAllEmbeddedWallets({
-      authToken: props.authToken,
-    });
-
-  const handleSearch = async (searchType: SearchType, query: string) => {
-    setIsSearching(true);
-    try {
-      const results = await searchUsers(
-        props.authToken,
-        props.projectClientId,
-        props.ecosystemSlug,
-        props.teamId,
-        searchType,
-        query,
-      );
-      setSearchResults(results);
-      setHasSearchResults(true);
-    } catch (error) {
-      console.error("Search failed:", error);
-      setSearchResults([]);
-      setHasSearchResults(true);
-    } finally {
-      setIsSearching(false);
-    }
-  };
-
-  const handleClearSearch = () => {
-    setSearchResults([]);
-    setHasSearchResults(false);
-  };
-
-  const downloadCSV = useCallback(async () => {
-    if (wallets.length === 0 || !getAllEmbeddedWallets) {
-      return;
-    }
-    const usersWallets = await getAllEmbeddedWallets({
-      clientId: props.projectClientId,
-      ecosystemSlug: props.ecosystemSlug,
-      teamId: props.teamId,
-    });
-    const csv = Papa.unparse(
-      usersWallets.map((row) => {
-        const email = getPrimaryEmail(row.linkedAccounts);
-
-        return {
-          address: row.wallets[0]?.address || "Uninitialized",
-          created: row.wallets[0]?.createdAt
-            ? new Date(row.wallets[0].createdAt).toISOString()
-            : "Wallet not created yet",
-          email: email || "N/A",
-          login_methods: row.linkedAccounts.map((acc) => acc.type).join(", "),
-          auth_identifier: getAuthIdentifier(row.linkedAccounts) || "N/A",
-          user_identifier: row.id || "N/A",
-        };
-      }),
-    );
-    const csvUrl = URL.createObjectURL(
-      new Blob([csv], { type: "text/csv;charset=utf-8;" }),
-    );
-    const tempLink = document.createElement("a");
-    tempLink.href = csvUrl;
-    tempLink.setAttribute("download", "download.csv");
-    tempLink.click();
-  }, [
-    wallets,
-    props.projectClientId,
-    getAllEmbeddedWallets,
-    props.teamId,
-    props.ecosystemSlug,
-  ]);
-
-  return (
-    <div>
-      <div className="overflow-hidden rounded-xl border border-border bg-card">
-        <div className="flex flex-col lg:flex-row lg:justify-between p-4 lg:px-6 py-5 lg:items-center gap-5">
-          <div>
-            <div className="flex mb-3">
-              <div className="p-2 rounded-full bg-background border border-border">
-                <UserIcon className="size-5 text-muted-foreground" />
-              </div>
-            </div>
-            <h2 className="font-semibold text-2xl tracking-tight">
-              User Wallets
-            </h2>
-            <p className="text-muted-foreground text-sm">
-              View and manage your project's users
-            </p>
-          </div>
-
-          <div className="flex flex-col items-start lg:items-end gap-2.5 border-t lg:border-t-0 pt-5 lg:pt-0 border-dashed">
-            <div className="w-full lg:w-auto lg:min-w-[320px]">
-              <AdvancedSearchInput
-                onSearch={handleSearch}
-                onClear={handleClearSearch}
-                isLoading={isSearching}
-                hasResults={hasSearchResults}
-              />
-            </div>
-            <Button
-              className="gap-2 bg-background rounded-full"
-              disabled={wallets.length === 0 || isPending}
-              onClick={downloadCSV}
-              variant="outline"
-            >
-              {isPending && <Spinner className="size-4" />}
-              Download as .csv
-            </Button>
-          </div>
-        </div>
-
-        <div>
-          {hasSearchResults ? (
-            <SearchResults results={searchResults} client={props.client} />
-          ) : (
-            <>
-              <TWTable
-                columns={columns}
-                data={wallets}
-                isFetched={walletsQuery.isFetched}
-                isPending={walletsQuery.isPending}
-                tableContainerClassName="rounded-none border-x-0 border-b-0"
-                title="User wallets"
-              />
-
-              <div className="flex justify-center gap-3 border-t bg-card p-6">
-                <Button
-                  className="gap-2 bg-background"
-                  disabled={activePage === 1 || walletsQuery.isPending}
-                  onClick={() => setActivePage((p) => Math.max(1, p - 1))}
-                  size="sm"
-                  variant="outline"
-                >
-                  <ArrowLeftIcon className="size-4" />
-                  Previous
-                </Button>
-                <Button
-                  className="gap-2 bg-background"
-                  disabled={wallets.length === 0 || walletsQuery.isPending}
-                  onClick={() => setActivePage((p) => p + 1)}
-                  size="sm"
-                  variant="outline"
-                >
-                  Next
-                  <ArrowRightIcon className="size-4" />
-                </Button>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

apps/dashboard/src/@/components/in-app-wallet-users-content/user-wallets-table.tsx

@@ -0,0 +1,612 @@
+"use client";
+
+import { createColumnHelper } from "@tanstack/react-table";
+import { format } from "date-fns";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  DollarSignIcon,
+  RefreshCwIcon,
+  UserIcon,
+  WalletIcon,
+} from "lucide-react";
+import Papa from "papaparse";
+import { useCallback, useMemo, useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import type { WalletUser } from "thirdweb/wallets";
+import { StatCard } from "@/components/analytics/stat";
+import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { TWTable } from "@/components/blocks/TWTable";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { Spinner } from "@/components/ui/Spinner";
+import {
+  ToolTipLabel,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  useAllEmbeddedWallets,
+  useEmbeddedWallets,
+} from "@/hooks/useEmbeddedWallets";
+import {
+  useFetchAllPortfolios,
+  type WalletPortfolioData,
+} from "@/hooks/useWalletPortfolio";
+import { CopyTextButton } from "../ui/CopyTextButton";
+import { AdvancedSearchInput } from "./AdvancedSearchInput";
+import { SearchResults } from "./SearchResults";
+import { searchUsers } from "./searchUsers";
+import type { SearchType } from "./types";
+
+const getAuthIdentifier = (accounts: WalletUser["linkedAccounts"]) => {
+  const mainDetail = accounts[0]?.details;
+  return (
+    mainDetail?.id ??
+    mainDetail?.email ??
+    mainDetail?.phone ??
+    mainDetail?.address
+  );
+};
+
+const getPrimaryEmail = (accounts: WalletUser["linkedAccounts"]) => {
+  const emailFromPrimary = accounts[0]?.details?.email;
+  if (emailFromPrimary) {
+    return emailFromPrimary;
+  }
+
+  const emailAccount = accounts.find((account) => {
+    return typeof account.details?.email === "string" && account.details.email;
+  });
+
+  if (emailAccount && typeof emailAccount.details.email === "string") {
+    return emailAccount.details.email;
+  }
+
+  return undefined;
+};
+
+const columnHelper = createColumnHelper<WalletUser>();
+
+const truncateIdentifier = (value: string) => {
+  if (value.length <= 18) {
+    return value;
+  }
+  return `${value.slice(0, 8)}...${value.slice(-4)}`;
+};
+
+export function UserWalletsTable(
+  props: {
+    authToken: string;
+    client: ThirdwebClient;
+    teamId: string;
+  } & (
+    | { projectClientId: string; ecosystemSlug?: never }
+    | { ecosystemSlug: string; projectClientId?: never }
+  ),
+) {
+  const [activePage, setActivePage] = useState(1);
+  const [searchResults, setSearchResults] = useState<WalletUser[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [hasSearchResults, setHasSearchResults] = useState(false);
+
+  // Portfolio state
+  const [selectedChains, setSelectedChains] = useState<number[]>([1]); // Default to Ethereum
+  const [portfolioMap, setPortfolioMap] = useState<
+    Map<string, WalletPortfolioData>
+  >(new Map());
+  const [portfolioLoaded, setPortfolioLoaded] = useState(false);
+  const [fetchProgress, setFetchProgress] = useState({
+    completed: 0,
+    total: 0,
+  });
+
+  const walletsQuery = useEmbeddedWallets({
+    authToken: props.authToken,
+    clientId: props.projectClientId,
+    ecosystemSlug: props.ecosystemSlug,
+    teamId: props.teamId,
+    page: activePage,
+  });
+  const wallets = walletsQuery?.data?.users || [];
+  const { mutateAsync: getAllEmbeddedWallets, isPending: isLoadingAllWallets } =
+    useAllEmbeddedWallets({
+      authToken: props.authToken,
+    });
+
+  const fetchPortfoliosMutation = useFetchAllPortfolios();
+
+  const handleFetchBalances = useCallback(async () => {
+    if (selectedChains.length === 0) return;
+
+    try {
+      // First get all wallets
+      const allWallets = await getAllEmbeddedWallets({
+        clientId: props.projectClientId,
+        ecosystemSlug: props.ecosystemSlug,
+        teamId: props.teamId,
+      });
+
+      const allAddresses = allWallets
+        .map((w) => w.wallets[0]?.address)
+        .filter((a): a is string => !!a);
+
+      if (allAddresses.length === 0) {
+        setPortfolioLoaded(true);
+        return;
+      }
+
+      setFetchProgress({ completed: 0, total: allAddresses.length });
+
+      const results = await fetchPortfoliosMutation.mutateAsync({
+        addresses: allAddresses,
+        chainIds: selectedChains,
+        authToken: props.authToken,
+        teamId: props.teamId,
+        clientId: props.projectClientId,
+        ecosystemSlug: props.ecosystemSlug,
+        onProgress: (completed, total) => {
+          setFetchProgress({ completed, total });
+        },
+      });
+
+      setPortfolioMap(results);
+      setPortfolioLoaded(true);
+    } catch (error) {
+      console.error("Failed to fetch balances:", error);
+    }
+  }, [
+    selectedChains,
+    getAllEmbeddedWallets,
+    props.projectClientId,
+    props.ecosystemSlug,
+    props.teamId,
+    props.authToken,
+    fetchPortfoliosMutation,
+  ]);
+
+  const isFetchingBalances =
+    isLoadingAllWallets || fetchPortfoliosMutation.isPending;
+
+  const aggregatedStats = useMemo(() => {
+    let fundedWallets = 0;
+    let totalValue = 0;
+    portfolioMap.forEach((data) => {
+      if (data.totalUsdValue > 0) {
+        fundedWallets++;
+        totalValue += data.totalUsdValue;
+      }
+    });
+    return { fundedWallets, totalValue };
+  }, [portfolioMap]);
+
+  const columns = useMemo(() => {
+    return [
+      columnHelper.accessor("id", {
+        cell: (cell) => {
+          const userId = cell.getValue();
+
+          if (!userId) {
+            return "N/A";
+          }
+
+          return (
+            <CopyTextButton
+              textToShow={truncateIdentifier(userId)}
+              textToCopy={userId}
+              tooltip="Copy User Identifier"
+              copyIconPosition="left"
+              variant="ghost"
+            />
+          );
+        },
+        header: "User Identifier",
+        id: "user_identifier",
+      }),
+      columnHelper.accessor("linkedAccounts", {
+        cell: (cell) => {
+          const identifier = getAuthIdentifier(cell.getValue());
+
+          if (!identifier) {
+            return "N/A";
+          }
+
+          return (
+            <CopyTextButton
+              textToShow={truncateIdentifier(identifier)}
+              textToCopy={identifier}
+              tooltip="Copy Auth Identifier"
+              copyIconPosition="left"
+              variant="ghost"
+            />
+          );
+        },
+        enableColumnFilter: true,
+        header: "Auth Identifier",
+        id: "auth_identifier",
+      }),
+      columnHelper.accessor("wallets", {
+        cell: (cell) => {
+          const address = cell.getValue()[0]?.address;
+          return address ? (
+            <WalletAddress address={address} client={props.client} />
+          ) : null;
+        },
+        header: "Address",
+        id: "address",
+      }),
+      columnHelper.accessor("wallets", {
+        id: "total_balance",
+        header: "Total Balance",
+        cell: (cell) => {
+          const address = cell.getValue()[0]?.address;
+          if (!address) return "N/A";
+          if (!portfolioLoaded) {
+            return <span className="text-muted-foreground text-sm">—</span>;
+          }
+          const data = portfolioMap.get(address);
+          if (!data) {
+            return <span className="text-muted-foreground text-sm">—</span>;
+          }
+          return (
+            <span className="text-sm">
+              {new Intl.NumberFormat("en-US", {
+                style: "currency",
+                currency: "USD",
+              }).format(data.totalUsdValue)}
+            </span>
+          );
+        },
+      }),
+      columnHelper.accessor("wallets", {
+        id: "tokens",
+        header: "Tokens",
+        cell: (cell) => {
+          const address = cell.getValue()[0]?.address;
+          if (!address) return "N/A";
+          if (!portfolioLoaded) {
+            return <span className="text-muted-foreground text-sm">—</span>;
+          }
+          const data = portfolioMap.get(address);
+          if (!data || data.tokens.length === 0) {
+            return <span className="text-muted-foreground text-sm">None</span>;
+          }
+
+          const topTokens = data.tokens
+            .sort((a, b) => (b.usdValue || 0) - (a.usdValue || 0))
+            .slice(0, 3)
+            .map((t) => t.symbol)
+            .join(", ");
+
+          return (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger className="text-sm">
+                  {topTokens}
+                  {data.tokens.length > 3 ? "..." : ""}
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="flex flex-col gap-1">
+                    {data.tokens.map((t) => (
+                      <div
+                        key={`${t.tokenAddress}-${t.chainId}`}
+                        className="flex justify-between gap-4 text-xs"
+                      >
+                        <span>{t.symbol}</span>
+                        <span>
+                          {new Intl.NumberFormat("en-US", {
+                            style: "currency",
+                            currency: "USD",
+                          }).format(t.usdValue || 0)}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          );
+        },
+      }),
+      columnHelper.accessor("linkedAccounts", {
+        cell: (cell) => {
+          const email = getPrimaryEmail(cell.getValue());
+
+          if (!email) {
+            return <span className="text-muted-foreground text-sm">N/A</span>;
+          }
+
+          return (
+            <CopyTextButton
+              textToShow={email}
+              textToCopy={email}
+              tooltip="Copy Email"
+              copyIconPosition="left"
+              variant="ghost"
+            />
+          );
+        },
+        header: "Email",
+        id: "email",
+      }),
+      columnHelper.accessor("wallets", {
+        cell: (cell) => {
+          const value = cell.getValue()[0]?.createdAt;
+
+          if (!value) {
+            return;
+          }
+          return (
+            <ToolTipLabel
+              label={format(new Date(value), "MMM dd, yyyy 'at' h:mm:ss a zzz")}
+              hoverable
+            >
+              <span className="text-sm">
+                {format(new Date(value), "MMM dd, yyyy")}
+              </span>
+            </ToolTipLabel>
+          );
+        },
+        header: "Created",
+        id: "created_at",
+      }),
+      columnHelper.accessor("linkedAccounts", {
+        cell: (cell) => {
+          const value = cell.getValue();
+          const loginMethodsDisplay = value.reduce((acc, curr) => {
+            if (acc.length === 2) {
+              acc.push("...");
+            }
+            if (acc.length < 2) {
+              acc.push(curr.type);
+            }
+            return acc;
+          }, [] as string[]);
+          const loginMethods = value.map((v) => v.type).join(", ");
+          return (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger className="text-sm">
+                  {loginMethodsDisplay.join(", ")}
+                </TooltipTrigger>
+                <TooltipContent>
+                  <span className="text-sm">{loginMethods}</span>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          );
+        },
+        header: "Login Methods",
+        id: "login_methods",
+      }),
+    ];
+  }, [props.client, portfolioMap, portfolioLoaded]);
+
+  const handleSearch = async (searchType: SearchType, query: string) => {
+    setIsSearching(true);
+    try {
+      const results = await searchUsers(
+        props.authToken,
+        props.projectClientId,
+        props.ecosystemSlug,
+        props.teamId,
+        searchType,
+        query,
+      );
+      setSearchResults(results);
+      setHasSearchResults(true);
+    } catch (error) {
+      console.error("Search failed:", error);
+      setSearchResults([]);
+      setHasSearchResults(true);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleClearSearch = () => {
+    setSearchResults([]);
+    setHasSearchResults(false);
+  };
+
+  const downloadCSV = useCallback(async () => {
+    if (wallets.length === 0 || !getAllEmbeddedWallets) {
+      return;
+    }
+    const usersWallets = await getAllEmbeddedWallets({
+      clientId: props.projectClientId,
+      ecosystemSlug: props.ecosystemSlug,
+      teamId: props.teamId,
+    });
+    const csv = Papa.unparse(
+      usersWallets.map((row) => {
+        const email = getPrimaryEmail(row.linkedAccounts);
+
+        return {
+          address: row.wallets[0]?.address || "Uninitialized",
+          created: row.wallets[0]?.createdAt
+            ? new Date(row.wallets[0].createdAt).toISOString()
+            : "Wallet not created yet",
+          email: email || "N/A",
+          login_methods: row.linkedAccounts.map((acc) => acc.type).join(", "),
+          auth_identifier: getAuthIdentifier(row.linkedAccounts) || "N/A",
+          user_identifier: row.id || "N/A",
+        };
+      }),
+    );
+    const csvUrl = URL.createObjectURL(
+      new Blob([csv], { type: "text/csv;charset=utf-8;" }),
+    );
+    const tempLink = document.createElement("a");
+    tempLink.href = csvUrl;
+    tempLink.setAttribute("download", "download.csv");
+    tempLink.click();
+  }, [
+    wallets,
+    props.projectClientId,
+    getAllEmbeddedWallets,
+    props.teamId,
+    props.ecosystemSlug,
+  ]);
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-border bg-card">
+      <div className="flex flex-col lg:flex-row lg:justify-between p-4 lg:px-6 py-5 lg:items-center gap-5">
+        <div>
+          <div className="flex mb-3">
+            <div className="p-2 rounded-full bg-background border border-border">
+              <UserIcon className="size-5 text-muted-foreground" />
+            </div>
+          </div>
+          <h2 className="font-semibold text-2xl tracking-tight">
+            User Wallets
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            View and manage your project's users
+          </p>
+        </div>
+
+        <div className="flex flex-col items-start lg:items-end gap-2.5 border-t lg:border-t-0 pt-5 lg:pt-0 border-dashed">
+          <div className="w-full lg:w-auto lg:min-w-[320px]">
+            <AdvancedSearchInput
+              onSearch={handleSearch}
+              onClear={handleClearSearch}
+              isLoading={isSearching}
+              hasResults={hasSearchResults}
+            />
+          </div>
+          <Button
+            className="gap-2 bg-background rounded-full"
+            disabled={wallets.length === 0 || isLoadingAllWallets}
+            onClick={downloadCSV}
+            variant="outline"
+          >
+            {isLoadingAllWallets && <Spinner className="size-4" />}
+            Download as .csv
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        {hasSearchResults ? (
+          <SearchResults results={searchResults} client={props.client} />
+        ) : (
+          <>
+            {/* Chain Selector and Fetch Button */}
+            <div className="flex items-center gap-3 px-4 lg:px-6 pb-4 border-b border-border">
+              <div className="flex items-center gap-2">
+                <MultiNetworkSelector
+                  client={props.client}
+                  selectedChainIds={selectedChains}
+                  onChange={setSelectedChains}
+                  disableChainId
+                  hideTestnets
+                  popoverContentClassName="max-h-[300px]"
+                />
+                <Button
+                  onClick={() => handleFetchBalances()}
+                  disabled={
+                    isFetchingBalances ||
+                    selectedChains.length === 0 ||
+                    walletsQuery.isPending
+                  }
+                  className="gap-2"
+                >
+                  {isFetchingBalances ? (
+                    <Spinner className="size-4" />
+                  ) : (
+                    <RefreshCwIcon className="size-4" />
+                  )}
+                  {isFetchingBalances
+                    ? `Fetching... ${fetchProgress.total > 0 ? Math.round((fetchProgress.completed / fetchProgress.total) * 100) : 0}%`
+                    : "Fetch All Balances"}
+                </Button>
+              </div>
+
+              {isFetchingBalances && (
+                <div className="flex flex-col gap-1 flex-1 min-w-[150px]">
+                  {fetchProgress.total > 0 && (
+                    <Progress
+                      value={
+                        (fetchProgress.completed / fetchProgress.total) * 100
+                      }
+                      className="h-2"
+                    />
+                  )}
+                  <p className="text-xs text-muted-foreground">
+                    This may take a few minutes
+                  </p>
+                </div>
+              )}
+
+              {portfolioLoaded && !isFetchingBalances && (
+                <Badge variant="success" className="ml-auto">
+                  Balances loaded for {portfolioMap.size} wallets
+                </Badge>
+              )}
+            </div>
+
+            {/* Stats Section */}
+            <div className="grid grid-cols-2 gap-4 px-4 lg:px-6 py-4">
+              <StatCard
+                label="Funded Wallets"
+                value={portfolioLoaded ? aggregatedStats.fundedWallets : 0}
+                icon={WalletIcon}
+                isPending={isFetchingBalances}
+                emptyText={!portfolioLoaded ? "—" : undefined}
+              />
+              <StatCard
+                label="Total Value"
+                value={portfolioLoaded ? aggregatedStats.totalValue : 0}
+                icon={DollarSignIcon}
+                formatter={(value) =>
+                  new Intl.NumberFormat("en-US", {
+                    style: "currency",
+                    currency: "USD",
+                  }).format(value)
+                }
+                isPending={isFetchingBalances}
+                emptyText={!portfolioLoaded ? "—" : undefined}
+              />
+            </div>
+            <TWTable
+              columns={columns}
+              data={wallets}
+              isFetched={walletsQuery.isFetched}
+              isPending={walletsQuery.isPending}
+              tableContainerClassName="rounded-none border-x-0 border-b-0"
+              title="User wallets"
+            />
+
+            <div className="flex justify-center gap-3 border-t bg-card p-6">
+              <Button
+                className="gap-2 bg-background"
+                disabled={activePage === 1 || walletsQuery.isPending}
+                onClick={() => setActivePage((p) => Math.max(1, p - 1))}
+                size="sm"
+                variant="outline"
+              >
+                <ArrowLeftIcon className="size-4" />
+                Previous
+              </Button>
+              <Button
+                className="gap-2 bg-background"
+                disabled={wallets.length === 0 || walletsQuery.isPending}
+                onClick={() => setActivePage((p) => p + 1)}
+                size="sm"
+                variant="outline"
+              >
+                Next
+                <ArrowRightIcon className="size-4" />
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       <DialogOverlay className={dialogOverlayClassName} />
       <DialogPrimitive.Content
         className={cn(
-          "fixed z-50 grid w-full gap-4 rounded-t-xl border border-border bg-background p-6 shadow-lg duration-300 md:max-w-lg md:rounded-lg",
+          "fixed z-50 grid w-full gap-4 rounded-t-xl border border-border bg-background p-6 shadow-lg duration-300 md:max-w-lg md:rounded-xl",
           // on mobile - put the dialog at the bottom of the screen, animate - slide up and fade in
           "right-0 bottom-0 left-0",
           "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",

apps/dashboard/src/@/constants/public-envs.ts

@@ -41,3 +41,15 @@ export const NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID =
 
 export const NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID =
   process.env.NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID;
+
+export const NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID =
+  process.env.NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID;
+
+export const NEXT_PUBLIC_CHECKOUT_IFRAME_CLIENT_ID =
+  process.env.NEXT_PUBLIC_CHECKOUT_IFRAME_CLIENT_ID;
+
+export const NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID =
+  process.env.NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID;
+
+export const NEXT_PUBLIC_BUY_IFRAME_CLIENT_ID =
+  process.env.NEXT_PUBLIC_BUY_IFRAME_CLIENT_ID;

apps/dashboard/src/@/constants/thirdweb.server.ts

@@ -13,6 +13,7 @@ import {
 import {
   THIRDWEB_BRIDGE_URL,
   THIRDWEB_BUNDLER_DOMAIN,
+  THIRDWEB_ENGINE_CLOUD_URL,
   THIRDWEB_INAPP_WALLET_DOMAIN,
   THIRDWEB_INSIGHT_API_DOMAIN,
   THIRDWEB_PAY_DOMAIN,
@@ -38,6 +39,7 @@ export function getConfiguredThirdwebClient(options: {
       rpc: THIRDWEB_RPC_DOMAIN,
       social: THIRDWEB_SOCIAL_API_DOMAIN,
       storage: THIRDWEB_STORAGE_DOMAIN,
+      engineCloud: new URL(THIRDWEB_ENGINE_CLOUD_URL).hostname,
     });
   }
 

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

@@ -25,3 +25,6 @@ export const THIRDWEB_INSIGHT_API_DOMAIN =
 
 export const THIRDWEB_BRIDGE_URL =
   process.env.NEXT_PUBLIC_BRIDGE_URL || "bridge.thirdweb-dev.com";
+
+export const THIRDWEB_ENGINE_CLOUD_URL =
+  process.env.NEXT_PUBLIC_ENGINE_CLOUD_URL || "https://engine.thirdweb-dev.com";

apps/dashboard/src/@/hooks/useApi.ts

@@ -330,20 +330,16 @@ export async function rotateSecretKeyClient(params: { project: Project }) {
     throw new Error(res.error);
   }
 
-  try {
-    // if the project has an encrypted vault admin key, rotate it as well
-    const service = params.project.services.find(
-      (service) => service.name === "engineCloud",
-    );
-    if (service?.encryptedAdminKey) {
-      await rotateVaultAccountAndAccessToken({
-        project: params.project,
-        projectSecretKey: res.data.data.secret,
-        projectSecretHash: res.data.data.secretHash,
-      });
-    }
-  } catch (error) {
-    console.error("Failed to rotate vault admin key", error);
+  // if the project has an encrypted vault admin key, rotate it as well
+  const service = params.project.services.find(
+    (service) => service.name === "engineCloud",
+  );
+  if (service?.encryptedAdminKey) {
+    await rotateVaultAccountAndAccessToken({
+      project: params.project,
+      projectSecretKey: res.data.data.secret,
+      projectSecretHash: res.data.data.secretHash,
+    });
   }
 
   return res.data;

apps/dashboard/src/@/hooks/useEmbeddedWallets.ts

@@ -177,33 +177,63 @@ export function useAllEmbeddedWallets(params: { authToken: string }) {
     }) => {
       const responses: WalletUser[] = [];
       let page = 1;
+      let consecutiveFailures = 0;
+      const maxConsecutiveFailures = 3;
 
-      while (true) {
-        const res = await queryClient.fetchQuery<{
-          users: WalletUser[];
-          hasMore: boolean;
-        }>({
-          queryFn: fetchAccountList({
-            clientId,
-            ecosystemSlug,
-            teamId,
-            jwt: authToken,
-            pageNumber: page,
-          }),
-          queryKey: embeddedWalletsKeys.embeddedWallets(
-            address || "",
-            clientId || ecosystemSlug || "",
-            page,
-          ),
-        });
+      while (consecutiveFailures < maxConsecutiveFailures) {
+        try {
+          const res = await queryClient.fetchQuery<{
+            users: WalletUser[];
+            hasMore: boolean;
+          }>({
+            queryFn: fetchAccountList({
+              clientId,
+              ecosystemSlug,
+              teamId,
+              jwt: authToken,
+              pageNumber: page,
+            }),
+            queryKey: embeddedWalletsKeys.embeddedWallets(
+              address || "",
+              clientId || ecosystemSlug || "",
+              page,
+            ),
+            retry: 3,
+            retryDelay: (attemptIndex) =>
+              Math.min(1000 * 2 ** attemptIndex, 10000),
+          });
 
-        responses.push(...res.users);
+          responses.push(...res.users);
+          consecutiveFailures = 0; // Reset on success
 
-        if (!res.hasMore) {
-          break;
+          if (!res.hasMore) {
+            break;
+          }
+
+          page++;
+        } catch (error) {
+          consecutiveFailures++;
+          console.warn(
+            `Failed to fetch page ${page}, attempt ${consecutiveFailures}/${maxConsecutiveFailures}:`,
+            error,
+          );
+
+          if (consecutiveFailures >= maxConsecutiveFailures) {
+            // If we have some data, return it instead of throwing
+            if (responses.length > 0) {
+              console.warn(
+                `Returning partial results (${responses.length} users) after ${maxConsecutiveFailures} consecutive failures`,
+              );
+              break;
+            }
+            throw error;
+          }
+
+          // Wait before retrying the same page
+          await new Promise((resolve) =>
+            setTimeout(resolve, 1000 * consecutiveFailures),
+          );
         }
-
-        page++;
       }
 
       return responses;

apps/dashboard/src/@/hooks/useWalletPortfolio.ts

@@ -0,0 +1,231 @@
+import { useMutation } from "@tanstack/react-query";
+import type { GetBalanceResult } from "thirdweb/extensions/erc20";
+import { THIRDWEB_API_HOST } from "@/constants/urls";
+
+type WalletPortfolioToken = GetBalanceResult & {
+  usdValue?: number;
+  priceUsd?: number;
+};
+
+export type WalletPortfolioData = {
+  totalUsdValue: number;
+  tokens: WalletPortfolioToken[];
+};
+
+// Retry helper with exponential backoff - returns null on failure instead of throwing
+async function fetchWithRetry(
+  url: string,
+  options: RequestInit,
+  maxRetries = 3,
+): Promise<Response | null> {
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      const response = await fetch(url, options);
+
+      // Retry on rate limit (429) or server errors (5xx)
+      if (response.status === 429 || response.status >= 500) {
+        const delay = Math.min(1000 * 2 ** attempt, 10000); // Max 10s delay
+        await new Promise((resolve) => setTimeout(resolve, delay));
+        continue;
+      }
+
+      return response;
+    } catch (_e) {
+      // Network error - retry with backoff
+      const delay = Math.min(1000 * 2 ** attempt, 10000);
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+  }
+
+  // All retries failed - return null instead of throwing
+  return null;
+}
+
+// Fetch tokens for a single address on a single chain
+async function fetchTokensForChain(
+  address: string,
+  chainId: number,
+  authToken: string,
+  teamId: string,
+  clientId?: string,
+  ecosystemSlug?: string,
+): Promise<WalletPortfolioToken[]> {
+  try {
+    const url = new URL(`${THIRDWEB_API_HOST}/v1/wallets/${address}/tokens`);
+    url.searchParams.set("chainId", chainId.toString());
+    url.searchParams.set("limit", "50");
+    url.searchParams.set("metadata", "true");
+    url.searchParams.set("includeSpam", "false");
+    url.searchParams.set("includeNative", "true");
+    url.searchParams.set("sortBy", "usd_value");
+    url.searchParams.set("sortOrder", "desc");
+
+    const response = await fetchWithRetry(url.toString(), {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+        "x-thirdweb-team-id": teamId,
+        ...(clientId && { "x-client-id": clientId }),
+        ...(ecosystemSlug && {
+          "x-ecosystem-id": `ecosystem.${ecosystemSlug}`,
+        }),
+      },
+    });
+
+    // If all retries failed or response not ok, return empty (balance = 0)
+    if (!response || !response.ok) {
+      return [];
+    }
+
+    const data = await response.json();
+    const rawTokens = data.result?.tokens || [];
+
+    return rawTokens.map(
+      (t: {
+        balance: string;
+        decimals: number;
+        name: string;
+        symbol: string;
+        token_address: string;
+        chain_id: number;
+        price_data?: { usd_value?: number; price_usd?: number };
+      }): WalletPortfolioToken => ({
+        value: BigInt(t.balance),
+        decimals: t.decimals,
+        displayValue: (Number(t.balance) / 10 ** t.decimals).toString(),
+        name: t.name,
+        symbol: t.symbol,
+        tokenAddress: t.token_address,
+        chainId: t.chain_id,
+        usdValue: t.price_data?.usd_value,
+        priceUsd: t.price_data?.price_usd,
+      }),
+    );
+  } catch (e) {
+    // Silent fail for individual chain - continue with others
+    console.warn(
+      `Failed to fetch tokens for ${address} on chain ${chainId}:`,
+      e,
+    );
+    return [];
+  }
+}
+
+// Fetch tokens for a single address on selected chains
+async function fetchWalletPortfolio(
+  address: string,
+  chainIds: number[],
+  authToken: string,
+  teamId: string,
+  clientId?: string,
+  ecosystemSlug?: string,
+): Promise<WalletPortfolioData> {
+  // Fetch all chains concurrently for this address
+  const results = await Promise.all(
+    chainIds.map((chainId) =>
+      fetchTokensForChain(
+        address,
+        chainId,
+        authToken,
+        teamId,
+        clientId,
+        ecosystemSlug,
+      ),
+    ),
+  );
+
+  const allTokens = results.flat();
+  const totalUsdValue = allTokens.reduce(
+    (acc, token) => acc + (token.usdValue || 0),
+    0,
+  );
+
+  return {
+    totalUsdValue,
+    tokens: allTokens,
+  };
+}
+
+// Batch fetch portfolios for all addresses with progress callback
+async function fetchAllPortfolios(
+  addresses: string[],
+  chainIds: number[],
+  authToken: string,
+  teamId: string,
+  clientId?: string,
+  ecosystemSlug?: string,
+  onProgress?: (completed: number, total: number) => void,
+): Promise<Map<string, WalletPortfolioData>> {
+  const results = new Map<string, WalletPortfolioData>();
+  const concurrency = 50; // Process up to 50 addresses concurrently
+  let completed = 0;
+  let index = 0;
+
+  // Worker function that processes one address at a time
+  async function worker() {
+    while (index < addresses.length) {
+      const currentIndex = index++;
+      const address = addresses[currentIndex];
+      if (!address) continue;
+
+      try {
+        const data = await fetchWalletPortfolio(
+          address,
+          chainIds,
+          authToken,
+          teamId,
+          clientId,
+          ecosystemSlug,
+        );
+        results.set(address, data);
+      } catch (e) {
+        // Silent fail - continue with others
+        console.warn(`Failed to fetch portfolio for ${address}:`, e);
+      }
+
+      completed++;
+      onProgress?.(completed, addresses.length);
+    }
+  }
+
+  // Start concurrent workers
+  const workers = Array.from(
+    { length: Math.min(concurrency, addresses.length) },
+    () => worker(),
+  );
+  await Promise.all(workers);
+
+  return results;
+}
+
+export function useFetchAllPortfolios() {
+  return useMutation({
+    mutationFn: async ({
+      addresses,
+      chainIds,
+      authToken,
+      teamId,
+      clientId,
+      ecosystemSlug,
+      onProgress,
+    }: {
+      addresses: string[];
+      chainIds: number[];
+      authToken: string;
+      teamId: string;
+      clientId?: string;
+      ecosystemSlug?: string;
+      onProgress?: (completed: number, total: number) => void;
+    }) => {
+      return fetchAllPortfolios(
+        addresses,
+        chainIds,
+        authToken,
+        teamId,
+        clientId,
+        ecosystemSlug,
+        onProgress,
+      );
+    },
+  });
+}

apps/dashboard/src/@/storybook/stubs.ts

@@ -30,6 +30,7 @@ export function teamStub(id: string, billingPlan: Team["billingPlan"]): Team {
     billingPlan: billingPlan,
     billingStatus: "validPayment",
     canCreatePublicChains: null,
+    isLegacyPlan: false,
     capabilities: {
       bundler: {
         enabled: true,

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

@@ -7,6 +7,10 @@ export interface WalletStats {
   walletType: string;
 }
 
+export type WalletStatsWithName = WalletStats & {
+  walletName: string;
+};
+
 export interface InAppWalletStats {
   date: string;
   authenticationMethod: string;
@@ -35,13 +39,6 @@ export interface TransactionStats {
   count: number;
 }
 
-export interface EngineCloudStats {
-  date: string;
-  chainId: string;
-  pathname: string;
-  totalRequests: number;
-}
-
 export interface UniversalBridgeStats {
   date: string;
   chainId: number;
@@ -104,36 +101,20 @@ export interface X402SettlementsOverall {
   totalValueUSD: number;
 }
 
-export interface X402SettlementsByChainId {
-  date: string;
+export interface X402SettlementsByChainId extends X402SettlementsOverall {
   chainId: string;
-  totalRequests: number;
-  totalValue: number;
-  totalValueUSD: number;
 }
 
-export interface X402SettlementsByPayer {
-  date: string;
+export interface X402SettlementsByPayer extends X402SettlementsOverall {
   payer: string;
-  totalRequests: number;
-  totalValue: number;
-  totalValueUSD: number;
 }
 
-interface X402SettlementsByReceiver {
-  date: string;
+interface X402SettlementsByReceiver extends X402SettlementsOverall {
   receiver: string;
-  totalRequests: number;
-  totalValue: number;
-  totalValueUSD: number;
 }
 
-export interface X402SettlementsByResource {
-  date: string;
+export interface X402SettlementsByResource extends X402SettlementsOverall {
   resource: string;
-  totalRequests: number;
-  totalValue: number;
-  totalValueUSD: number;
 }
 
 interface X402SettlementsByAsset {

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

@@ -13,9 +13,16 @@ export type ProductSKU =
   | "usage:in_app_wallet"
   | "usage:aa_sponsorship"
   | "usage:aa_sponsorship_op_grant"
+  // dedicated relayer SKUs
+  | DedicatedRelayerSKU
   | null;
 
 export type ChainInfraSKU =
   | "chain:infra:rpc"
   | "chain:infra:insight"
   | "chain:infra:account_abstraction";
+
+export type DedicatedRelayerSKU =
+  | "product:dedicated_relayer_standard"
+  | "product:dedicated_relayer_premium"
+  | "product:dedicated_relayer_enterprise";

apps/dashboard/src/@/utils/format-utils.ts

@@ -1,5 +1,6 @@
 const compactNumberFormatter = new Intl.NumberFormat("en-US", {
   notation: "compact",
+  maximumFractionDigits: 2,
 });
 
 export const formatTickerNumber = (value: number) => {

apps/dashboard/src/@/utils/number.ts

@@ -1,10 +1,10 @@
 const usdCurrencyFormatter = new Intl.NumberFormat("en-US", {
   currency: "USD",
-  maximumFractionDigits: 6, // prefix with $
-  minimumFractionDigits: 0, // don't show decimal places if value is a whole number
-  notation: "compact", // at max 2 decimal places
-  roundingMode: "halfEven", // round to nearest even number, standard practice for financial calculations
-  style: "currency", // shows 1.2M instead of 1,200,000, 1.2B instead of 1,200,000,000
+  maximumFractionDigits: 2,
+  minimumFractionDigits: 0,
+  notation: "compact",
+  roundingMode: "halfEven",
+  style: "currency",
 });
 
 export const toUSD = (value: number) => {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/AccountsPage.tsx

@@ -22,7 +22,7 @@ export function AccountsPage(props: {
             View list of smart accounts that have been created for this
             contract.{" "}
             <UnderlineLink
-              href="https://portal.thirdweb.com/transactions/sponsor"
+              href="https://portal.thirdweb.com/wallets/sponsor-gas"
               target="_blank"
               rel="noopener noreferrer"
             >

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx

@@ -283,7 +283,7 @@ function TokenInfoSection(props: {
         <dt className="text-xs font-medium text-muted-foreground tracking-wider uppercase">
           {props.label}
         </dt>
-        <dd className="text-3xl font-bold text-foreground tracking-tight">
+        <dd className="text-3xl font-semibold text-foreground tracking-tight">
           {props.value}
         </dd>
       </dl>

apps/dashboard/src/app/(app)/(dashboard)/contracts/publish/[publish_uri]/contract-publish-form/decoded-bytes-input/decoded-input-set.tsx

@@ -72,7 +72,6 @@ export const DecodedInputSet: React.FC<DecodedInputSetProps> = ({
       <div className="mt-6 flex justify-start">
         <Button
           className="gap-2"
-          disabled={param.type === "bytes" && fields.length >= 1}
           onClick={() =>
             append({
               defaultValue: "",

apps/dashboard/src/app/(app)/(dashboard)/tokens/page.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from "next";
 import { unstable_cache } from "next/cache";
 import { Bridge } from "thirdweb";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { bridgeStats } from "../../../bridge/data";
+import { bridgeStats } from "../../../bridge/(general)/data";
 import { PageHeader } from "./components/header";
 import { TokenPage } from "./components/token-page";
 

apps/dashboard/src/app/(app)/(stripe)/checkout/[team_slug]/[sku]/page.tsx

@@ -17,15 +17,21 @@ export default async function CheckoutPage(props: {
   searchParams: Promise<{
     amount?: string;
     invoice_id?: string;
+    project_id?: string;
+    chain_id?: string | string[];
   }>;
 }) {
-  const params = await props.params;
+  const [params, searchParams] = await Promise.all([
+    props.params,
+    props.searchParams,
+  ]);
+
+  console.log("params", params);
+  console.log("searchParams", searchParams);
 
   switch (params.sku) {
     case "topup": {
-      const amountUSD = Number.parseInt(
-        (await props.searchParams).amount || "10",
-      );
+      const amountUSD = Number.parseInt(searchParams.amount || "10");
       if (Number.isNaN(amountUSD)) {
         return <StripeRedirectErrorPage errorMessage="Invalid amount" />;
       }
@@ -43,7 +49,7 @@ export default async function CheckoutPage(props: {
       break;
     }
     case "invoice": {
-      const invoiceId = (await props.searchParams).invoice_id;
+      const invoiceId = searchParams.invoice_id;
       if (!invoiceId) {
         return <StripeRedirectErrorPage errorMessage="Invalid invoice ID" />;
       }
@@ -59,10 +65,12 @@ export default async function CheckoutPage(props: {
       redirect(invoice);
       break;
     }
+
     default: {
       const response = await getBillingCheckoutUrl({
         sku: decodeURIComponent(params.sku) as Exclude<ProductSKU, null>,
         teamSlug: params.team_slug,
+        params: searchParams,
       });
 
       if (response.status === "error") {

apps/dashboard/src/app/(app)/(stripe)/utils/billing.ts

@@ -7,6 +7,10 @@ import { getAbsoluteUrl } from "@/utils/vercel";
 export async function getBillingCheckoutUrl(options: {
   teamSlug: string;
   sku: Exclude<ProductSKU, null>;
+  params: {
+    project_id?: string;
+    chain_id?: string | string[];
+  };
 }) {
   const token = await getAuthToken();
 
@@ -17,13 +21,26 @@ export async function getBillingCheckoutUrl(options: {
     } as const;
   }
 
+  const chainIds = options.params.chain_id
+    ? (Array.isArray(options.params.chain_id)
+        ? options.params.chain_id
+        : [options.params.chain_id]
+      )
+        .map((value) => Number(value))
+        .filter((value) => Number.isFinite(value))
+    : undefined;
+
+  const body = {
+    redirectTo: getAbsoluteStripeRedirectUrl(),
+    sku: options.sku,
+    projectId: options.params.project_id,
+    chainIds: chainIds,
+  };
+
   const res = await fetch(
     `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${options.teamSlug}/checkout/create-link`,
     {
-      body: JSON.stringify({
-        redirectTo: getAbsoluteStripeRedirectUrl(),
-        sku: options.sku,
-      }),
+      body: JSON.stringify(body),
       headers: {
         Authorization: `Bearer ${token}`,
         "Content-Type": "application/json",
@@ -58,6 +75,18 @@ export async function getBillingCheckoutUrl(options: {
   }
 
   const json = await res.json();
+
+  if (
+    "error" in json &&
+    "message" in json.error &&
+    typeof json.error.message === "string"
+  ) {
+    return {
+      error: json.error.message,
+      status: "error",
+    } as const;
+  }
+
   if (!json.result) {
     return {
       error: "An unknown error occurred, please try again later.",

apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx

@@ -18,7 +18,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { getValidTeamPlan } from "@/utils/getValidTeamPlan";
 import { SearchInput } from "../components/SearchInput";
 
 export function AccountTeamsUI(props: {
@@ -117,8 +116,6 @@ function TeamRow(props: {
   role: TeamAccountRole;
   client: ThirdwebClient;
 }) {
-  const plan = getValidTeamPlan(props.team);
-
   return (
     <div className="flex items-center justify-between gap-2">
       {/* start */}
@@ -133,7 +130,11 @@ function TeamRow(props: {
         <div>
           <div className="flex items-center gap-3">
             <p className="font-semibold text-sm">{props.team.name}</p>
-            <TeamPlanBadge plan={plan} teamSlug={props.team.slug} />
+            <TeamPlanBadge
+              plan={props.team.billingPlan}
+              teamSlug={props.team.slug}
+              isLegacyPlan={props.team.isLegacyPlan}
+            />
           </div>
           <p className="text-muted-foreground text-sm capitalize">
             {props.role.toLowerCase()}

apps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsx

@@ -312,7 +312,7 @@ function CreateProjectForm(props: {
             type="submit"
           >
             {createProject.isPending && <Spinner className="size-4" />}
-            Create Projecct
+            Create Project
           </Button>
         </footer>
       </form>

apps/dashboard/src/app/(app)/providers.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { usePathname } from "next/navigation";
 import { ThemeProvider } from "next-themes";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { useEffect, useMemo } from "react";
@@ -25,9 +24,6 @@ export function AppRouterProviders(props: {
   children: React.ReactNode;
   autoConnect: boolean;
 }) {
-  // get the current pathname
-  const pathname = usePathname();
-
   return (
     <NuqsAdapter>
       <QueryClientProvider client={queryClient}>
@@ -40,9 +36,6 @@ export function AppRouterProviders(props: {
             defaultTheme="dark"
             disableTransitionOnChange
             enableSystem={false}
-            forcedTheme={
-              pathname.startsWith("/get-started") ? "dark" : undefined
-            }
           >
             <Toaster richColors />
             <SanctionedAddressesChecker>

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/page.tsx

@@ -6,13 +6,12 @@ import {
 } from "responsive-rsc";
 import { defineChain } from "thirdweb";
 import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
-import { getWalletInfo, type WalletId } from "thirdweb/wallets";
 import {
   getClientTransactions,
+  getEOAWalletConnections,
   getInAppWalletUsage,
   getUniversalBridgeUsage,
   getUserOpUsage,
-  getWalletConnections,
 } from "@/api/analytics";
 import { getAuthToken } from "@/api/auth-token";
 import { getTeamBySlug } from "@/api/team/get-team";
@@ -26,7 +25,7 @@ import { getFiltersFromSearchParams } from "@/lib/time";
 import type {
   InAppWalletStats,
   UserOpStats,
-  WalletStats,
+  WalletStatsWithName,
 } from "@/types/analytics";
 import { loginRedirect } from "@/utils/redirects";
 import { PieChartCard } from "../../../../components/Analytics/PieChartCard";
@@ -240,7 +239,7 @@ async function AsyncWalletDistributionCard(props: {
   range: Range;
   authToken: string;
 }) {
-  const walletConnections = await getWalletConnections(
+  const walletConnections = await getEOAWalletConnections(
     {
       from: props.range.from,
       period: "all",
@@ -373,29 +372,19 @@ async function AsyncTotalSponsoredCard(props: {
   ) : (
     <EmptyStateCard
       link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
-      metric="Account Abstraction"
+      metric="Gas Sponsorship"
     />
   );
 }
 
-async function WalletDistributionCard({ data }: { data: WalletStats[] }) {
-  const formattedData = await Promise.all(
-    data.map(async (w) => {
-      const wallet = await getWalletInfo(w.walletType as WalletId).catch(
-        () => ({ name: w.walletType }),
-      );
-      return {
-        totalConnections: w.totalConnections,
-        uniqueWalletsConnected: w.uniqueWalletsConnected,
-        walletName: wallet.name,
-        walletType: w.walletType,
-      };
-    }),
-  );
-
+async function WalletDistributionCard({
+  data,
+}: {
+  data: WalletStatsWithName[];
+}) {
   return (
     <PieChartCard
-      data={formattedData.map(({ walletName, uniqueWalletsConnected }) => {
+      data={data.map(({ walletName, uniqueWalletsConnected }) => {
         return {
           label: walletName,
           value: uniqueWalletsConnected,

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/PlanInfoCard.tsx

@@ -73,21 +73,24 @@ export function PlanInfoCardUI(props: {
               <h3 className="font-semibold text-2xl capitalize tracking-tight">
                 {validPlan === "growth_legacy" ? "Growth" : validPlan} Plan
               </h3>
-              {validPlan.includes("legacy") && (
+              {props.team.isLegacyPlan && (
                 <Badge variant="warning">Legacy</Badge>
               )}
               {trialEndsInFuture && <Badge variant="default">Trial</Badge>}
             </div>
 
-            {validPlan.includes("legacy") && (
+            {props.team.isLegacyPlan && (
               <p className="text-sm text-yellow-600">
-                You are on the legacy plan. You may save by upgrading to new
-                plan.{" "}
+                Legacy plans will be upgraded to new plans automatically on
+                January 1st, 2026.
+                <br />
                 <UnderlineLink
                   className="decoration-yellow-600/50"
-                  href="/pricing"
+                  href="https://blog.thirdweb.com/retiring-legacy-pricing-plans-on-january-1st-2026"
+                  rel="noopener noreferrer"
+                  target="_blank"
                 >
-                  Learn More
+                  Learn more about changes to legacy plans
                 </UnderlineLink>
               </p>
             )}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/add-partner-form.client.tsx

@@ -3,6 +3,7 @@ import { useParams } from "next/navigation";
 import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import type { Ecosystem, Partner } from "@/api/team/ecosystems";
+import { useDashboardStorageUpload } from "@/hooks/useDashboardStorageUpload";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useAddPartner } from "../../hooks/use-add-partner";
 import { PartnerForm, type PartnerFormValues } from "./partner-form.client";
@@ -23,6 +24,8 @@ export function AddPartnerForm({
   const teamSlug = params.team_slug as string;
   const ecosystemSlug = params.slug as string;
 
+  const storageUpload = useDashboardStorageUpload({ client });
+
   const { mutateAsync: addPartner, isPending } = useAddPartner(
     {
       authToken,
@@ -48,10 +51,23 @@ export function AddPartnerForm({
     },
   );
 
-  const handleSubmit = (
+  const isUploading = storageUpload.isPending;
+
+  const handleSubmit = async (
     values: PartnerFormValues,
     finalAccessControl: Partner["accessControl"] | null,
   ) => {
+    let imageUrl: string | undefined;
+    if (values.logo) {
+      try {
+        const [uri] = await storageUpload.mutateAsync([values.logo]);
+        imageUrl = uri;
+      } catch {
+        toast.error("Failed to upload logo");
+        return;
+      }
+    }
+
     addPartner({
       accessControl: finalAccessControl,
       allowlistedBundleIds: values.bundleIds
@@ -61,6 +77,7 @@ export function AddPartnerForm({
         .split(/,| /)
         .filter((d) => d.length > 0),
       ecosystem,
+      imageUrl,
       name: values.name,
     });
   };
@@ -68,7 +85,7 @@ export function AddPartnerForm({
   return (
     <PartnerForm
       client={client}
-      isSubmitting={isPending}
+      isSubmitting={isPending || isUploading}
       onSubmit={handleSubmit}
       submitLabel="Add"
     />

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PlusIcon, Trash2Icon } from "lucide-react";
-import { useId } from "react";
+import { PencilIcon, PlusIcon, Trash2Icon, XIcon } from "lucide-react";
+import { useId, useRef } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
 import type { z } from "zod";
 import type { Partner } from "@/api/team/ecosystems";
+import { Img } from "@/components/blocks/Img";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -17,11 +18,13 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { ImageUpload } from "@/components/ui/image-upload";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Spinner } from "@/components/ui/Spinner";
 import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
+import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
 import { partnerFormSchema } from "../../constants";
 import { AllowedOperationsSection } from "./allowed-operations-section";
 
@@ -118,6 +121,7 @@ export function PartnerForm({
 
   const accessControlId = useId();
   const serverVerifierId = useId();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   return (
     <Form {...form}>
@@ -150,6 +154,101 @@ export function PartnerForm({
               </FormItem>
             )}
           />
+          <FormField
+            control={form.control}
+            name="logo"
+            render={() => {
+              const removeLogo = form.watch("removeLogo");
+              const logoFile = form.watch("logo");
+              const newFilePreview = logoFile
+                ? URL.createObjectURL(logoFile)
+                : undefined;
+              const existingImageUrl =
+                partner?.imageUrl && !removeLogo
+                  ? resolveSchemeWithErrorHandler({
+                      client,
+                      uri: partner.imageUrl,
+                    })
+                  : undefined;
+              const displayUrl = newFilePreview || existingImageUrl;
+
+              return (
+                <FormItem>
+                  <FormLabel>Partner Logo</FormLabel>
+                  <FormControl>
+                    <div>
+                      <input
+                        ref={fileInputRef}
+                        accept="image/png,image/jpeg,image/webp"
+                        className="hidden"
+                        onChange={(e) => {
+                          const file = e.target.files?.[0];
+                          if (file) {
+                            form.setValue("logo", file, {
+                              shouldValidate: true,
+                            });
+                            form.setValue("removeLogo", false);
+                          }
+                          e.target.value = "";
+                        }}
+                        type="file"
+                      />
+                      {displayUrl ? (
+                        <div className="relative inline-block">
+                          <Img
+                            alt={partner?.name ?? "Partner logo"}
+                            className="size-20 rounded-md border object-contain object-center"
+                            src={displayUrl}
+                          />
+                          <Button
+                            aria-label="Remove logo"
+                            className="absolute -top-2 -right-2 size-6 rounded-full bg-background p-0 hover:bg-accent"
+                            onClick={() => {
+                              form.setValue("logo", undefined);
+                              form.setValue("removeLogo", true);
+                            }}
+                            size="icon"
+                            type="button"
+                            variant="ghost"
+                          >
+                            <XIcon className="size-3" />
+                          </Button>
+                          <Button
+                            aria-label="Change logo"
+                            className="absolute -bottom-2 -right-2 size-6 rounded-full bg-background p-0 hover:bg-accent"
+                            onClick={() => fileInputRef.current?.click()}
+                            size="icon"
+                            type="button"
+                            variant="ghost"
+                          >
+                            <PencilIcon className="size-3" />
+                          </Button>
+                        </div>
+                      ) : (
+                        <ImageUpload
+                          accept="image/png, image/jpeg, image/webp"
+                          className="bg-background"
+                          onUpload={(files) => {
+                            if (files[0]) {
+                              form.setValue("logo", files[0], {
+                                shouldValidate: true,
+                              });
+                              form.setValue("removeLogo", false);
+                            }
+                          }}
+                        />
+                      )}
+                    </div>
+                  </FormControl>
+                  <FormDescription>
+                    Optional logo for this partner. Used in OTP emails sent to
+                    users authenticating through this partner.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
           <FormField
             control={form.control}
             defaultValue=""

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/update-partner-form.client.tsx

@@ -3,6 +3,7 @@ import { useParams } from "next/navigation";
 import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import type { Ecosystem, Partner } from "@/api/team/ecosystems";
+import { useDashboardStorageUpload } from "@/hooks/useDashboardStorageUpload";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useUpdatePartner } from "../../hooks/use-update-partner";
 import { PartnerForm, type PartnerFormValues } from "./partner-form.client";
@@ -25,6 +26,8 @@ export function UpdatePartnerForm({
   const teamSlug = params.team_slug as string;
   const ecosystemSlug = params.slug as string;
 
+  const storageUpload = useDashboardStorageUpload({ client });
+
   const { mutateAsync: updatePartner, isPending } = useUpdatePartner(
     {
       authToken,
@@ -50,10 +53,31 @@ export function UpdatePartnerForm({
     },
   );
 
-  const handleSubmit = (
+  const isUploading = storageUpload.isPending;
+
+  const handleSubmit = async (
     values: PartnerFormValues,
     finalAccessControl: Partner["accessControl"] | null,
   ) => {
+    // Determine imageUrl based on three states:
+    // 1. New file uploaded → upload and use new URI
+    // 2. Explicit removal → send null to clear
+    // 3. No change → preserve existing partner imageUrl
+    let imageUrl: string | null | undefined;
+    if (values.logo) {
+      try {
+        const [uri] = await storageUpload.mutateAsync([values.logo]);
+        imageUrl = uri;
+      } catch {
+        toast.error("Failed to upload logo");
+        return;
+      }
+    } else if (values.removeLogo) {
+      imageUrl = null;
+    } else {
+      imageUrl = partner.imageUrl;
+    }
+
     updatePartner({
       accessControl: finalAccessControl,
       allowlistedBundleIds: values.bundleIds
@@ -63,6 +87,7 @@ export function UpdatePartnerForm({
         .split(/,| /)
         .filter((d) => d.length > 0),
       ecosystem,
+      imageUrl,
       name: values.name,
       partnerId: partner.id,
     });
@@ -71,7 +96,7 @@ export function UpdatePartnerForm({
   return (
     <PartnerForm
       client={client}
-      isSubmitting={isPending}
+      isSubmitting={isPending || isUploading}
       onSubmit={handleSubmit}
       partner={partner}
       submitLabel="Update"

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/constants.ts

@@ -154,6 +154,21 @@ const allowedOperationsSchema = z.discriminatedUnion("signMethod", [
 
 export const partnerFormSchema = z
   .object({
+    logo: z
+      .instanceof(File, {
+        message: "Please select an image file",
+      })
+      .refine(
+        (file) => ["image/png", "image/jpeg", "image/webp"].includes(file.type),
+        {
+          message: "Only PNG, JPG or WEBP images are allowed",
+        },
+      )
+      .refine((file) => file.size <= 500 * 1024, {
+        message: "Logo size must be less than 500KB",
+      })
+      .optional(),
+    removeLogo: z.boolean().default(false),
     accessControl: z
       .object({
         allowedOperations: z

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/hooks/use-add-partner.ts

@@ -8,6 +8,7 @@ import type { Ecosystem, Partner } from "@/api/team/ecosystems";
 type AddPartnerParams = {
   ecosystem: Ecosystem;
   name: string;
+  imageUrl?: string;
   allowlistedDomains: string[];
   allowlistedBundleIds: string[];
   accessControl?: Partner["accessControl"] | null;
@@ -37,6 +38,7 @@ export function useAddPartner(
             accessControl: params.accessControl ?? undefined,
             allowlistedBundleIds: params.allowlistedBundleIds,
             allowlistedDomains: params.allowlistedDomains,
+            imageUrl: params.imageUrl,
             name: params.name,
             // TODO - remove the requirement for permissions in API endpoint
             permissions: ["FULL_CONTROL_V1"],

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/hooks/use-update-partner.ts

@@ -9,6 +9,7 @@ type UpdatePartnerParams = {
   partnerId: string;
   ecosystem: Ecosystem;
   name: string;
+  imageUrl?: string | null;
   allowlistedDomains: string[];
   allowlistedBundleIds: string[];
   accessControl?: {
@@ -43,6 +44,7 @@ export function useUpdatePartner(
             accessControl: params.accessControl,
             allowlistedBundleIds: params.allowlistedBundleIds,
             allowlistedDomains: params.allowlistedDomains,
+            imageUrl: params.imageUrl,
             name: params.name,
           }),
 

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/users/page.tsx

@@ -2,7 +2,7 @@ import { redirect } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { fetchEcosystem } from "@/api/team/ecosystems";
 import { getTeamBySlug } from "@/api/team/get-team";
-import { InAppWalletUsersPageContent } from "@/components/in-app-wallet-users-content/in-app-wallet-users-content";
+import { UserWalletsTable } from "@/components/in-app-wallet-users-content/user-wallets-table";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { loginRedirect } from "@/utils/redirects";
 
@@ -30,7 +30,7 @@ export default async function EcosystemUsersPage(props: {
   });
 
   return (
-    <InAppWalletUsersPageContent
+    <UserWalletsTable
       authToken={authToken}
       client={client}
       ecosystemSlug={ecosystem.slug}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsx

@@ -63,15 +63,17 @@ function MetricPlaceholders({
             {metric.label}
           </span>
           <div className="h-32 w-full">
-            <EmptyChartState type="area">
-              {status === "active" ? (
-                <Badge>Coming Soon</Badge>
-              ) : status === "pending" ? (
-                <p className="text-xs">Activation in progress.</p>
-              ) : (
-                <p className="text-xs">Activate service to view metrics.</p>
-              )}
-            </EmptyChartState>
+            <EmptyChartState
+              content={
+                status === "active" ? (
+                  <Badge>Coming Soon</Badge>
+                ) : status === "pending" ? (
+                  <p className="text-xs">Activation in progress.</p>
+                ) : (
+                  <p className="text-xs">Activate service to view metrics.</p>
+                )
+              }
+            />
           </div>
         </Card>
       ))}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/page.tsx

@@ -28,6 +28,7 @@ export default async function Page(props: {
       <div className="flex flex-col grow justify-center items-center">
         <UpsellContent
           currentPlan={team.billingPlan}
+          isLegacyPlan={team.isLegacyPlan}
           featureDescription="Create support cases for your projects"
           featureName="Support Center"
           requiredPlan="starter"

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/layout.tsx

@@ -13,7 +13,7 @@ export default async function Layout(props: {
 
   return (
     <div className="flex grow flex-col">
-      <div className="border-border pt-10 pb-4">
+      <div className="border-border pt-10 pb-6">
         <div className="container max-w-7xl flex flex-col gap-4 lg:flex-row lg:justify-between">
           <h1 className="font-semibold text-3xl tracking-tight">Usage</h1>
           <div className="items-center gap-3 hidden lg:flex">
@@ -47,7 +47,7 @@ export default async function Layout(props: {
             path: `${usagePath}/storage`,
           },
           {
-            name: "Account Abstraction",
+            name: "Gas Sponsorship",
             path: `${usagePath}/account-abstraction`,
           },
         ]}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx

@@ -43,7 +43,8 @@ export default async function Page(props: {
       <div className="grow flex flex-col justify-center items-center">
         <UpsellContent
           currentPlan={team.billingPlan}
-          featureDescription="View RPC, Wallet, Storage, Account Abstraction, Engine Cloud, Webhooks usage and more"
+          isLegacyPlan={team.isLegacyPlan}
+          featureDescription="View RPC, Wallet, Storage, Gas Sponsorship, Engine Cloud, Webhooks usage and more"
           featureName="Usage"
           requiredPlan="starter"
           teamSlug={params.team_slug}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/components/count-graph.tsx

@@ -57,7 +57,7 @@ export function CountGraph(props: {
         return format(label, "MMM dd, HH:mm");
       }}
       xAxis={{
-        sameDay: true,
+        showHour: true,
       }}
       yAxis
     />

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/components/rate-graph.tsx

@@ -57,7 +57,7 @@ export function RateGraph(props: {
         return format(label, "MMM dd, HH:mm");
       }}
       xAxis={{
-        sameDay: true,
+        showHour: true,
       }}
       yAxis
     />

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/page.tsx

@@ -33,7 +33,6 @@ export default async function RPCUsage(props: {
     redirect("/team");
   }
 
-  const currentPlan = team.billingPlan;
   const currentRateLimit = team.capabilities.rpc.rateLimit;
 
   const apiData = await getLast24HoursRPCUsage({
@@ -102,7 +101,11 @@ export default async function RPCUsage(props: {
                 <div className="font-bold text-2xl capitalize">
                   {currentRateLimit.toLocaleString()} RPS
                 </div>
-                <TeamPlanBadge plan={currentPlan} teamSlug={team.slug} />
+                <TeamPlanBadge
+                  plan={team.billingPlan}
+                  teamSlug={team.slug}
+                  isLegacyPlan={team.isLegacyPlan}
+                />
               </div>
             </CardContent>
           </Card>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/ai-card.tsx

@@ -0,0 +1,84 @@
+import { ResponsiveSuspense } from "responsive-rsc";
+import { getAiUsage } from "@/api/analytics";
+import { EmptyChartStateGetStartedCTA } from "@/components/analytics/empty-chart-state";
+import { AiTokenUsageChartCardUI } from "../ai/analytics/chart/AiTokenUsageChartCard";
+
+async function AsyncAiAnalytics(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  const stats = await getAiUsage(
+    {
+      from: props.from,
+      period: props.interval,
+      projectId: props.projectId,
+      teamId: props.teamId,
+      to: props.to,
+    },
+    props.authToken,
+  ).catch((error) => {
+    console.error(error);
+    return [];
+  });
+
+  return (
+    <AiTokenUsageChartCardUI
+      title="AI token volume"
+      isPending={false}
+      aiUsageStats={stats}
+      viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/ai/analytics`}
+      emptyChartState={
+        <EmptyChartStateGetStartedCTA
+          link={{
+            label: "View more details",
+            href: `/team/${props.teamSlug}/${props.projectSlug}/ai/analytics`,
+          }}
+          title="No data available"
+          description="No AI usage found in selected time period"
+        />
+      }
+    />
+  );
+}
+
+export function AIAnalyticsChartCard(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  return (
+    <ResponsiveSuspense
+      fallback={
+        <AiTokenUsageChartCardUI
+          isPending={true}
+          title="AI token volume"
+          viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/ai/analytics`}
+          aiUsageStats={[]}
+        />
+      }
+      searchParamsUsed={["from", "to", "interval"]}
+    >
+      <AsyncAiAnalytics
+        teamSlug={props.teamSlug}
+        projectSlug={props.projectSlug}
+        from={props.from}
+        to={props.to}
+        interval={props.interval}
+        projectId={props.projectId}
+        teamId={props.teamId}
+        authToken={props.authToken}
+      />
+    </ResponsiveSuspense>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/all-wallet-connections-chart.tsx

@@ -0,0 +1,92 @@
+import { ResponsiveSuspense } from "responsive-rsc";
+import { getEOAAndInAppWalletConnections } from "@/api/analytics";
+import { EmptyChartStateGetStartedCTA } from "@/components/analytics/empty-chart-state";
+import {
+  AutoMergeBarChart,
+  type StatData,
+} from "@/components/blocks/charts/automerge-barchart";
+
+type AllWalletConnectionsChartProps = {
+  teamId: string;
+  projectId: string;
+  authToken: string;
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  teamSlug: string;
+  projectSlug: string;
+};
+
+export function AllWalletConnectionsChart(
+  props: AllWalletConnectionsChartProps,
+) {
+  return (
+    <ResponsiveSuspense
+      searchParamsUsed={["from", "to", "interval"]}
+      fallback={
+        <AllWalletConnectionsChartUI {...props} isPending={true} stats={[]} />
+      }
+    >
+      <AsyncAllWalletConnectionsChart {...props} />
+    </ResponsiveSuspense>
+  );
+}
+
+async function AsyncAllWalletConnectionsChart(
+  props: AllWalletConnectionsChartProps,
+) {
+  const stats = await getEOAAndInAppWalletConnections(
+    {
+      from: props.from,
+      period: props.interval,
+      projectId: props.projectId,
+      teamId: props.teamId,
+      to: props.to,
+    },
+    props.authToken,
+  ).catch((error) => {
+    console.error(error);
+    return [];
+  });
+
+  return (
+    <AllWalletConnectionsChartUI
+      {...props}
+      isPending={false}
+      stats={stats.map((stat) => ({
+        date: stat.date,
+        count: stat.uniqueWalletsConnected,
+        label: stat.walletName,
+      }))}
+    />
+  );
+}
+
+function AllWalletConnectionsChartUI(props: {
+  stats: StatData[];
+  teamSlug: string;
+  projectSlug: string;
+  isPending: boolean;
+}) {
+  return (
+    <AutoMergeBarChart
+      title="Wallet connections"
+      description={undefined}
+      stats={props.stats || []}
+      isPending={props.isPending}
+      exportButton={undefined}
+      maxLabelsToShow={5}
+      emptyChartState={
+        <EmptyChartStateGetStartedCTA
+          link={{
+            label: "View Configuration",
+            href: `/team/${props.teamSlug}/${props.projectSlug}/wallets/user-wallets/configure`,
+          }}
+          title="No data available"
+          description="No wallet connections found in selected time period"
+        />
+      }
+      viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/wallets/user-wallets`}
+    />
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/bridge-card.tsx

@@ -0,0 +1,102 @@
+import { ResponsiveSuspense } from "responsive-rsc";
+import { getUniversalBridgeUsage } from "@/api/analytics";
+import {
+  EmptyChartState,
+  EmptyChartStateGetStartedCTA,
+  LoadingChartState,
+} from "@/components/analytics/empty-chart-state";
+import { TotalValueChartHeader } from "@/components/blocks/charts/chart-header";
+import type { UniversalBridgeStats } from "@/types/analytics";
+import { TotalVolumePieChart } from "../payments/components/TotalVolumePieChart";
+
+async function AsyncBridgeCard(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  const data = await getUniversalBridgeUsage(
+    {
+      from: props.from,
+      period: props.interval,
+      projectId: props.projectId,
+      teamId: props.teamId,
+      to: props.to,
+    },
+    props.authToken,
+  ).catch((error) => {
+    console.error(error);
+    return [];
+  });
+
+  return (
+    <BridgeChartCardUI
+      data={data}
+      teamSlug={props.teamSlug}
+      projectSlug={props.projectSlug}
+    />
+  );
+}
+
+export function BridgeChartCard(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  return (
+    <ResponsiveSuspense
+      fallback={<LoadingChartState className="min-h-[40px] h-full border" />}
+      searchParamsUsed={["from", "to", "interval"]}
+    >
+      <AsyncBridgeCard {...props} />
+    </ResponsiveSuspense>
+  );
+}
+
+function BridgeChartCardUI(props: {
+  data: UniversalBridgeStats[];
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  const total =
+    props.data.reduce((acc, curr) => acc + curr.amountUsdCents, 0) / 100;
+
+  return (
+    <div className="flex flex-col bg-card border rounded-lg">
+      <TotalValueChartHeader
+        title="Bridge Volume"
+        total={total}
+        isUsd={true}
+        isPending={false}
+        viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/bridge`}
+      />
+      <div className="p-6 grow flex items-center justify-center">
+        {total === 0 ? (
+          <EmptyChartState
+            content={
+              <EmptyChartStateGetStartedCTA
+                link={{
+                  label: "View Configuration",
+                  href: `/team/${props.teamSlug}/${props.projectSlug}/bridge/configuration`,
+                }}
+                title="No data available"
+                description="No bridge volume found in selected time period"
+              />
+            }
+          />
+        ) : (
+          <TotalVolumePieChart data={props.data} hideTotal={true} />
+        )}
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card-ui.stories.tsx

@@ -0,0 +1,158 @@
+import type { Meta } from "@storybook/nextjs";
+import { ResponsiveSearchParamsProvider } from "responsive-rsc";
+import type {
+  InAppWalletStats,
+  UniversalBridgeStats,
+  X402SettlementsOverall,
+} from "@/types/analytics";
+import { ProjectHighlightsCard } from "./highlights-card-ui";
+
+const meta = {
+  component: ProjectHighlightsCard,
+  decorators: [
+    (Story) => (
+      <ResponsiveSearchParamsProvider value={{}}>
+        <div className="container max-w-6xl py-10">
+          <Story />
+        </div>
+      </ResponsiveSearchParamsProvider>
+    ),
+  ],
+  title: "Analytics/ProjectHighlightsCard",
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof ProjectHighlightsCard>;
+
+export default meta;
+
+function generateDateSeries(days: number) {
+  const dates: string[] = [];
+  const today = new Date();
+  for (let i = days - 1; i >= 0; i--) {
+    const d = new Date(today);
+    d.setDate(today.getDate() - i);
+    dates.push(d.toISOString());
+  }
+  return dates;
+}
+
+function inAppWalletStub(days: number): InAppWalletStats[] {
+  const dates = generateDateSeries(days);
+  return dates.map((date) => {
+    return {
+      // main data
+      newUsers: randomValue(50, 100),
+      uniqueWalletsConnected: randomValue(500, 1200),
+      // others
+      authenticationMethod: "email",
+      date,
+    };
+  });
+}
+
+// a few aggregated entries that will be summed for the "Active Users" stat
+function aggregatedInAppWalletsStub(): InAppWalletStats[] {
+  return Array.from({ length: 3 }).map(() => {
+    return {
+      // main data
+      newUsers: randomValue(50, 100),
+      uniqueWalletsConnected: randomValue(500, 1200),
+      // others
+      date: new Date().toISOString(),
+      authenticationMethod: "email",
+    };
+  });
+}
+
+function bridgeVolumeStub(days: number): UniversalBridgeStats[] {
+  const dates = generateDateSeries(days);
+  return dates.map((date) => {
+    return {
+      // main data
+      developerFeeUsdCents: randomValue(500 * 100, 2500 * 100),
+      status: "completed",
+      // others
+      chainId: 0,
+      count: 0,
+      date,
+      amountUsdCents: 0,
+      type: "onchain",
+    };
+  });
+}
+
+function randomValue(min: number, max: number) {
+  return Math.max(0, Math.round(min + Math.random() * (max - min)));
+}
+
+function generateX402Settlements(days: number): X402SettlementsOverall[] {
+  const dates = generateDateSeries(days);
+  return dates.map((date) => {
+    return {
+      date,
+      totalRequests: randomValue(10, 100),
+      totalValue: randomValue(500, 2500),
+      totalValueUSD: randomValue(500, 2500),
+    };
+  });
+}
+
+export function ThirtyDays() {
+  const days = 30;
+  const data = {
+    aggregatedUserStats: aggregatedInAppWalletsStub(),
+    userStats: inAppWalletStub(days),
+    bridgeVolumeStats: bridgeVolumeStub(days),
+    x402Settlements: generateX402Settlements(days),
+  };
+
+  return (
+    <ProjectHighlightsCard
+      aggregatedUserStats={data.aggregatedUserStats}
+      userStats={data.userStats}
+      volumeStats={data.bridgeVolumeStats}
+      x402Settlements={data.x402Settlements}
+    />
+  );
+}
+
+export function SingleDayRevenue() {
+  const days = 1;
+  const data = {
+    aggregatedUserStats: [],
+    userStats: [],
+    bridgeVolumeStats: bridgeVolumeStub(days),
+    x402Settlements: generateX402Settlements(days),
+  };
+
+  return (
+    <ProjectHighlightsCard
+      aggregatedUserStats={data.aggregatedUserStats}
+      userStats={data.userStats}
+      volumeStats={data.bridgeVolumeStats}
+      x402Settlements={data.x402Settlements}
+    />
+  );
+}
+
+export function SingleDayRevenueNoX402() {
+  const days = 1;
+  const data = {
+    aggregatedUserStats: [],
+    userStats: [],
+    bridgeVolumeStats: bridgeVolumeStub(days),
+    x402Settlements: [],
+  };
+
+  return (
+    <ProjectHighlightsCard
+      aggregatedUserStats={data.aggregatedUserStats}
+      userStats={data.userStats}
+      volumeStats={data.bridgeVolumeStats}
+      x402Settlements={data.x402Settlements}
+    />
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card-ui.tsx

@@ -1,67 +1,66 @@
 "use client";
 
-import { EmptyStateContent } from "app/(app)/team/components/Analytics/EmptyStateCard";
-import { useSetResponsiveSearchParams } from "responsive-rsc";
-import type { InAppWalletStats, UniversalBridgeStats } from "@/types/analytics";
-import { CombinedBarChartCard } from "../../../../components/Analytics/CombinedBarChartCard";
+import { useState } from "react";
+import type {
+  InAppWalletStats,
+  UniversalBridgeStats,
+  X402SettlementsOverall,
+} from "@/types/analytics";
+import {
+  CombinedBarChartCard,
+  type CombinedBarChartConfig,
+} from "../../../../components/Analytics/CombinedBarChartCard";
 
 type AggregatedMetrics = {
   activeUsers: number;
   newUsers: number;
-  totalVolume: number;
   feesCollected: number;
+  bridgeRevenue: number;
+  x402Revenue: number;
 };
 
 export function ProjectHighlightsCard(props: {
-  selectedChart: string | undefined;
   aggregatedUserStats: InAppWalletStats[];
   userStats: InAppWalletStats[];
   volumeStats: UniversalBridgeStats[];
-  teamSlug: string;
-  projectSlug: string;
-  selectedChartQueryParam: string;
+  x402Settlements: X402SettlementsOverall[];
 }) {
-  const {
-    selectedChart,
-    aggregatedUserStats,
+  const { aggregatedUserStats, userStats, volumeStats, x402Settlements } =
+    props;
+
+  const [selectedChart, setSelectedChart] = useState<string | undefined>(
+    "activeUsers",
+  );
+
+  const timeSeriesData = processTimeSeriesData(
     userStats,
     volumeStats,
-    teamSlug,
-    projectSlug,
-    selectedChartQueryParam,
-  } = props;
+    x402Settlements,
+  );
 
-  const timeSeriesData = processTimeSeriesData(userStats, volumeStats);
-  const setResponsiveSearchParams = useSetResponsiveSearchParams();
-
-  const chartConfig = {
+  const chartConfig: CombinedBarChartConfig<keyof AggregatedMetrics> = {
     activeUsers: { color: "hsl(var(--chart-1))", label: "Active Users" },
-    newUsers: { color: "hsl(var(--chart-3))", label: "New Users" },
-    totalVolume: {
-      color: "hsl(var(--chart-2))",
-      emptyContent: (
-        <EmptyStateContent
-          description="Onramp, swap, and bridge with thirdweb's Payments."
-          link="https://portal.thirdweb.com/payments"
-          metric="Payments"
-        />
-      ),
+    newUsers: { color: "hsl(var(--chart-2))", label: "New Users" },
+    bridgeRevenue: {
+      color: "hsl(var(--chart-3))",
       isCurrency: true,
-      label: "Total Volume",
+      label: "Bridge",
+      hideAsTab: true,
+    },
+    x402Revenue: {
+      color: "hsl(var(--chart-4))",
+      isCurrency: true,
+      label: "x402",
+      hideAsTab: true,
     },
     feesCollected: {
-      color: "hsl(var(--chart-4))",
-      emptyContent: (
-        <EmptyStateContent
-          description="Your app hasn't collected any fees yet."
-          link={`/team/${teamSlug}/${projectSlug}/bridge/configuration`}
-          metric="Fees"
-        />
-      ),
+      color: "hsl(var(--chart-3))",
+      emptyContent: undefined,
       isCurrency: true,
-      label: "Bridge Fee Revenue",
+      label: "Revenue",
+      stackedKeys: ["bridgeRevenue", "x402Revenue"],
     },
-  } as const;
+  };
 
   return (
     <CombinedBarChartCard
@@ -83,12 +82,7 @@ export function ProjectHighlightsCard(props: {
       chartConfig={chartConfig}
       data={timeSeriesData}
       onSelect={(key) => {
-        setResponsiveSearchParams((v) => {
-          return {
-            ...v,
-            [selectedChartQueryParam]: key,
-          };
-        });
+        setSelectedChart(key);
       }}
       trendFn={(data, key) =>
         data.filter((d) => (d[key] as number) > 0).length >= 2
@@ -103,6 +97,8 @@ export function ProjectHighlightsCard(props: {
 
 type TimeSeriesMetrics = AggregatedMetrics & {
   date: string;
+  bridgeRevenue: number;
+  x402Revenue: number;
 };
 
 /**
@@ -111,48 +107,51 @@ type TimeSeriesMetrics = AggregatedMetrics & {
 function processTimeSeriesData(
   userStats: InAppWalletStats[],
   volumeStats: UniversalBridgeStats[],
+  x402Settlements: X402SettlementsOverall[],
 ): TimeSeriesMetrics[] {
   const metrics: TimeSeriesMetrics[] = [];
   const dates = [
     ...new Set([
-      ...userStats.map((a) => new Date(a.date).toISOString().slice(0, 10)),
-      ...volumeStats.map((a) => new Date(a.date).toISOString().slice(0, 10)),
+      ...userStats.map((a) => ignoreTimePeriod(a.date)),
+      ...volumeStats.map((a) => ignoreTimePeriod(a.date)),
+      ...x402Settlements.map((a) => ignoreTimePeriod(a.date)),
     ]),
   ];
 
   for (const date of dates) {
     const activeUsers = userStats
-      .filter((u) => new Date(u.date).toISOString().slice(0, 10) === date)
+      .filter((u) => ignoreTimePeriod(u.date) === ignoreTimePeriod(date))
       .reduce((acc, curr) => acc + curr.uniqueWalletsConnected, 0);
 
     const newUsers = userStats
-      .filter((u) => new Date(u.date).toISOString().slice(0, 10) === date)
+      .filter((u) => ignoreTimePeriod(u.date) === ignoreTimePeriod(date))
       .reduce((acc, curr) => acc + curr.newUsers, 0);
 
-    const volume = volumeStats
+    const bridgeRevenue = volumeStats
       .filter(
         (v) =>
-          new Date(v.date).toISOString().slice(0, 10) === date &&
-          v.status === "completed",
-      )
-      .reduce((acc, curr) => acc + curr.amountUsdCents / 100, 0);
-
-    const fees = volumeStats
-      .filter(
-        (v) =>
-          new Date(v.date).toISOString().slice(0, 10) === date &&
+          ignoreTimePeriod(v.date) === ignoreTimePeriod(date) &&
           v.status === "completed",
       )
       .reduce((acc, curr) => acc + curr.developerFeeUsdCents / 100, 0);
 
+    const x402Revenue = x402Settlements
+      .filter((x) => ignoreTimePeriod(x.date) === ignoreTimePeriod(date))
+      .reduce((acc, curr) => acc + curr.totalValueUSD, 0);
+
     metrics.push({
       activeUsers: activeUsers,
       date: date,
-      feesCollected: fees,
+      feesCollected: bridgeRevenue + x402Revenue,
+      bridgeRevenue: bridgeRevenue,
+      x402Revenue: x402Revenue,
       newUsers: newUsers,
-      totalVolume: volume,
     });
   }
 
   return metrics;
 }
+
+function ignoreTimePeriod(date: string) {
+  return new Date(date).toISOString().slice(0, 10);
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card.tsx

@@ -0,0 +1,131 @@
+import { EmptyStateCard } from "app/(app)/team/components/Analytics/EmptyStateCard";
+import { ResponsiveSuspense } from "responsive-rsc";
+import type { ThirdwebClient } from "thirdweb";
+import {
+  getInAppWalletUsage,
+  getUniversalBridgeUsage,
+  getX402Settlements,
+} from "@/api/analytics";
+import type { Project } from "@/api/project/projects";
+import type { Range } from "@/components/analytics/date-range-selector";
+import { LoadingChartState } from "@/components/analytics/empty-chart-state";
+import { ProjectHighlightsCard } from "./highlights-card-ui";
+import type { PageParams, PageSearchParams } from "./types";
+
+export function ProjectHighlightCard(props: {
+  authToken: string;
+  client: ThirdwebClient;
+  interval: "day" | "week";
+  params: PageParams;
+  range: Range;
+  searchParams: PageSearchParams;
+  project: Project;
+}) {
+  return (
+    <ResponsiveSuspense
+      fallback={<LoadingChartState className="h-[458px] border" />}
+      searchParamsUsed={["from", "to", "interval"]}
+    >
+      <AsyncAppHighlightsCard
+        authToken={props.authToken}
+        client={props.client}
+        interval={props.interval}
+        params={props.params}
+        project={props.project}
+        range={props.range}
+      />
+    </ResponsiveSuspense>
+  );
+}
+
+async function AsyncAppHighlightsCard(props: {
+  project: Project;
+  range: Range;
+  interval: "day" | "week";
+  client: ThirdwebClient;
+  params: PageParams;
+  authToken: string;
+}) {
+  const [
+    aggregatedUserStats,
+    walletUserStatsTimeSeries,
+    universalBridgeUsage,
+    x402Settlements,
+  ] = await Promise.allSettled([
+    getInAppWalletUsage(
+      {
+        from: props.range.from,
+        period: "all",
+        projectId: props.project.id,
+        teamId: props.project.teamId,
+        to: props.range.to,
+      },
+      props.authToken,
+    ),
+    getInAppWalletUsage(
+      {
+        from: props.range.from,
+        period: props.interval,
+        projectId: props.project.id,
+        teamId: props.project.teamId,
+        to: props.range.to,
+      },
+      props.authToken,
+    ),
+    getUniversalBridgeUsage(
+      {
+        from: props.range.from,
+        period: props.interval,
+        projectId: props.project.id,
+        teamId: props.project.teamId,
+        to: props.range.to,
+      },
+      props.authToken,
+    ),
+    getX402Settlements(
+      {
+        from: props.range.from,
+        period: props.interval,
+        projectId: props.project.id,
+        teamId: props.project.teamId,
+        to: props.range.to,
+      },
+      props.authToken,
+    ),
+  ]);
+
+  if (
+    walletUserStatsTimeSeries.status === "fulfilled" &&
+    universalBridgeUsage.status === "fulfilled"
+  ) {
+    return (
+      <ProjectHighlightsCard
+        aggregatedUserStats={
+          aggregatedUserStats.status === "fulfilled"
+            ? aggregatedUserStats.value
+            : []
+        }
+        userStats={
+          walletUserStatsTimeSeries.status === "fulfilled"
+            ? walletUserStatsTimeSeries.value
+            : []
+        }
+        volumeStats={
+          universalBridgeUsage.status === "fulfilled"
+            ? universalBridgeUsage.value
+            : []
+        }
+        x402Settlements={
+          x402Settlements.status === "fulfilled" ? x402Settlements.value : []
+        }
+      />
+    );
+  }
+
+  return (
+    <EmptyStateCard
+      link="https://portal.thirdweb.com/wallets"
+      metric="Wallets"
+    />
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/indexer-card.tsx

@@ -0,0 +1,79 @@
+import { ResponsiveSuspense } from "responsive-rsc";
+import { getInsightStatusCodeUsage } from "@/api/analytics";
+import { EmptyChartStateGetStartedCTA } from "@/components/analytics/empty-chart-state";
+import { RequestsByStatusGraph } from "../gateway/indexer/components/RequestsByStatusGraph";
+
+export function IndexerRequestsChartCard(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  return (
+    <ResponsiveSuspense
+      fallback={
+        <RequestsByStatusGraph
+          data={[]}
+          isPending={true}
+          viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/gateway/indexer`}
+        />
+      }
+      searchParamsUsed={["from", "to", "interval"]}
+    >
+      <AsyncIndexerRequestsChartCard
+        teamSlug={props.teamSlug}
+        projectSlug={props.projectSlug}
+        from={props.from}
+        to={props.to}
+        interval={props.interval}
+        projectId={props.projectId}
+        teamId={props.teamId}
+        authToken={props.authToken}
+      />
+    </ResponsiveSuspense>
+  );
+}
+
+async function AsyncIndexerRequestsChartCard(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  const requestsData = await getInsightStatusCodeUsage(
+    {
+      from: props.from,
+      period: props.interval,
+      projectId: props.projectId,
+      teamId: props.teamId,
+      to: props.to,
+    },
+    props.authToken,
+  ).catch(() => undefined);
+
+  return (
+    <RequestsByStatusGraph
+      data={requestsData && "data" in requestsData ? requestsData.data : []}
+      isPending={false}
+      viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/gateway/indexer`}
+      emptyChartState={
+        <EmptyChartStateGetStartedCTA
+          link={{
+            label: "View more details",
+            href: `/team/${props.teamSlug}/${props.projectSlug}/gateway/indexer`,
+          }}
+          title="No data available"
+          description="No indexer requests found in selected time period"
+        />
+      }
+    />
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsx

@@ -0,0 +1,144 @@
+import { ResponsiveSuspense } from "responsive-rsc";
+import type { ThirdwebClient } from "thirdweb";
+import type { Project } from "@/api/project/projects";
+import type { Range } from "@/components/analytics/date-range-selector";
+import { LoadingChartState } from "@/components/analytics/empty-chart-state";
+import { TransactionsChartCardAsync } from "../components/Transactions";
+import { AIAnalyticsChartCard } from "./ai-card";
+import { AllWalletConnectionsChart } from "./all-wallet-connections-chart";
+import { BridgeChartCard } from "./bridge-card";
+import { ProjectHighlightCard } from "./highlights-card";
+import { IndexerRequestsChartCard } from "./indexer-card";
+import { RPCRequestsChartCard } from "./rpc-card";
+import type { PageParams, PageSearchParams } from "./types";
+import { X402RequestsChartCard } from "./x402-card";
+
+export async function ProjectAnalytics(props: {
+  project: Project;
+  params: PageParams;
+  range: Range;
+  interval: "day" | "week";
+  searchParams: PageSearchParams;
+  client: ThirdwebClient;
+  authToken: string;
+}) {
+  const { project, params, range, interval, searchParams, client, authToken } =
+    props;
+
+  return (
+    <div className="flex grow flex-col gap-6">
+      {/* highlights */}
+      <ProjectHighlightCard
+        authToken={authToken}
+        client={client}
+        interval={interval}
+        params={params}
+        project={project}
+        range={range}
+        searchParams={searchParams}
+      />
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* wallets */}
+        <AllWalletConnectionsChart
+          teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
+          authToken={authToken}
+          projectId={project.id}
+          from={range.from}
+          to={range.to}
+          interval={interval}
+          teamId={project.teamId}
+        />
+
+        {/* bridge */}
+        <BridgeChartCard
+          teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
+          from={range.from}
+          to={range.to}
+          interval={interval}
+          projectId={project.id}
+          teamId={project.teamId}
+          authToken={authToken}
+        />
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Indexer */}
+        <IndexerRequestsChartCard
+          teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
+          from={range.from}
+          to={range.to}
+          interval={interval}
+          projectId={project.id}
+          teamId={project.teamId}
+          authToken={authToken}
+        />
+
+        {/* RPC */}
+        <RPCRequestsChartCard
+          teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
+          from={range.from}
+          to={range.to}
+          interval={interval}
+          projectId={project.id}
+          teamId={project.teamId}
+          authToken={authToken}
+        />
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* x402 */}
+        <X402RequestsChartCard
+          teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
+          from={range.from}
+          to={range.to}
+          interval={interval}
+          projectId={project.id}
+          teamId={project.teamId}
+          authToken={authToken}
+        />
+
+        {/* AI  */}
+        <AIAnalyticsChartCard
+          teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
+          from={range.from}
+          to={range.to}
+          interval={interval}
+          projectId={project.id}
+          teamId={project.teamId}
+          authToken={authToken}
+        />
+      </div>
+
+      {/* Transactions, Chains, Contracts */}
+      <ResponsiveSuspense
+        fallback={<LoadingChartState className="h-[458px] border" />}
+        searchParamsUsed={["from", "to", "interval", "client_transactions"]}
+      >
+        <TransactionsChartCardAsync
+          client={client}
+          params={{
+            from: range.from,
+            period: interval,
+            projectId: project.id,
+            teamId: project.teamId,
+            to: range.to,
+          }}
+          authToken={authToken}
+          selectedChart={
+            typeof searchParams.client_transactions === "string"
+              ? searchParams.client_transactions
+              : undefined
+          }
+          selectedChartQueryParam="client_transactions"
+        />
+      </ResponsiveSuspense>
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/rpc-card.tsx

@@ -0,0 +1,81 @@
+import { ResponsiveSuspense } from "responsive-rsc";
+import { getRpcUsageByType } from "@/api/analytics";
+import { EmptyChartStateGetStartedCTA } from "@/components/analytics/empty-chart-state";
+import { RPCRequestsChartUI } from "../gateway/rpc/components/RequestsGraph";
+
+async function AsyncRPCRequestsChartCard(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  const requestsData = await getRpcUsageByType(
+    {
+      from: props.from,
+      period: props.interval,
+      projectId: props.projectId,
+      teamId: props.teamId,
+      to: props.to,
+    },
+    props.authToken,
+  ).catch(() => undefined);
+
+  const isEmpty = requestsData?.every((d) => d.count === 0);
+
+  return (
+    <RPCRequestsChartUI
+      isPending={false}
+      data={isEmpty ? [] : requestsData || []}
+      viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/gateway/rpc`}
+      emptyChartState={
+        <EmptyChartStateGetStartedCTA
+          link={{
+            label: "View more details",
+            href: `/team/${props.teamSlug}/${props.projectSlug}/gateway/rpc`,
+          }}
+          title="No data available"
+          description="No RPC requests found in selected time period"
+        />
+      }
+    />
+  );
+}
+
+export function RPCRequestsChartCard(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  return (
+    <ResponsiveSuspense
+      fallback={
+        <RPCRequestsChartUI
+          isPending={true}
+          data={[]}
+          viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/gateway/rpc`}
+        />
+      }
+      searchParamsUsed={["from", "to", "interval"]}
+    >
+      <AsyncRPCRequestsChartCard
+        teamSlug={props.teamSlug}
+        projectSlug={props.projectSlug}
+        from={props.from}
+        to={props.to}
+        interval={props.interval}
+        projectId={props.projectId}
+        teamId={props.teamId}
+        authToken={props.authToken}
+      />
+    </ResponsiveSuspense>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/types.ts

@@ -0,0 +1,13 @@
+export type PageParams = {
+  team_slug: string;
+  project_slug: string;
+};
+
+export type PageSearchParams = {
+  from: string | undefined | string[];
+  to: string | undefined | string[];
+  type: string | undefined | string[];
+  interval: string | undefined | string[];
+  client_transactions: string | undefined | string[];
+  totalSponsored: string | undefined | string[];
+};

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-card.tsx

@@ -0,0 +1,93 @@
+import { ResponsiveSuspense } from "responsive-rsc";
+import { getX402Settlements } from "@/api/analytics";
+import { EmptyChartStateGetStartedCTA } from "@/components/analytics/empty-chart-state";
+import { X402RequestsChartCardUI } from "./x402-requests-chart";
+
+async function AsyncX402RequestsChart(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  const stats = await getX402Settlements(
+    {
+      from: props.from,
+      period: props.interval,
+      projectId: props.projectId,
+      teamId: props.teamId,
+      to: props.to,
+    },
+    props.authToken,
+  ).catch((error) => {
+    console.error(error);
+    return [];
+  });
+
+  const isAllEmpty = stats.every((stat) => stat.totalRequests === 0);
+
+  return (
+    <X402RequestsChartCardUI
+      stats={
+        isAllEmpty
+          ? []
+          : stats.map((stat) => ({
+              requests: stat.totalRequests,
+              time: stat.date,
+            }))
+      }
+      isPending={false}
+      teamSlug={props.teamSlug}
+      projectSlug={props.projectSlug}
+      emptyChartState={
+        <EmptyChartStateGetStartedCTA
+          link={{
+            label: "View Configuration",
+            href: `/team/${props.teamSlug}/${props.projectSlug}/x402/configuration`,
+          }}
+          title="No data available"
+          description="No X402 requests found in selected time period"
+        />
+      }
+    />
+  );
+}
+
+export function X402RequestsChartCard(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  return (
+    <ResponsiveSuspense
+      searchParamsUsed={["from", "to", "interval"]}
+      fallback={
+        <X402RequestsChartCardUI
+          stats={[]}
+          isPending={true}
+          teamSlug={props.teamSlug}
+          projectSlug={props.projectSlug}
+        />
+      }
+    >
+      <AsyncX402RequestsChart
+        from={props.from}
+        teamSlug={props.teamSlug}
+        projectSlug={props.projectSlug}
+        to={props.to}
+        interval={props.interval}
+        projectId={props.projectId}
+        teamId={props.teamId}
+        authToken={props.authToken}
+      />
+    </ResponsiveSuspense>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/x402-requests-chart.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { format } from "date-fns";
+import { useMemo } from "react";
+import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
+import { TotalValueChartHeader } from "@/components/blocks/charts/chart-header";
+
+export function X402RequestsChartCardUI(props: {
+  stats: Array<{ requests: number; time: string }>;
+  isPending: boolean;
+  teamSlug: string;
+  projectSlug: string;
+  emptyChartState?: React.ReactElement | undefined;
+}) {
+  const total = useMemo(() => {
+    return props.stats.reduce((acc, curr) => acc + curr.requests, 0);
+  }, [props.stats]);
+
+  return (
+    <ThirdwebBarChart
+      chartClassName="w-full h-[275px]"
+      data={props.stats}
+      config={{
+        requests: {
+          color: "hsl(var(--chart-1))",
+          label: "Requests",
+        },
+      }}
+      isPending={props.isPending}
+      hideLabel={false}
+      toolTipLabelFormatter={(label) => {
+        return format(label, "MMM dd");
+      }}
+      toolTipValueFormatter={(value) => {
+        return compactNumberFormatter.format(value as number);
+      }}
+      customHeader={
+        <TotalValueChartHeader
+          total={total}
+          isPending={props.isPending}
+          title="X402 Requests"
+          viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/x402`}
+        />
+      }
+      emptyChartState={props.emptyChartState}
+    />
+  );
+}
+
+const compactNumberFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 2,
+});

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/settings/SponsorshipPolicies/index.tsx

@@ -44,6 +44,7 @@ type AccountAbstractionSettingsPageProps = {
   teamId: string;
   teamSlug: string;
   validTeamPlan: Team["billingPlan"];
+  isLegacyPlan: boolean;
   client: ThirdwebClient;
 };
 
@@ -565,6 +566,7 @@ export function AccountAbstractionSettingsPage(
                     <GatedSwitch
                       currentPlan={props.validTeamPlan}
                       requiredPlan="starter"
+                      isLegacyPlan={props.isLegacyPlan}
                       switchProps={{
                         checked: field.value.enabled,
                         id: "server-verifier-switch",

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsx

@@ -1,10 +1,12 @@
 "use client";
 import { format } from "date-fns";
-import { BotIcon } from "lucide-react";
+import { ArrowUpRightIcon } from "lucide-react";
+import Link from "next/link";
 import { useMemo } from "react";
 import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
-import { DocLink } from "@/components/blocks/DocLink";
+import { TotalValueChartHeader } from "@/components/blocks/charts/chart-header";
 import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
+import { Button } from "@/components/ui/button";
 import type { ChartConfig } from "@/components/ui/chart";
 import type { AIUsageStats } from "@/types/analytics";
 
@@ -17,7 +19,8 @@ export function AiTokenUsageChartCardUI(props: {
   aiUsageStats: AIUsageStats[];
   isPending: boolean;
   title: string;
-  description: string;
+  viewMoreLink: string | undefined;
+  emptyChartState?: React.ReactElement | undefined;
 }) {
   const { aiUsageStats } = props;
 
@@ -52,36 +55,46 @@ export function AiTokenUsageChartCardUI(props: {
     chartData.length === 0 ||
     chartData.every((data) => data.tokens === 0);
 
+  const total = useMemo(() => {
+    return chartData.reduce((acc, curr) => acc + curr.tokens, 0);
+  }, [chartData]);
+
   return (
     <ThirdwebBarChart
-      chartClassName="aspect-[1.5] lg:aspect-[3.5]"
+      chartClassName="h-[275px] w-full aspect-auto"
       config={chartConfig}
       customHeader={
-        <div className="relative px-6 pt-6">
-          <h3 className="mb-0.5 font-semibold text-xl tracking-tight">
-            {props.title}
-          </h3>
-          <p className="mb-3 text-muted-foreground text-sm">
-            {props.description}
-          </p>
-
-          <ExportToCSVButton
-            className="top-6 right-6 mb-4 w-full bg-background md:absolute md:mb-0 md:flex md:w-auto"
-            disabled={disableActions}
-            fileName="AI Token Usage"
-            getData={async () => {
-              const header = ["Date", "Tokens"];
-              const rows = chartData.map((data) => [
-                data.time,
-                data.tokens.toString(),
-              ]);
-              return { header, rows };
-            }}
+        props.viewMoreLink ? (
+          <TotalValueChartHeader
+            isPending={props.isPending}
+            total={total}
+            title={props.title}
+            viewMoreLink={props.viewMoreLink}
           />
-        </div>
+        ) : (
+          <div className="relative px-6 pt-6">
+            <h3 className="font-semibold text-xl tracking-tight">
+              {props.title}
+            </h3>
+
+            <ExportToCSVButton
+              className="top-6 right-6 mb-4 w-full bg-background md:absolute md:mb-0 md:flex md:w-auto"
+              disabled={disableActions}
+              fileName="AI Token Usage"
+              getData={async () => {
+                const header = ["Date", "Tokens"];
+                const rows = chartData.map((data) => [
+                  data.time,
+                  data.tokens.toString(),
+                ]);
+                return { header, rows };
+              }}
+            />
+          </div>
+        )
       }
       data={chartData}
-      emptyChartState={<AiTokenUsageEmptyChartState />}
+      emptyChartState={props.emptyChartState}
       hideLabel={false}
       isPending={props.isPending}
       showLegend={false}
@@ -97,20 +110,27 @@ export function AiTokenUsageChartCardUI(props: {
   );
 }
 
-function AiTokenUsageEmptyChartState() {
+function _AiTokenUsageEmptyChartState() {
   return (
     <div className="flex flex-col items-center justify-center px-4">
-      <span className="mb-6 text-center text-lg">
+      <h3 className="text-base font-semibold text-foreground mb-1 text-center">
+        No data available
+      </h3>
+      <p className="mb-6 text-center text-sm">
         Integrate thirdweb AI to interact with any EVM chain using natural
         language
-      </span>
-      <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
-        <DocLink
-          icon={BotIcon}
-          label="Get Started"
-          link="https://portal.thirdweb.com/ai/chat"
-        />
-      </div>
+      </p>
+      <Button
+        asChild
+        size="sm"
+        variant="default"
+        className="rounded-full gap-2"
+      >
+        <Link href="https://portal.thirdweb.com/ai/chat" target="_blank">
+          Get Started
+          <ArrowUpRightIcon className="size-4" />
+        </Link>
+      </Button>
     </div>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/index.tsx

@@ -18,9 +18,9 @@ function AiAnalyticsUI({ stats, isPending }: AiAnalyticsProps) {
   return (
     <AiTokenUsageChartCardUI
       title="Token Usage"
-      description="The total number of tokens used for AI interactions on your project."
       aiUsageStats={stats || []}
       isPending={isPending}
+      viewMoreLink={undefined}
     />
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/chat/[session_id]/page.tsx

@@ -1,4 +1,4 @@
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { getAuthToken, getUserThirdwebClient } from "@/api/auth-token";
 import { getProject } from "@/api/project/projects";
 import { getSessionById, getSessions } from "../../api/session";
@@ -39,7 +39,7 @@ export default async function Page(props: {
   ]);
 
   if (!session) {
-    notFound();
+    redirect(`/team/${params.team_slug}/${params.project_slug}/ai`);
   }
 
   return (

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/ChatBar.tsx

@@ -410,7 +410,7 @@ export function ChatBar(props: {
                     if (message.trim() === "" && images.length === 0) return;
                     handleSubmit(message);
                   }}
-                  variant="primary"
+                  variant="default"
                 >
                   <ArrowUpIcon className="size-4" />
                 </Button>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/ChatSidebar.tsx

@@ -1,7 +1,6 @@
 "use client";
 import {
   BotIcon,
-  ChartLineIcon,
   ChevronDownIcon,
   ChevronRightIcon,
   FileCode2Icon,
@@ -83,16 +82,6 @@ export function ChatSidebar(props: {
       <div className="h-5" />
 
       <div className="flex flex-col gap-3 border-t border-dashed px-4 py-4">
-        <Link
-          className="flex items-center gap-1 rounded-full text-foreground text-sm hover:underline justify-between"
-          href={`/team/${props.team_slug}/${props.project.slug}/ai/analytics`}
-        >
-          <div className="flex items-center gap-2">
-            <ChartLineIcon className="size-3.5 text-muted-foreground" />
-            Analytics
-          </div>
-          <ChevronRightIcon className="size-3.5 text-muted-foreground" />
-        </Link>
         <Link
           className="flex items-center gap-1 rounded-full text-foreground text-sm hover:underline justify-between"
           href={"https://portal.thirdweb.com/ai/chat"}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/QuickstartSection.client.tsx

@@ -20,35 +20,17 @@ export function QuickStartSection(props: {
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
         <FeatureCard
-          title="Buy Widget Component"
-          icon={CodeIcon}
-          id="swap_tokens"
-          features={[
-            "React component",
-            "Cross-chain token swaps across 85+ blockchains",
-            "Fiat onramp support to buy tokens with credit/debit cards",
-            "Customizable UI",
-          ]}
-          description={undefined}
-          link={{
-            href: `https://portal.thirdweb.com/bridge/swap`,
-            label: "Get Started",
-          }}
-        />
-
-        <FeatureCard
-          title="Bridge Widget Script"
-          description={undefined}
+          title="Bridge Widget"
+          description="Integrate cross-chain swaps and fiat onramp into your app using bridge widget"
           icon={CodeIcon}
           id="fees"
           features={[
-            "Integrate with a script tag",
+            "Integrate with iframe, script, or React component",
             "Cross-chain token swaps across 85+ blockchains",
             "Fiat onramp support to buy tokens with credit/debit cards",
-            "Customizable UI",
           ]}
           link={{
-            href: `/team/${props.teamSlug}/${props.projectSlug}/bridge/configuration`,
+            href: `https://portal.thirdweb.com/bridge/bridge-widget`,
             label: "Get Started",
           }}
         />
@@ -60,7 +42,7 @@ export function QuickStartSection(props: {
           id="webhooks"
           features={["Instant events", "Transaction verification"]}
           link={{
-            href: `/team/${props.teamSlug}/${props.projectSlug}/webhooks/payments`,
+            href: `/team/${props.teamSlug}/${props.projectSlug}/bridge/webhooks`,
             label: "Setup Webhooks",
           }}
         />

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/layout.tsx

@@ -1,4 +1,3 @@
-import { WebhookIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/project/projects";
@@ -43,13 +42,7 @@ export default async function Layout(props: {
             instantly
           </>
         ),
-        actions: {
-          secondary: {
-            href: `/team/${params.team_slug}/${params.project_slug}/webhooks/payments`,
-            label: "Webhooks",
-            icon: <WebhookIcon className="size-3.5 text-muted-foreground" />,
-          },
-        },
+        actions: null,
         links: [
           {
             type: "docs",
@@ -75,6 +68,10 @@ export default async function Layout(props: {
           name: "Configuration",
           path: `/team/${params.team_slug}/${params.project_slug}/bridge/configuration`,
         },
+        {
+          name: "Webhooks",
+          path: `/team/${params.team_slug}/${params.project_slug}/bridge/webhooks`,
+        },
       ]}
     >
       {props.children}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/webhooks/[id]/page.tsx

@@ -46,7 +46,7 @@ export default async function Page(props: {
           <BreadcrumbItem>
             <BreadcrumbLink asChild>
               <Link
-                href={`/team/${params.team_slug}/${params.project_slug}/webhooks/payments`}
+                href={`/team/${params.team_slug}/${params.project_slug}/bridge/webhooks`}
               >
                 Webhooks
               </Link>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/webhooks/components/webhooks.client.tsx

@@ -12,6 +12,7 @@ import {
   PlusIcon,
   TrashIcon,
   WebhookIcon,
+  XIcon,
 } from "lucide-react";
 import Link from "next/link";
 import { type PropsWithChildren, useMemo, useState } from "react";
@@ -95,9 +96,14 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
   if (!webhooksQuery.data?.length) {
     return (
       <div className="flex flex-col items-center gap-6 rounded-lg border border-border bg-card p-8 text-center">
-        <div className="flex flex-col gap-2">
-          <h2 className="font-semibold text-xl">No webhooks configured</h2>
-          <p className="text-sm text-muted-foreground">
+        <div className="flex flex-col items-center">
+          <div className="rounded-full p-2 border bg-background inline-flex mb-3">
+            <XIcon className="size-4 text-muted-foreground" />
+          </div>
+          <h2 className="font-semibold text-base mb-1">
+            No webhooks configured
+          </h2>
+          <p className="text-muted-foreground text-sm">
             Create a webhook to receive notifications for bridge, swap or onramp
             events.
           </p>
@@ -126,7 +132,7 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
             webhook={webhook}
             clientId={props.clientId}
             teamId={props.teamId}
-            layoutPath={`/team/${props.teamSlug}/${props.projectSlug}/webhooks/payments`}
+            layoutPath={`/team/${props.teamSlug}/${props.projectSlug}/bridge/webhooks`}
           />
         ))}
       </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/webhooks/page.tsx

@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/project/projects";
-import { PayWebhooksPage } from "../../payments/webhooks/components/webhooks.client";
+import { PayWebhooksPage } from "./components/webhooks.client";
 
 export default async function Page(props: {
   params: Promise<{

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCard.stories.tsx

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { BadgeContainer } from "@/storybook/utils";
-import type { EngineCloudStats } from "@/types/analytics";
-import { EngineCloudBarChartCardUI } from "./EngineCloudBarChartCardUI";
-
-const meta = {
-  component: Component,
-  title: "Analytics/EngineCloudBarChartCard",
-} satisfies Meta<typeof Component>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Variants: Story = {
-  parameters: {
-    viewport: { defaultViewport: "desktop" },
-  },
-};
-
-const generateTimeSeriesData = (days: number, pathnames: string[]) => {
-  const data: EngineCloudStats[] = [];
-  const today = new Date();
-
-  for (let i = days - 1; i >= 0; i--) {
-    const date = new Date(today);
-    date.setDate(date.getDate() - i);
-    const dateStr = date.toISOString().split("T")[0];
-    for (const pathname of pathnames) {
-      data.push({
-        chainId: "84532",
-        // biome-ignore lint/style/noNonNullAssertion: we know this is not null
-        date: dateStr!,
-        pathname,
-        totalRequests: Math.floor(Math.random() * 1000) + 100,
-      });
-    }
-  }
-
-  return data;
-};
-
-function Component() {
-  return (
-    <div className="container max-w-6xl space-y-10 py-10">
-      <BadgeContainer label="Multiple Pathnames">
-        <EngineCloudBarChartCardUI
-          rawData={generateTimeSeriesData(30, [
-            "/v1/write/transaction",
-            "/v1/sign/transaction",
-            "/v1/sign/message",
-          ])}
-        />
-      </BadgeContainer>
-    </div>
-  );
-}