Version Packages (#8699)

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

.github/workflows/CI.yml

@@ -188,9 +188,16 @@ jobs:
       - name: Build Packages
         run: pnpm build
 
-      - name: Report bundle size
+      - name: Report bundle size (thirdweb)
         uses: andresz1/size-limit-action@94bc357df29c36c8f8d50ea497c3e225c3c95d1d # v1.8.0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           package_manager: pnpm
-          directory: packages/thirdweb
+          directory: packages/thirdweb
+
+      - name: Report bundle size (nexus)
+        uses: andresz1/size-limit-action@94bc357df29c36c8f8d50ea497c3e225c3c95d1d # v1.8.0
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          package_manager: pnpm
+          directory: packages/nexus

.github/workflows/auto-assign.yml

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

.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,

AGENTS.md

@@ -18,7 +18,7 @@ Welcome, AI copilots! This guide captures the coding standards, architectural de
 2. Formatting & Linting
 
 - Biome governs formatting and linting; its rules live in biome.json.
-- Run pnpm biome check --apply before committing.
+- Run `pnpm fix` & `pnpm lint` before committing, make sure there are no linting errors.
 - Avoid editor‑specific configs; rely on the shared settings.
 - make sure everything builds after each file change by running `pnpm build`
 
@@ -136,7 +136,7 @@ export function reportContractDeployed(properties: {
 }
 ```
 
-- **Client-side only**: never import `posthog-js` in server components.  
+- **Client-side only**: never import `posthog-js` in server components.
 - **Housekeeping**: Inform **#eng-core-services** before renaming or removing an existing event.
 
 ⸻

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/checkly.config.ts

@@ -1,30 +0,0 @@
-import { defineConfig } from "checkly";
-import { Frequency } from "checkly/constructs";
-
-export default defineConfig({
-  checks: {
-    activated: true,
-    browserChecks: {
-      frequency: Frequency.EVERY_24H,
-      testMatch: "./tests/**/*.spec.ts",
-    },
-    checkMatch: "./**/*.check.ts",
-    frequency: Frequency.EVERY_24H,
-    ignoreDirectoriesMatch: [],
-    locations: ["us-east-1", "eu-west-1"],
-    muted: false,
-    playwrightConfig: {
-      use: {
-        baseURL: process.env.ENVIRONMENT_URL || "https://thirdweb.com",
-      },
-    },
-    runtimeId: "2023.09",
-    tags: ["website"],
-  },
-  cli: {
-    runLocation: "eu-west-1",
-  },
-  logicalId: "thirdweb-www",
-  projectName: "thirdweb.com",
-  repoUrl: "https://github.com/thirdweb-dev/dashboard",
-});

apps/dashboard/framer-rewrites.js

@@ -10,7 +10,8 @@ module.exports = [
   "/wallets",
   "/account-abstraction",
   "/payments",
-  "/payments/x402",
+  "/x402",
+  "/nexus",
   "/auth",
   "/in-app-wallets",
   "/transactions",
@@ -20,6 +21,7 @@ module.exports = [
   "/rpc",
   "/insight",
   "/storage",
+  "/gateway",
   // -- end scale category
 
   // -- ai
@@ -66,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

@@ -2,6 +2,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
     "@marsidev/react-turnstile": "^1.1.0",
+    "@number-flow/react": "^0.5.10",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",
@@ -43,19 +44,19 @@
     "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",
-    "ogl": "^1.0.11",
+    "p-limit": "^7.2.0",
     "papaparse": "^5.5.3",
     "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",
@@ -81,9 +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",
-    "@playwright/test": "1.53.2",
+    "@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,15 +92,14 @@
     "@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",
     "@typescript-eslint/eslint-plugin": "7.14.1",
     "@typescript-eslint/parser": "7.14.1",
     "autoprefixer": "^10.4.21",
-    "checkly": "6.0.1",
     "eslint": "8.57.0",
     "eslint-config-biome": "1.9.4",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
@@ -123,13 +122,11 @@
     "format": "biome format ./src --write",
     "knip": "knip",
     "lint": "biome check ./src && knip && eslint ./src",
-    "playwright": "playwright test",
     "postbuild": "next-sitemap",
     "preinstall": "npx only-allow pnpm",
     "start": "next start",
     "storybook": "storybook dev -p 6006",
-    "typecheck": "tsc --noEmit",
-    "update-checkly": "npx checkly deploy"
+    "typecheck": "tsc --noEmit"
   },
   "version": "3.0.0"
 }

apps/dashboard/playwright.config.ts

@@ -1,79 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
-
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
-  ],
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "html",
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  testDir: "./tests",
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: process.env.ENVIRONMENT_URL || "http://127.0.0.1:3000",
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: "on-first-retry",
-  },
-
-  /* Run your local dev server before starting the tests */
-  webServer: process.env.CI
-    ? undefined
-    : {
-        command: "pnpm run start",
-        reuseExistingServer: !process.env.CI,
-        url: "http://127.0.0.1:3000",
-      },
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
-});

apps/dashboard/redirects.js

@@ -115,6 +115,16 @@ const projectPageRedirects = [
     permanent: false,
     source: `${projectRoute}/connect/analytics`,
   },
+  {
+    destination: `${projectRoute}/gateway/indexer/:path*`,
+    permanent: false,
+    source: `${projectRoute}/insight/:path*`,
+  },
+  {
+    destination: `${projectRoute}/gateway/rpc/:path*`,
+    permanent: false,
+    source: `${projectRoute}/rpc/:path*`,
+  },
 ];
 
 const teamPageRedirects = [
@@ -479,6 +489,11 @@ async function redirects() {
       destination: "/tokens",
       permanent: false,
     },
+    {
+      source: "/payments/x402",
+      destination: "/x402",
+      permanent: false,
+    },
   ];
 }
 

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/@/actions/project-wallet/list-server-wallets.ts

@@ -0,0 +1,70 @@
+"use server";
+
+import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
+import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
+import type { ProjectWalletSummary } from "@/lib/server/project-wallet";
+
+interface VaultWalletListItem {
+  id: string;
+  address: string;
+  metadata?: {
+    label?: string;
+    projectId?: string;
+    teamId?: string;
+    type?: string;
+  } | null;
+}
+
+export async function listProjectServerWallets(params: {
+  managementAccessToken: string;
+  projectId: string;
+  pageSize?: number;
+}): Promise<ProjectWalletSummary[]> {
+  const { managementAccessToken, projectId, pageSize = 100 } = params;
+
+  if (!managementAccessToken || !NEXT_PUBLIC_THIRDWEB_VAULT_URL) {
+    return [];
+  }
+
+  try {
+    const vaultClient = await createVaultClient({
+      baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
+    });
+
+    const response = await listEoas({
+      client: vaultClient,
+      request: {
+        auth: {
+          accessToken: managementAccessToken,
+        },
+        options: {
+          page: 0,
+          // @ts-expect-error - Vault SDK expects snake_case pagination fields
+          page_size: pageSize,
+        },
+      },
+    });
+
+    if (!response.success || !response.data?.items) {
+      return [];
+    }
+
+    const items = response.data.items as VaultWalletListItem[];
+
+    return items
+      .filter((item) => {
+        return (
+          item.metadata?.projectId === projectId &&
+          (!item.metadata?.type || item.metadata.type === "server-wallet")
+        );
+      })
+      .map<ProjectWalletSummary>((item) => ({
+        id: item.id,
+        address: item.address,
+        label: item.metadata?.label ?? undefined,
+      }));
+  } catch (error) {
+    console.error("Failed to list project server wallets", error);
+    return [];
+  }
+}

apps/dashboard/src/@/actions/project-wallet/send-tokens.ts

@@ -0,0 +1,74 @@
+"use server";
+
+import { configure, sendTokens } from "@thirdweb-dev/api";
+import { THIRDWEB_API_HOST } from "@/constants/urls";
+
+configure({
+  override: {
+    baseUrl: THIRDWEB_API_HOST,
+  },
+});
+
+export async function sendProjectWalletTokens(options: {
+  walletAddress: string;
+  recipientAddress: string;
+  chainId: number;
+  quantityWei: string;
+  publishableKey: string;
+  teamId: string;
+  tokenAddress?: string;
+  secretKey: string;
+  vaultAccessToken?: string;
+}) {
+  const {
+    walletAddress,
+    recipientAddress,
+    chainId,
+    quantityWei,
+    publishableKey,
+    teamId,
+    tokenAddress,
+    secretKey,
+    vaultAccessToken,
+  } = options;
+
+  if (!secretKey) {
+    return {
+      error: "A project secret key is required to send funds.",
+      ok: false,
+    } as const;
+  }
+
+  const response = await sendTokens({
+    body: {
+      chainId,
+      from: walletAddress,
+      recipients: [
+        {
+          address: recipientAddress,
+          quantity: quantityWei,
+        },
+      ],
+      ...(tokenAddress ? { tokenAddress } : {}),
+    },
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": publishableKey,
+      "x-secret-key": secretKey,
+      "x-team-id": teamId,
+      ...(vaultAccessToken ? { "x-vault-access-token": vaultAccessToken } : {}),
+    },
+  });
+
+  if (response.error || !response.data) {
+    return {
+      error: response.error || "Failed to submit transfer request.",
+      ok: false,
+    } as const;
+  }
+
+  return {
+    ok: true,
+    transactionIds: response.data.result?.transactionIds ?? [],
+  } as const;
+}

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

@@ -1,6 +1,6 @@
 "use server";
 
-import { revalidatePath } from "next/cache";
+import { revalidatePath, revalidateTag } from "next/cache";
 
 export async function revalidatePathAction(
   path: string,
@@ -8,3 +8,7 @@ export async function revalidatePathAction(
 ) {
   revalidatePath(path, type);
 }
+
+export async function revalidateCacheTagAction(tag: string) {
+  revalidateTag(tag);
+}

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

@@ -1,6 +1,6 @@
 import "server-only";
 
-import { headers } from "next/headers";
+import { cookies, headers } from "next/headers";
 import Stripe from "stripe";
 import type { Team } from "@/api/team/get-team";
 import {
@@ -88,6 +88,9 @@ export async function fetchClientSecret(team: Team) {
     throw new Error("No customer ID found");
   }
 
+  // try to get the gclid cookie
+  const gclid = (await cookies()).get("gclid")?.value;
+
   // Create Checkout Sessions from body params.
   const session = await stripe.checkout.sessions.create({
     ui_mode: "embedded",
@@ -117,6 +120,8 @@ export async function fetchClientSecret(team: Team) {
           missing_payment_method: "cancel",
         },
       },
+      // if gclid exists, set it as a metadata field so we can attribute the conversion later
+      metadata: gclid ? { gclid } : undefined,
     },
   });
 

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

@@ -24,6 +24,7 @@ export function reportContractDeployed(properties: {
   publisher: string | undefined;
   contractName: string | undefined;
   deploymentType?: "asset";
+  is_testnet: boolean | undefined;
 }) {
   posthog.capture("contract deployed", properties);
 }
@@ -40,6 +41,7 @@ export function reportContractDeployed(properties: {
 export function reportContractDeployFailed(properties: {
   errorMessage: string;
   chainId: number;
+  is_testnet: boolean | undefined;
   publisher: string | undefined;
   contractName: string | undefined;
 }) {
@@ -171,9 +173,7 @@ export function reportOnboardingCompleted() {
  *
  */
 export function reportFaucetUsed(properties: { chainId: number }) {
-  posthog.capture("faucet used", {
-    chainId: properties.chainId,
-  });
+  posthog.capture("faucet used", properties);
 }
 
 // ----------------------------
@@ -197,12 +197,7 @@ export function reportChainConfigurationAdded(properties: {
     decimals: number;
   };
 }) {
-  posthog.capture("chain configuration added", {
-    chainId: properties.chainId,
-    chainName: properties.chainName,
-    nativeCurrency: properties.nativeCurrency,
-    rpcURLs: properties.rpcURLs,
-  });
+  posthog.capture("chain configuration added", properties);
 }
 
 // ----------------------------
@@ -227,12 +222,9 @@ export function reportAssetBuySuccessful(properties: {
   chainId: number;
   contractType: AssetContractType | undefined;
   assetType: "nft" | "coin";
+  is_testnet: boolean | undefined;
 }) {
-  posthog.capture("asset buy successful", {
-    assetType: properties.assetType,
-    chainId: properties.chainId,
-    contractType: properties.contractType,
-  });
+  posthog.capture("asset buy successful", properties);
 }
 
 type TokenSwapParams = {
@@ -240,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";
 };
 
 /**
@@ -306,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);
 }
@@ -349,16 +341,12 @@ export function reportTokenSwapCancelled(properties: TokenSwapParams) {
  */
 export function reportAssetBuyFailed(properties: {
   chainId: number;
+  is_testnet: boolean | undefined;
   contractType: AssetContractType | undefined;
   assetType: "nft" | "coin";
   error: string;
 }) {
-  posthog.capture("asset buy failed", {
-    assetType: properties.assetType,
-    chainId: properties.chainId,
-    contractType: properties.contractType,
-    error: properties.error,
-  });
+  posthog.capture("asset buy failed", properties);
 }
 
 /**
@@ -371,14 +359,11 @@ export function reportAssetBuyFailed(properties: {
  */
 export function reportAssetBuyCancelled(properties: {
   chainId: number;
+  is_testnet: boolean | undefined;
   contractType: AssetContractType | undefined;
   assetType: "nft" | "coin";
 }) {
-  posthog.capture("asset buy cancelled", {
-    assetType: properties.assetType,
-    chainId: properties.chainId,
-    contractType: properties.contractType,
-  });
+  posthog.capture("asset buy cancelled", properties);
 }
 
 // Assets Landing Page ----------------------------
@@ -423,10 +408,7 @@ export function reportAssetCreationStepConfigured(
         step: "coin-info" | "token-distribution" | "launch-coin";
       },
 ) {
-  posthog.capture("asset creation step configured", {
-    assetType: properties.assetType,
-    step: properties.step,
-  });
+  posthog.capture("asset creation step configured", properties);
 }
 
 /**
@@ -440,11 +422,10 @@ export function reportAssetCreationStepConfigured(
 export function reportAssetCreationSuccessful(properties: {
   assetType: "nft" | "coin";
   contractType: AssetContractType;
+  chainId: number;
+  is_testnet: boolean | undefined;
 }) {
-  posthog.capture("asset creation successful", {
-    assetType: properties.assetType,
-    contractType: properties.contractType,
-  });
+  posthog.capture("asset creation successful", properties);
 }
 
 type CoinCreationStep =
@@ -466,7 +447,12 @@ type CoinCreationStep =
  * @MananTank
  */
 export function reportAssetCreationFailed(
-  properties: { contractType: AssetContractType; error: string } & (
+  properties: {
+    contractType: AssetContractType;
+    error: string;
+    is_testnet: boolean | undefined;
+    chainId: number;
+  } & (
     | {
         assetType: "nft";
         step:
@@ -481,12 +467,7 @@ export function reportAssetCreationFailed(
       }
   ),
 ) {
-  posthog.capture("asset creation failed", {
-    assetType: properties.assetType,
-    contractType: properties.contractType,
-    error: properties.error,
-    step: properties.step,
-  });
+  posthog.capture("asset creation failed", properties);
 }
 
 type UpsellParams = {
@@ -582,6 +563,7 @@ export function reportPaymentLinkBuyFailed(properties: {
 export function reportAssetPageview(properties: {
   assetType: "nft" | "coin";
   chainId: number;
+  is_testnet: boolean | undefined;
 }) {
   posthog.capture("asset pageview", properties);
 }
@@ -593,7 +575,10 @@ export function reportAssetPageview(properties: {
  * ### Who is responsible for this event?
  * @MananTank
  */
-export function reportChainPageview(properties: { chainId: number }) {
+export function reportChainPageview(properties: {
+  chainId: number;
+  is_testnet: boolean | undefined;
+}) {
   posthog.capture("chain pageview", properties);
 }
 
@@ -686,10 +671,7 @@ export function reportProductFeedback(properties: {
   feedback: string;
   source: "desktop" | "mobile";
 }) {
-  posthog.capture("product feedback submitted", {
-    feedback: properties.feedback,
-    source: properties.source,
-  });
+  posthog.capture("product feedback submitted", properties);
 }
 
 /**
@@ -701,7 +683,22 @@ export function reportProductFeedback(properties: {
  *
  */
 export function reportBridgePageLinkClick(params: {
-  linkType: "integrate-bridge" | "trending-tokens";
+  linkType: "bridge-docs" | "trending-tokens" | "integrate-bridge-widget";
 }) {
   posthog.capture("bridge page link clicked", params);
 }
+
+/**
+ * ### Why do we need to report this event?
+ * - To track which tokens are users are clicking on in the token list page
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportTokenRowClicked(params: {
+  chainId: number;
+  tokenAddress: string;
+}) {
+  posthog.capture("token row clicked", params);
+}

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

@@ -1,21 +1,24 @@
 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,
+  X402SettlementStats,
 } from "@/types/analytics";
 import { getChains } from "./chain";
 
@@ -146,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"],
   {
@@ -160,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(
@@ -184,7 +286,7 @@ const cached_getInAppWalletUsage = unstable_cache(
     if (res?.status !== 200) {
       const reason = await res?.text();
       console.error(
-        `Failed to fetch in-app wallet usage, ${res?.status} - ${res.statusText} - ${reason}`,
+        `Failed to fetch user wallets usage, ${res?.status} - ${res.statusText} - ${reason}`,
       );
       return [];
     }
@@ -289,8 +391,11 @@ const cached_getAggregateUserOpUsage = unstable_cache(
     ]);
 
     // Aggregate stats across wallet types
-    return userOpStats.reduce(
-      (acc, curr) => {
+    const aggregated = userOpStats.reduce(
+      (
+        acc: UserOpStats & { gasPriceSum: number; gasPriceCount: number },
+        curr,
+      ) => {
         // Skip testnets from the aggregated stats
         if (curr.chainId) {
           const chain = chains.data.find(
@@ -304,6 +409,10 @@ const cached_getAggregateUserOpUsage = unstable_cache(
         acc.successful += curr.successful;
         acc.failed += curr.failed;
         acc.sponsoredUsd += curr.sponsoredUsd;
+        acc.gasUnits += curr.gasUnits;
+        // For avgGasPrice, we'll track sum and count for proper averaging
+        acc.gasPriceSum += curr.avgGasPrice * curr.successful;
+        acc.gasPriceCount += curr.successful;
         return acc;
       },
       {
@@ -311,8 +420,28 @@ const cached_getAggregateUserOpUsage = unstable_cache(
         failed: 0,
         sponsoredUsd: 0,
         successful: 0,
+        gasUnits: 0,
+        avgGasPrice: 0,
+        gasPriceSum: 0,
+        gasPriceCount: 0,
       },
     );
+
+    // Calculate the proper average gas price
+    aggregated.avgGasPrice =
+      aggregated.gasPriceCount > 0
+        ? aggregated.gasPriceSum / aggregated.gasPriceCount
+        : 0;
+
+    // Return only the UserOpStats fields
+    return {
+      date: aggregated.date,
+      failed: aggregated.failed,
+      sponsoredUsd: aggregated.sponsoredUsd,
+      successful: aggregated.successful,
+      gasUnits: aggregated.gasUnits,
+      avgGasPrice: aggregated.avgGasPrice,
+    };
   },
   ["getAggregateUserOpUsage"],
   {
@@ -448,6 +577,7 @@ type ActiveStatus = {
   pay: boolean;
   inAppWallet: boolean;
   ecosystemWallet: boolean;
+  engineCloud: boolean;
 };
 
 export const isProjectActive = unstable_cache(
@@ -479,6 +609,7 @@ export const isProjectActive = unstable_cache(
         pay: false,
         rpc: false,
         sdk: false,
+        engineCloud: false,
         storage: false,
       } as ActiveStatus;
     }
@@ -488,7 +619,7 @@ export const isProjectActive = unstable_cache(
   },
   ["isProjectActive"],
   {
-    revalidate: 60 * 60, // 1 hour
+    revalidate: 30, // 30 seconds
   },
 );
 
@@ -660,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 },
@@ -904,3 +1000,43 @@ export function getInsightUsage(
 ) {
   return cached_getInsightUsage(normalizedParams(params), authToken);
 }
+
+const cached_getX402Settlements = unstable_cache(
+  async (
+    params: X402QueryParams,
+    authToken: string,
+  ): Promise<X402SettlementStats[]> => {
+    const searchParams = buildSearchParams(params);
+
+    if (params.groupBy) {
+      searchParams.append("groupBy", params.groupBy);
+    }
+
+    const res = await fetchAnalytics({
+      authToken,
+      url: `v2/x402/settlements?${searchParams.toString()}`,
+      init: {
+        method: "GET",
+      },
+    });
+
+    if (res?.status !== 200) {
+      const reason = await res?.text();
+      console.error(
+        `Failed to fetch x402 settlements: ${res?.status} - ${res.statusText} - ${reason}`,
+      );
+      return [];
+    }
+
+    const json = await res.json();
+    return json.data as X402SettlementStats[];
+  },
+  ["getX402Settlements"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
+
+export function getX402Settlements(params: X402QueryParams, authToken: string) {
+  return cached_getX402Settlements(normalizedParams(params), authToken);
+}

apps/dashboard/src/@/api/project/cache-tag.ts

@@ -0,0 +1,6 @@
+export function projectContractsCacheTag(params: {
+  teamId: string;
+  projectId: string;
+}) {
+  return `${params.teamId}/${params.projectId}/project-contracts`;
+}

apps/dashboard/src/@/api/project/getSortedDeployedContracts.tsx

@@ -1,58 +1,111 @@
+import { unstable_cache } from "next/cache";
+import pLimit from "p-limit";
+import { defineChain } from "thirdweb";
+import { getContract } from "thirdweb/contract";
 import {
   getProjectContracts,
   type ProjectContract,
 } from "@/api/project/getProjectContracts";
-import { fetchChainWithLocalOverrides } from "@/utils/fetchChainWithLocalOverrides";
+import { supportedERCs } from "@/utils/supportedERCs";
+import { serverThirdwebClient } from "../../constants/thirdweb-client.server";
+import { resolveFunctionSelectors } from "../../lib/selectors";
+import { projectContractsCacheTag } from "./cache-tag";
 
-export async function getSortedDeployedContracts(params: {
-  onlyMainnet?: boolean;
+type GetFilteredProjectContractsParams = {
   teamId: string;
   projectId: string;
   authToken: string;
-  deploymentType: string | undefined;
-}) {
+};
+
+type ProjectContractWithIsToken = ProjectContract & { isToken: boolean };
+
+async function getProjectContractsWithIsTokenInfo(
+  params: GetFilteredProjectContractsParams,
+): Promise<ProjectContractWithIsToken[]> {
   const contracts = await getProjectContracts({
     authToken: params.authToken,
-    deploymentType: params.deploymentType,
+    deploymentType: undefined, // don't pass it to api to fetch all contracts, we'll filter/merge manually here
     projectId: params.projectId,
     teamId: params.teamId,
   });
 
-  const chainIds = Array.from(new Set(contracts.map((c) => c.chainId)));
-  const chains = (
-    await Promise.allSettled(
-      chainIds.map((chainId) =>
-        fetchChainWithLocalOverrides(chainId.toString()),
-      ),
-    )
-  )
-    .filter((c) => c.status === "fulfilled")
-    .map((c) => c.value)
-    .filter((c) => c !== null);
+  const assetContracts = contracts.filter((c) => c.deploymentType === "asset");
+  const otherContracts = contracts.filter((c) => c.deploymentType !== "asset");
 
-  const mainnetContracts: ProjectContract[] = [];
-  const testnetContracts: ProjectContract[] = [];
+  // "asset" deployment type contract is assumed to be a "token" type contract already
+  // for others, check if its a "token" type contract (isERC20, isERC721 or isERC1155)
 
-  for (const contract of contracts) {
-    const chain = chains.find(
-      (chain) => contract.chainId === chain.chainId.toString(),
+  const limit = pLimit(20);
+
+  const othersContractWithIsTokenInfo: ProjectContractWithIsToken[] =
+    await Promise.all(
+      otherContracts.map(async (c) => {
+        return limit(async () => {
+          try {
+            const contract = getContract({
+              address: c.contractAddress,
+              // eslint-disable-next-line no-restricted-syntax
+              chain: defineChain(Number(c.chainId)),
+              client: serverThirdwebClient,
+            });
+
+            const functionSelectors = await resolveFunctionSelectors(contract);
+            const ercs = supportedERCs(functionSelectors);
+            if (ercs.isERC20 || ercs.isERC721 || ercs.isERC1155) {
+              return {
+                ...c,
+                isToken: true,
+              };
+            }
+            return {
+              ...c,
+              isToken: false,
+            };
+          } catch {
+            return {
+              ...c,
+              isToken: false,
+            };
+          }
+        });
+      }),
     );
-    if (chain && chain.status !== "deprecated") {
-      if (chain.testnet) {
-        testnetContracts.push(contract);
-      } else {
-        mainnetContracts.push(contract);
-      }
+
+  for (const c of othersContractWithIsTokenInfo) {
+    if (c.deploymentType === "asset") {
+      assetContracts.push(c);
+    } else {
+      otherContracts.push(c);
     }
   }
 
-  mainnetContracts.sort((a, b) => Number(a.chainId) - Number(b.chainId));
-
-  if (params.onlyMainnet) {
-    return mainnetContracts;
-  }
-
-  testnetContracts.sort((a, b) => Number(a.chainId) - Number(b.chainId));
-
-  return [...mainnetContracts, ...testnetContracts];
+  return [
+    ...assetContracts.map(
+      (c) => ({ ...c, isToken: true }) as ProjectContractWithIsToken,
+    ),
+    ...othersContractWithIsTokenInfo,
+  ];
+}
+
+export async function getFilteredProjectContracts(
+  params: GetFilteredProjectContractsParams & {
+    type: "token-contracts" | "non-token-contracts";
+  },
+) {
+  const cached_getProjectContractsWithIsTokenInfo = unstable_cache(
+    getProjectContractsWithIsTokenInfo,
+    ["get-project-contracts-with-is-token-info"],
+    {
+      revalidate: 3600, // 1 hour
+      tags: [projectContractsCacheTag(params)],
+    },
+  );
+
+  const contracts = await cached_getProjectContractsWithIsTokenInfo(params);
+
+  if (params.type === "token-contracts") {
+    return contracts.filter((c) => c.isToken);
+  } else {
+    return contracts.filter((c) => !c.isToken);
+  }
 }

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

@@ -21,7 +21,8 @@ export type AuthOption =
   | "steam"
   | "apple"
   | "coinbase"
-  | "line";
+  | "line"
+  | "epic";
 
 export type Ecosystem = {
   name: string;
@@ -104,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/@/api/team/team-subscription.ts

@@ -82,7 +82,7 @@ const CHAIN_PLAN_TO_INFRA = {
   ],
 };
 
-export async function getChainSubscriptions(slug: string) {
+async function getChainSubscriptions(slug: string) {
   const allSubscriptions = await getTeamSubscriptions(slug);
   if (!allSubscriptions) {
     return null;

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

@@ -1,28 +1,28 @@
-"use server";
 import type { Address } from "thirdweb";
-import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST } from "@/constants/public-envs";
 
 const UB_BASE_URL = NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST;
 
-type Webhook = {
+export type Webhook = {
   url: string;
   label: string;
   active: boolean;
   createdAt: string;
   id: string;
-  secret: string;
   version?: number; // TODO (UB) make this mandatory after migration
 };
 
-export async function getWebhooks(props: { clientId: string; teamId: string }) {
-  const authToken = await getAuthToken();
+export async function getWebhooks(params: {
+  clientId: string;
+  teamId: string;
+  authToken: string;
+}) {
   const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
     headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
       "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
     },
     method: "GET",
   });
@@ -36,28 +36,55 @@ export async function getWebhooks(props: { clientId: string; teamId: string }) {
   return json.data as Array<Webhook>;
 }
 
-export async function createWebhook(props: {
+export async function getWebhookById(params: {
+  clientId: string;
+  teamId: string;
+  authToken: string;
+  webhookId: string;
+}) {
+  const res = await fetch(
+    `${UB_BASE_URL}/v1/developer/webhooks/${encodeURIComponent(params.webhookId)}`,
+    {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+        "Content-Type": "application/json",
+        "x-client-id": params.clientId,
+        "x-team-id": params.teamId,
+      },
+      method: "GET",
+    },
+  );
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Webhook;
+}
+
+export async function createWebhook(params: {
   clientId: string;
   teamId: string;
   version?: number;
   url: string;
   label: string;
   secret?: string;
+  authToken: string;
 }) {
-  const authToken = await getAuthToken();
-
   const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
     body: JSON.stringify({
-      label: props.label,
-      secret: props.secret,
-      url: props.url,
-      version: props.version,
+      label: params.label,
+      secret: params.secret,
+      url: params.url,
+      version: params.version,
     }),
     headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
       "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
     },
     method: "POST",
   });
@@ -67,23 +94,23 @@ export async function createWebhook(props: {
     throw new Error(text);
   }
 
-  return;
+  return (await res.json()) as Webhook;
 }
 
-export async function deleteWebhook(props: {
+export async function deleteWebhook(params: {
   clientId: string;
   teamId: string;
   webhookId: string;
+  authToken: string;
 }) {
-  const authToken = await getAuthToken();
   const res = await fetch(
-    `${UB_BASE_URL}/v1/developer/webhooks/${props.webhookId}`,
+    `${UB_BASE_URL}/v1/developer/webhooks/${encodeURIComponent(params.webhookId)}`,
     {
       headers: {
-        Authorization: `Bearer ${authToken}`,
+        Authorization: `Bearer ${params.authToken}`,
         "Content-Type": "application/json",
-        "x-client-id": props.clientId,
-        "x-team-id": props.teamId,
+        "x-client-id": params.clientId,
+        "x-team-id": params.teamId,
       },
       method: "DELETE",
     },
@@ -94,7 +121,151 @@ export async function deleteWebhook(props: {
     throw new Error(text);
   }
 
-  return;
+  return true;
+}
+
+export async function updateWebhook(params: {
+  clientId: string;
+  teamId: string;
+  webhookId: string;
+  authToken: string;
+  body: {
+    version?: number;
+    url: string;
+    label: string;
+  };
+}) {
+  const res = await fetch(
+    `${UB_BASE_URL}/v1/developer/webhooks/${encodeURIComponent(params.webhookId)}`,
+    {
+      method: "PUT",
+      body: JSON.stringify(params.body),
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+        "Content-Type": "application/json",
+        "x-client-id": params.clientId,
+        "x-team-id": params.teamId,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+
+  return json.data as Webhook;
+}
+
+export type WebhookSend = {
+  id: string;
+  webhookId: string;
+  webhookUrl: string;
+  createdAt: string;
+  onrampId: string | null;
+  paymentId: string | null;
+  response: string | null;
+  responseStatus: number;
+  status: "PENDING" | "COMPLETED" | "FAILED";
+  success: boolean;
+  transactionId: string | null;
+  body: unknown;
+};
+
+type WebhookSendsResponse = {
+  data: WebhookSend[];
+  pagination: {
+    limit: number;
+    offset: number;
+    total: number;
+  };
+};
+
+export async function getWebhookSends(options: {
+  authToken: string;
+  projectClientId: string;
+  teamId: string;
+  limit?: number;
+  offset?: number;
+  webhookId: string;
+  success?: boolean;
+}): Promise<WebhookSendsResponse> {
+  const { limit, offset, success, webhookId, authToken } = options;
+
+  const url = new URL(
+    `${NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST}/v1/developer/webhook-sends`,
+  );
+
+  url.searchParams.set("webhookId", webhookId);
+
+  if (limit !== undefined) {
+    url.searchParams.set("limit", limit.toString());
+  }
+  if (offset !== undefined) {
+    url.searchParams.set("offset", offset.toString());
+  }
+  if (success !== undefined) {
+    url.searchParams.set("success", success.toString());
+  }
+
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      "x-client-id": options.projectClientId,
+      "x-team-id": options.teamId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    const errorJson = await response.json();
+    throw new Error(errorJson.message);
+  }
+
+  return (await response.json()) as WebhookSendsResponse;
+}
+
+export async function resendWebhook(
+  params: {
+    authToken: string;
+    projectClientId: string;
+    teamId: string;
+  } & (
+    | {
+        paymentId: string;
+      }
+    | {
+        onrampId: string;
+      }
+  ),
+) {
+  const url = new URL(
+    `${NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST}/v1/developer/webhooks/retry`,
+  );
+
+  const response = await fetch(url.toString(), {
+    method: "POST",
+    body: JSON.stringify(
+      "paymentId" in params
+        ? { paymentId: params.paymentId }
+        : { onrampId: params.onrampId },
+    ),
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": params.projectClientId,
+      "x-team-id": params.teamId,
+      Authorization: `Bearer ${params.authToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    const errorJson = await response.json();
+    throw new Error(errorJson.message);
+  }
+
+  return true;
 }
 
 type PaymentLink = {
@@ -116,17 +287,17 @@ type PaymentLink = {
   amount: bigint;
 };
 
-export async function getPaymentLinks(props: {
+export async function getPaymentLinks(params: {
   clientId: string;
   teamId: string;
+  authToken: string;
 }): Promise<Array<PaymentLink>> {
-  const authToken = await getAuthToken();
   const res = await fetch(`${UB_BASE_URL}/v1/developer/links`, {
     headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
       "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
     },
     method: "GET",
   });
@@ -159,7 +330,7 @@ export async function getPaymentLinks(props: {
   }));
 }
 
-export async function createPaymentLink(props: {
+export async function createPaymentLink(params: {
   clientId: string;
   teamId: string;
   title: string;
@@ -171,26 +342,25 @@ export async function createPaymentLink(props: {
     amount: bigint;
     purchaseData?: unknown;
   };
+  authToken: string;
 }) {
-  const authToken = await getAuthToken();
-
   const res = await fetch(`${UB_BASE_URL}/v1/developer/links`, {
     body: JSON.stringify({
-      title: props.title,
-      imageUrl: props.imageUrl,
+      title: params.title,
+      imageUrl: params.imageUrl,
       intent: {
-        destinationChainId: props.intent.destinationChainId,
-        destinationTokenAddress: props.intent.destinationTokenAddress,
-        receiver: props.intent.receiver,
-        amount: props.intent.amount.toString(),
-        purchaseData: props.intent.purchaseData,
+        destinationChainId: params.intent.destinationChainId,
+        destinationTokenAddress: params.intent.destinationTokenAddress,
+        receiver: params.intent.receiver,
+        amount: params.intent.amount.toString(),
+        purchaseData: params.intent.purchaseData,
       },
     }),
     headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
       "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
     },
     method: "POST",
   });
@@ -207,20 +377,20 @@ export async function createPaymentLink(props: {
   return response.data;
 }
 
-export async function deletePaymentLink(props: {
+export async function deletePaymentLink(params: {
   clientId: string;
   teamId: string;
   paymentLinkId: string;
+  authToken: string;
 }) {
-  const authToken = await getAuthToken();
   const res = await fetch(
-    `${UB_BASE_URL}/v1/developer/links/${props.paymentLinkId}`,
+    `${UB_BASE_URL}/v1/developer/links/${encodeURIComponent(params.paymentLinkId)}`,
     {
       headers: {
-        Authorization: `Bearer ${authToken}`,
+        Authorization: `Bearer ${params.authToken}`,
         "Content-Type": "application/json",
-        "x-client-id": props.clientId,
-        "x-team-id": props.teamId,
+        "x-client-id": params.clientId,
+        "x-team-id": params.teamId,
       },
       method: "DELETE",
     },
@@ -231,7 +401,7 @@ export async function deletePaymentLink(props: {
     throw new Error(text);
   }
 
-  return;
+  return true;
 }
 
 export type Fee = {
@@ -241,14 +411,17 @@ export type Fee = {
   updatedAt: string;
 };
 
-export async function getFees(props: { clientId: string; teamId: string }) {
-  const authToken = await getAuthToken();
+export async function getFees(params: {
+  clientId: string;
+  teamId: string;
+  authToken: string;
+}) {
   const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
     headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
       "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
     },
     method: "GET",
   });
@@ -262,23 +435,23 @@ export async function getFees(props: { clientId: string; teamId: string }) {
   return json.data as Fee;
 }
 
-export async function updateFee(props: {
+export async function updateFee(params: {
   clientId: string;
   teamId: string;
   feeRecipient: string;
   feeBps: number;
+  authToken: string;
 }) {
-  const authToken = await getAuthToken();
   const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
     body: JSON.stringify({
-      feeBps: props.feeBps,
-      feeRecipient: props.feeRecipient,
+      feeBps: params.feeBps,
+      feeRecipient: params.feeRecipient,
     }),
     headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
       "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
     },
     method: "PUT",
   });
@@ -288,7 +461,7 @@ export async function updateFee(props: {
     throw new Error(text);
   }
 
-  return;
+  return true;
 }
 
 export type PaymentsResponse = {
@@ -345,36 +518,34 @@ export type Payment = {
 
 export type BridgePayment = Extract<Payment, { type: BridgePaymentType }>;
 
-export async function getPayments(props: {
+export async function getPayments(params: {
   clientId: string;
   teamId: string;
   paymentLinkId?: string;
   limit?: number;
+  authToken: string;
   offset?: number;
 }) {
-  const authToken = await getAuthToken();
-
-  // Build URL with query parameters if provided
   const url = new URL(`${UB_BASE_URL}/v1/developer/payments`);
 
-  if (props.limit) {
-    url.searchParams.append("limit", props.limit.toString());
+  if (params.limit) {
+    url.searchParams.append("limit", params.limit.toString());
   }
 
-  if (props.offset) {
-    url.searchParams.append("offset", props.offset.toString());
+  if (params.offset) {
+    url.searchParams.append("offset", params.offset.toString());
   }
 
-  if (props.paymentLinkId) {
-    url.searchParams.append("paymentLinkId", props.paymentLinkId);
+  if (params.paymentLinkId) {
+    url.searchParams.append("paymentLinkId", params.paymentLinkId);
   }
 
   const res = await fetch(url.toString(), {
     headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
       "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
     },
     method: "GET",
   });

apps/dashboard/src/@/api/universal-bridge/token-list.ts

@@ -21,7 +21,7 @@ export async function getUniversalBridgeTokens(props: {
     headers: {
       "Content-Type": "application/json",
       "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
-    } as Record<string, string>,
+    },
     method: "GET",
   });
 

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

@@ -21,7 +21,7 @@ export async function addUniversalBridgeTokenRoute(props: {
       Authorization: `Bearer ${authToken}`,
       "Content-Type": "application/json",
       "x-client-id": props.project.publishableKey,
-    } as Record<string, string>,
+    },
     method: "POST",
   });
 

apps/dashboard/src/@/api/x402/config.ts

@@ -0,0 +1,27 @@
+import type { Project } from "@/api/project/projects";
+
+type X402Fee = {
+  feeRecipient: string;
+  feeBps: number;
+};
+
+/**
+ * Extract x402 fee configuration from project's engineCloud service
+ */
+export function getX402Fees(project: Project): X402Fee {
+  const engineCloudService = project.services.find(
+    (service) => service.name === "engineCloud",
+  );
+
+  if (!engineCloudService) {
+    return {
+      feeRecipient: "",
+      feeBps: 0,
+    };
+  }
+
+  return {
+    feeRecipient: engineCloudService.x402FeeRecipient || "",
+    feeBps: engineCloudService.x402FeeBPS || 0,
+  };
+}

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

@@ -1,192 +0,0 @@
-"use client";
-/* eslint-disable no-restricted-syntax */
-import { Mesh, Program, Renderer, Triangle, Vec2 } from "ogl";
-import { useEffect, useRef } from "react";
-
-const vertex = `
-attribute vec2 position;
-void main(){gl_Position=vec4(position,0.0,1.0);}
-`;
-
-const fragment = `
-#ifdef GL_ES
-precision lowp float;
-#endif
-uniform vec2 uResolution;
-uniform float uTime;
-uniform float uHueShift;
-uniform float uNoise;
-uniform float uScan;
-uniform float uScanFreq;
-uniform float uWarp;
-uniform vec3 uBackgroundColor;
-uniform float uBackgroundOpacity;
-uniform float uPatternLightness;
-#define iTime uTime
-#define iResolution uResolution
-
-vec4 buf[8];
-float rand(vec2 c){return fract(sin(dot(c,vec2(12.9898,78.233)))*43758.5453);}
-
-mat3 rgb2yiq=mat3(0.299,0.587,0.114,0.596,-0.274,-0.322,0.211,-0.523,0.312);
-mat3 yiq2rgb=mat3(1.0,0.956,0.621,1.0,-0.272,-0.647,1.0,-1.106,1.703);
-
-vec3 hueShiftRGB(vec3 col,float deg){
-    vec3 yiq=rgb2yiq*col;
-    float rad=radians(deg);
-    float cosh=cos(rad),sinh=sin(rad);
-    vec3 yiqShift=vec3(yiq.x,yiq.y*cosh-yiq.z*sinh,yiq.y*sinh+yiq.z*cosh);
-    return clamp(yiq2rgb*yiqShift,0.0,1.0);
-}
-
-vec4 sigmoid(vec4 x){return 1./(1.+exp(-x));}
-
-vec4 cppn_fn(vec2 coordinate,float in0,float in1,float in2){
-    buf[6]=vec4(coordinate.x,coordinate.y,0.3948333106474662+in0,0.36+in1);
-    buf[7]=vec4(0.14+in2,sqrt(coordinate.x*coordinate.x+coordinate.y*coordinate.y),0.,0.);
-    buf[0]=mat4(vec4(6.5404263,-3.6126034,0.7590882,-1.13613),vec4(2.4582713,3.1660357,1.2219609,0.06276096),vec4(-5.478085,-6.159632,1.8701609,-4.7742867),vec4(6.039214,-5.542865,-0.90925294,3.251348))*buf[6]+mat4(vec4(0.8473259,-5.722911,3.975766,1.6522468),vec4(-0.24321538,0.5839259,-1.7661959,-5.350116),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(0.21808943,1.1243913,-1.7969975,5.0294676);
-    buf[1]=mat4(vec4(-3.3522482,-6.0612736,0.55641043,-4.4719114),vec4(0.8631464,1.7432913,5.643898,1.6106541),vec4(2.4941394,-3.5012043,1.7184316,6.357333),vec4(3.310376,8.209261,1.1355612,-1.165539))*buf[6]+mat4(vec4(5.24046,-13.034365,0.009859298,15.870829),vec4(2.987511,3.129433,-0.89023495,-1.6822904),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-5.9457836,-6.573602,-0.8812491,1.5436668);
-    buf[0]=sigmoid(buf[0]);buf[1]=sigmoid(buf[1]);
-    buf[2]=mat4(vec4(-15.219568,8.095543,-2.429353,-1.9381982),vec4(-5.951362,4.3115187,2.6393783,1.274315),vec4(-7.3145227,6.7297835,5.2473326,5.9411426),vec4(5.0796127,8.979051,-1.7278991,-1.158976))*buf[6]+mat4(vec4(-11.967154,-11.608155,6.1486754,11.237008),vec4(2.124141,-6.263192,-1.7050359,-0.7021966),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-4.17164,-3.2281182,-4.576417,-3.6401186);
-    buf[3]=mat4(vec4(3.1832156,-13.738922,1.879223,3.233465),vec4(0.64300746,12.768129,1.9141049,0.50990224),vec4(-0.049295485,4.4807224,1.4733979,1.801449),vec4(5.0039253,13.000481,3.3991797,-4.5561905))*buf[6]+mat4(vec4(-0.1285731,7.720628,-3.1425676,4.742367),vec4(0.6393625,3.714393,-0.8108378,-0.39174938),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-1.1811101,-21.621881,0.7851888,1.2329718);
-    buf[2]=sigmoid(buf[2]);buf[3]=sigmoid(buf[3]);
-    buf[4]=mat4(vec4(5.214916,-7.183024,2.7228765,2.6592617),vec4(-5.601878,-25.3591,4.067988,0.4602802),vec4(-10.57759,24.286327,21.102104,37.546658),vec4(4.3024497,-1.9625226,2.3458803,-1.372816))*buf[0]+mat4(vec4(-17.6526,-10.507558,2.2587414,12.462782),vec4(6.265566,-502.75443,-12.642513,0.9112289),vec4(-10.983244,20.741234,-9.701768,-0.7635988),vec4(5.383626,1.4819539,-4.1911616,-4.8444734))*buf[1]+mat4(vec4(12.785233,-16.345072,-0.39901125,1.7955981),vec4(-30.48365,-1.8345358,1.4542528,-1.1118771),vec4(19.872723,-7.337935,-42.941723,-98.52709),vec4(8.337645,-2.7312303,-2.2927687,-36.142323))*buf[2]+mat4(vec4(-16.298317,3.5471997,-0.44300047,-9.444417),vec4(57.5077,-35.609753,16.163465,-4.1534753),vec4(-0.07470326,-3.8656476,-7.0901804,3.1523974),vec4(-12.559385,-7.077619,1.490437,-0.8211543))*buf[3]+vec4(-7.67914,15.927437,1.3207729,-1.6686112);
-    buf[5]=mat4(vec4(-1.4109162,-0.372762,-3.770383,-21.367174),vec4(-6.2103205,-9.35908,0.92529047,8.82561),vec4(11.460242,-22.348068,13.625772,-18.693201),vec4(-0.3429052,-3.9905605,-2.4626114,-0.45033523))*buf[0]+mat4(vec4(7.3481627,-4.3661838,-6.3037653,-3.868115),vec4(1.5462853,6.5488915,1.9701879,-0.58291394),vec4(6.5858274,-2.2180402,3.7127688,-1.3730392),vec4(-5.7973905,10.134961,-2.3395722,-5.965605))*buf[1]+mat4(vec4(-2.5132585,-6.6685553,-1.4029363,-0.16285264),vec4(-0.37908727,0.53738135,4.389061,-1.3024765),vec4(-0.70647055,2.0111287,-5.1659346,-3.728635),vec4(-13.562562,10.487719,-0.9173751,-2.6487076))*buf[2]+mat4(vec4(-8.645013,6.5546675,-6.3944063,-5.5933375),vec4(-0.57783127,-1.077275,36.91025,5.736769),vec4(14.283112,3.7146652,7.1452246,-4.5958776),vec4(2.7192075,3.6021907,-4.366337,-2.3653464))*buf[3]+vec4(-5.9000807,-4.329569,1.2427121,8.59503);
-    buf[4]=sigmoid(buf[4]);buf[5]=sigmoid(buf[5]);
-    buf[6]=mat4(vec4(-1.61102,0.7970257,1.4675229,0.20917463),vec4(-28.793737,-7.1390953,1.5025433,4.656581),vec4(-10.94861,39.66238,0.74318546,-10.095605),vec4(-0.7229728,-1.5483948,0.7301322,2.1687684))*buf[0]+mat4(vec4(3.2547753,21.489103,-1.0194173,-3.3100595),vec4(-3.7316632,-3.3792162,-7.223193,-0.23685838),vec4(13.1804495,0.7916005,5.338587,5.687114),vec4(-4.167605,-17.798311,-6.815736,-1.6451967))*buf[1]+mat4(vec4(0.604885,-7.800309,-7.213122,-2.741014),vec4(-3.522382,-0.12359311,-0.5258442,0.43852118),vec4(9.6752825,-22.853785,2.062431,0.099892326),vec4(-4.3196306,-17.730087,2.5184598,5.30267))*buf[2]+mat4(vec4(-6.545563,-15.790176,-6.0438633,-5.415399),vec4(-43.591583,28.551912,-16.00161,18.84728),vec4(4.212382,8.394307,3.0958717,8.657522),vec4(-5.0237565,-4.450633,-4.4768,-5.5010443))*buf[3]+mat4(vec4(1.6985557,-67.05806,6.897715,1.9004834),vec4(1.8680354,2.3915145,2.5231109,4.081538),vec4(11.158006,1.7294737,2.0738268,7.386411),vec4(-4.256034,-306.24686,8.258898,-17.132736))*buf[4]+mat4(vec4(1.6889864,-4.5852966,3.8534803,-6.3482175),vec4(1.3543309,-1.2640043,9.932754,2.9079645),vec4(-5.2770967,0.07150358,-0.13962056,3.3269649),vec4(28.34703,-4.918278,6.1044083,4.085355))*buf[5]+vec4(6.6818056,12.522166,-3.7075126,-4.104386);
-    buf[7]=mat4(vec4(-8.265602,-4.7027016,5.098234,0.7509808),vec4(8.6507845,-17.15949,16.51939,-8.884479),vec4(-4.036479,-2.3946867,-2.6055532,-1.9866527),vec4(-2.2167742,-1.8135649,-5.9759874,4.8846445))*buf[0]+mat4(vec4(6.7790847,3.5076547,-2.8191125,-2.7028968),vec4(-5.743024,-0.27844876,1.4958696,-5.0517144),vec4(13.122226,15.735168,-2.9397483,-4.101023),vec4(-14.375265,-5.030483,-6.2599335,2.9848232))*buf[1]+mat4(vec4(4.0950394,-0.94011575,-5.674733,4.755022),vec4(4.3809423,4.8310084,1.7425908,-3.437416),vec4(2.117492,0.16342592,-104.56341,16.949184),vec4(-5.22543,-2.994248,3.8350096,-1.9364246))*buf[2]+mat4(vec4(-5.900337,1.7946124,-13.604192,-3.8060522),vec4(6.6583457,31.911177,25.164474,91.81147),vec4(11.840538,4.1503043,-0.7314397,6.768467),vec4(-6.3967767,4.034772,6.1714606,-0.32874924))*buf[3]+mat4(vec4(3.4992442,-196.91893,-8.923708,2.8142626),vec4(3.4806502,-3.1846354,5.1725626,5.1804223),vec4(-2.4009497,15.585794,1.2863957,2.0252278),vec4(-71.25271,-62.441242,-8.138444,0.50670296))*buf[4]+mat4(vec4(-12.291733,-11.176166,-7.3474145,4.390294),vec4(10.805477,5.6337385,-0.9385842,-4.7348723),vec4(-12.869276,-7.039391,5.3029537,7.5436664),vec4(1.4593618,8.91898,3.5101583,5.840625))*buf[5]+vec4(2.2415268,-6.705987,-0.98861027,-2.117676);
-    buf[6]=sigmoid(buf[6]);buf[7]=sigmoid(buf[7]);
-    buf[0]=mat4(vec4(1.6794263,1.3817469,2.9625452,0.),vec4(-1.8834411,-1.4806935,-3.5924516,0.),vec4(-1.3279216,-1.0918057,-2.3124623,0.),vec4(0.2662234,0.23235129,0.44178495,0.))*buf[0]+mat4(vec4(-0.6299101,-0.5945583,-0.9125601,0.),vec4(0.17828953,0.18300213,0.18182953,0.),vec4(-2.96544,-2.5819945,-4.9001055,0.),vec4(1.4195864,1.1868085,2.5176322,0.))*buf[1]+mat4(vec4(-1.2584374,-1.0552157,-2.1688404,0.),vec4(-0.7200217,-0.52666044,-1.438251,0.),vec4(0.15345335,0.15196142,0.272854,0.),vec4(0.945728,0.8861938,1.2766753,0.))*buf[2]+mat4(vec4(-2.4218085,-1.968602,-4.35166,0.),vec4(-22.683098,-18.0544,-41.954372,0.),vec4(0.63792,0.5470648,1.1078634,0.),vec4(-1.5489894,-1.3075932,-2.6444845,0.))*buf[3]+mat4(vec4(-0.49252132,-0.39877754,-0.91366625,0.),vec4(0.95609266,0.7923952,1.640221,0.),vec4(0.30616966,0.15693925,0.8639857,0.),vec4(1.1825981,0.94504964,2.176963,0.))*buf[4]+mat4(vec4(0.35446745,0.3293795,0.59547555,0.),vec4(-0.58784515,-0.48177817,-1.0614829,0.),vec4(2.5271258,1.9991658,4.6846647,0.),vec4(0.13042648,0.08864098,0.30187556,0.))*buf[5]+mat4(vec4(-1.7718065,-1.4033192,-3.3355875,0.),vec4(3.1664357,2.638297,5.378702,0.),vec4(-3.1724713,-2.6107926,-5.549295,0.),vec4(-2.851368,-2.249092,-5.3013067,0.))*buf[6]+mat4(vec4(1.5203838,1.2212278,2.8404984,0.),vec4(1.5210563,1.2651345,2.683903,0.),vec4(2.9789467,2.4364579,5.2347264,0.),vec4(2.2270417,1.8825914,3.8028636,0.))*buf[7]+vec4(-1.5468478,-3.6171484,0.24762098,0.);
-    buf[0]=sigmoid(buf[0]);
-    return vec4(buf[0].x,buf[0].y,buf[0].z,1.);
-}
-
-void mainImage(out vec4 fragColor,in vec2 fragCoord){
-    vec2 uv=fragCoord/uResolution.xy*2.-1.;
-    uv.y*=-1.;
-    uv+=uWarp*vec2(sin(uv.y*6.283+uTime*0.5),cos(uv.x*6.283+uTime*0.5))*0.05;
-    fragColor=cppn_fn(uv,0.1*sin(0.3*uTime),0.1*sin(0.69*uTime),0.1*sin(0.44*uTime));
-}
-
-void main(){
-    vec4 col;mainImage(col,gl_FragCoord.xy);
-    col.rgb=hueShiftRGB(col.rgb,uHueShift);
-    float scanline_val=sin(gl_FragCoord.y*uScanFreq)*0.5+0.5;
-    col.rgb*=1.-(scanline_val*scanline_val)*uScan;
-    col.rgb+=(rand(gl_FragCoord.xy+uTime)-0.5)*uNoise;
-
-    // Apply lightness control to pattern
-    col.rgb = col.rgb * uPatternLightness;
-
-    // Use background color as base, then add pattern on top
-    vec3 finalColor = uBackgroundColor + col.rgb * uBackgroundOpacity;
-
-    gl_FragColor=vec4(clamp(finalColor,0.0,1.0),1.0);
-}
-`;
-
-type Props = {
-  hueShift?: number;
-  noiseIntensity?: number;
-  scanlineIntensity?: number;
-  speed?: number;
-  scanlineFrequency?: number;
-  warpAmount?: number;
-  resolutionScale?: number;
-  backgroundColor?: [number, number, number];
-  backgroundOpacity?: number;
-  patternLightness?: number;
-};
-
-export function DarkVeil({
-  hueShift = 0,
-  noiseIntensity = 0,
-  scanlineIntensity = 0,
-  speed = 0.5,
-  scanlineFrequency = 0,
-  warpAmount = 0,
-  resolutionScale = 1,
-  backgroundColor = [0, 0, 0],
-  backgroundOpacity = 1,
-  patternLightness = 1.0,
-}: Props) {
-  const ref = useRef<HTMLCanvasElement>(null);
-  useEffect(() => {
-    const canvas = ref.current as HTMLCanvasElement;
-    const parent = canvas.parentElement as HTMLElement;
-
-    const renderer = new Renderer({
-      dpr: Math.min(window.devicePixelRatio, 2),
-      canvas,
-    });
-
-    const gl = renderer.gl;
-    const geometry = new Triangle(gl);
-
-    const program = new Program(gl, {
-      vertex,
-      fragment,
-      uniforms: {
-        uTime: { value: 0 },
-        uResolution: { value: new Vec2() },
-        uHueShift: { value: hueShift },
-        uNoise: { value: noiseIntensity },
-        uScan: { value: scanlineIntensity },
-        uScanFreq: { value: scanlineFrequency },
-        uWarp: { value: warpAmount },
-        uBackgroundColor: { value: backgroundColor },
-        uBackgroundOpacity: { value: backgroundOpacity },
-        uPatternLightness: { value: patternLightness },
-      },
-    });
-
-    const mesh = new Mesh(gl, { geometry, program });
-
-    const resize = () => {
-      const w = parent.clientWidth,
-        h = parent.clientHeight;
-      renderer.setSize(w * resolutionScale, h * resolutionScale);
-      program.uniforms.uResolution.value.set(w, h);
-    };
-
-    window.addEventListener("resize", resize);
-    resize();
-
-    const start = performance.now();
-    let frame = 0;
-
-    const loop = () => {
-      program.uniforms.uTime.value =
-        ((performance.now() - start) / 1000) * speed;
-      program.uniforms.uHueShift.value = hueShift;
-      program.uniforms.uNoise.value = noiseIntensity;
-      program.uniforms.uScan.value = scanlineIntensity;
-      program.uniforms.uScanFreq.value = scanlineFrequency;
-      program.uniforms.uWarp.value = warpAmount;
-      program.uniforms.uBackgroundColor.value = backgroundColor;
-      program.uniforms.uBackgroundOpacity.value = backgroundOpacity;
-      program.uniforms.uPatternLightness.value = patternLightness;
-      renderer.render({ scene: mesh });
-      frame = requestAnimationFrame(loop);
-    };
-
-    loop();
-
-    return () => {
-      cancelAnimationFrame(frame);
-      window.removeEventListener("resize", resize);
-    };
-  }, [
-    hueShift,
-    noiseIntensity,
-    scanlineIntensity,
-    speed,
-    scanlineFrequency,
-    warpAmount,
-    resolutionScale,
-    backgroundColor,
-    backgroundOpacity,
-    patternLightness,
-  ]);
-  return <canvas ref={ref} className="w-full h-full block bg-background" />;
-}

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="natural"
-          />
-        </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

@@ -1,9 +1,10 @@
+/* eslint-disable no-restricted-syntax */
 "use client";
 
 import { useTheme } from "next-themes";
-import { useEffect, useMemo, useRef, useState } from "react";
-import type { Chain } 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,
   reportAssetBuyFailed,
@@ -16,27 +17,58 @@ 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 function BuyAndSwapEmbed(props: {
-  chain: Chain;
-  tokenAddress: string | undefined;
-  buyAmount: string | undefined;
+export type BuyAndSwapEmbedProps = {
+  persistTokenSelections?: boolean;
+  buyTab:
+    | {
+        buyToken:
+          | {
+              tokenAddress: string;
+              chainId: number;
+              amount?: string;
+            }
+          | undefined;
+      }
+    | undefined;
+  swapTab:
+    | {
+        sellToken:
+          | {
+              chainId: number;
+              tokenAddress: string;
+              amount?: string;
+            }
+          | undefined;
+        buyToken:
+          | {
+              chainId: number;
+              tokenAddress: string;
+              amount?: string;
+            }
+          | undefined;
+      }
+    | 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);
 
@@ -60,189 +92,170 @@ export function BuyAndSwapEmbed(props: {
             ? 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.buyAmount || "1"}
-          chain={props.chain}
-          className="!rounded-2xl !border-none"
-          title=""
-          client={client}
-          connectOptions={{
-            autoConnect: false,
-          }}
-          onError={(e, quote) => {
-            const errorMessage = parseError(e);
+                const buyChainId =
+                  quote?.type === "buy"
+                    ? quote.intent.destinationChainId
+                    : quote?.type === "onramp"
+                      ? quote.intent.chainId
+                      : undefined;
 
-            reportTokenBuyFailed({
-              buyTokenChainId:
-                quote?.type === "buy"
-                  ? quote.intent.destinationChainId
-                  : quote?.type === "onramp"
-                    ? quote.intent.chainId
-                    : undefined,
-              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: props.chain.id,
-                error: errorMessage,
-                contractType: undefined,
-              });
-            }
-          }}
-          onCancel={(quote) => {
-            reportTokenBuyCancelled({
-              buyTokenChainId:
-                quote?.type === "buy"
-                  ? quote.intent.destinationChainId
-                  : quote?.type === "onramp"
-                    ? quote.intent.chainId
-                    : undefined,
-              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: props.chain.id,
-                contractType: undefined,
-              });
-            }
-          }}
-          onSuccess={(quote) => {
-            reportTokenBuySuccessful({
-              buyTokenChainId:
-                quote.type === "buy"
-                  ? quote.intent.destinationChainId
-                  : quote.type === "onramp"
-                    ? quote.intent.chainId
-                    : undefined,
-              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: props.chain.id,
-                contractType: undefined,
-              });
-            }
-          }}
-          theme={themeObj}
-          tokenAddress={props.tokenAddress as `0x${string}`}
-          paymentMethods={["card"]}
-        />
-      )}
-
-      {tab === "swap" && (
-        <SwapWidget
-          client={client}
-          theme={themeObj}
-          className="!rounded-2xl !border-none"
-          prefill={{
-            // buy this token by default
-            buyToken: {
-              chainId: props.chain.id,
-              tokenAddress: props.tokenAddress,
-            },
-            // sell the native token by default (but if buytoken is a native token, don't set)
-            sellToken: props.tokenAddress
-              ? {
-                  chainId: props.chain.id,
+                if (!buyChainId) {
+                  return;
                 }
-              : undefined,
-          }}
-          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}
-      className={cn(
-        "rounded-full text-muted-foreground px-5 text-base bg-accent",
-        props.isActive && "text-foreground border-foreground",
-      )}
-      variant="outline"
-    >
-      {props.label}
-    </Button>
+                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,
+                  });
+                }
+              },
+            }
+          : 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}
@@ -172,7 +170,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
                     key={key}
                     stackId={props.variant !== "stacked" ? undefined : "a"}
                     stroke={`var(--color-${key})`}
-                    type="natural"
+                    type="monotone"
                   />
                 ),
               )}

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;
@@ -19,60 +18,109 @@ export const Variants: Story = {
 function Component() {
   const title = "This is Title";
   const description =
-    "This is an example of a description about in-app wallet usage chart";
+    "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>
@@ -87,6 +135,7 @@ const authMethodsToPickFrom: InAppWalletAuth[] = [
   "line",
   "x",
   "tiktok",
+  "epic",
   "coinbase",
   "farcaster",
   "telegram",
@@ -110,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/faq-section.tsx

@@ -5,25 +5,20 @@ import { Button } from "@/components/ui/button";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { cn } from "@/lib/utils";
 
-export function FaqSection(props: {
+export function FaqAccordion(props: {
   faqs: Array<{ title: string; description: string }>;
 }) {
   return (
-    <section>
-      <h2 className="text-2xl md:text-3xl font-semibold mb-4 tracking-tight">
-        Frequently asked questions
-      </h2>
-      <div className="flex flex-col">
-        {props.faqs.map((faq, faqIndex) => (
-          <FaqItem
-            key={faq.title}
-            title={faq.title}
-            description={faq.description}
-            className={cn(faqIndex === props.faqs.length - 1 && "border-b-0")}
-          />
-        ))}
-      </div>
-    </section>
+    <div className="flex flex-col">
+      {props.faqs.map((faq, faqIndex) => (
+        <FaqItem
+          key={faq.title}
+          title={faq.title}
+          description={faq.description}
+          className={cn(faqIndex === props.faqs.length - 1 && "border-b-0")}
+        />
+      ))}
+    </div>
   );
 }
 

apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx

@@ -38,11 +38,11 @@ type ShadcnSidebarBaseLink = {
   isActive?: (pathname: string) => boolean;
 };
 
-type ShadcnSidebarLink =
+export type ShadcnSidebarLink =
   | ShadcnSidebarBaseLink
   | {
       group: string;
-      links: ShadcnSidebarBaseLink[];
+      links: ShadcnSidebarLink[];
     }
   | {
       separator: true;
@@ -67,7 +67,7 @@ export function FullWidthSidebarLayout(props: {
       )}
     >
       {/* left - sidebar */}
-      <Sidebar className="pt-2" collapsible="icon" side="left">
+      <Sidebar collapsible="icon" side="left">
         <SidebarContent className="p-2">
           <RenderSidebarMenu links={contentSidebarLinks} />
         </SidebarContent>
@@ -97,10 +97,7 @@ export function FullWidthSidebarLayout(props: {
 
 function MobileSidebarTrigger(props: { links: ShadcnSidebarLink[] }) {
   const activeLink = useActiveShadcnSidebarLink(props.links);
-  const parentSubNav = props.links.find(
-    (link) =>
-      "subMenu" in link && link.links.some((l) => l.href === activeLink?.href),
-  );
+  const parentSubNav = findParentSubmenu(props.links, activeLink?.href);
 
   return (
     <div className="flex items-center gap-3 border-b px-4 py-4 lg:hidden">
@@ -109,7 +106,7 @@ function MobileSidebarTrigger(props: { links: ShadcnSidebarLink[] }) {
         className="h-4 bg-muted-foreground/50"
         orientation="vertical"
       />
-      {parentSubNav && "subMenu" in parentSubNav && (
+      {parentSubNav && (
         <>
           <span className="text-sm">{parentSubNav.subMenu.label}</span>
           <ChevronRightIcon className="size-4 text-muted-foreground/50 -mx-1.5" />
@@ -131,24 +128,65 @@ function useActiveShadcnSidebarLink(links: ShadcnSidebarLink[]) {
       return pathname?.startsWith(link.href);
     }
 
-    for (const link of links) {
-      if ("links" in link) {
-        for (const subLink of link.links) {
-          if (isActive(subLink)) {
-            return subLink;
+    function walk(
+      navLinks: ShadcnSidebarLink[],
+    ): ShadcnSidebarBaseLink | undefined {
+      for (const link of navLinks) {
+        if ("subMenu" in link) {
+          for (const subLink of link.links) {
+            if (isActive(subLink)) {
+              return subLink;
+            }
+          }
+        } else if ("href" in link) {
+          if (isActive(link)) {
+            return link;
           }
         }
-      } else if ("href" in link) {
-        if (isActive(link)) {
-          return link;
+
+        if ("links" in link && !("subMenu" in link)) {
+          const nested = walk(link.links);
+          if (nested) {
+            return nested;
+          }
         }
       }
+
+      return undefined;
     }
+
+    return walk(links);
   }, [links, pathname]);
 
   return activeLink;
 }
 
+function findParentSubmenu(
+  links: ShadcnSidebarLink[],
+  activeHref: string | undefined,
+): Extract<ShadcnSidebarLink, { subMenu: unknown }> | undefined {
+  if (!activeHref) {
+    return undefined;
+  }
+
+  for (const link of links) {
+    if ("subMenu" in link) {
+      if (link.links.some((subLink) => subLink.href === activeHref)) {
+        return link;
+      }
+    }
+
+    if ("links" in link && !("subMenu" in link)) {
+      const nested = findParentSubmenu(link.links, activeHref);
+      if (nested) {
+        return nested;
+      }
+    }
+  }
+
+  return undefined;
+}
+
 function useIsSubnavActive(links: ShadcnSidebarBaseLink[]) {
   const pathname = usePathname();
 

apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx

@@ -66,13 +66,16 @@ export type ProjectPageHeaderProps = {
     href: string;
   };
 
+  className?: string;
   // TODO: add task card component
   task?: never;
 };
 
 export function ProjectPageHeader(props: ProjectPageHeaderProps) {
   return (
-    <header className="container max-w-7xl py-6 relative">
+    <header
+      className={cn("container max-w-7xl py-6 relative", props.className)}
+    >
       {/* top row */}
       <div className="flex justify-between items-start mb-4">
         {/* left - icon */}

apps/dashboard/src/@/components/blocks/project-page/project-page.tsx

@@ -12,18 +12,20 @@ import {
 type ProjectPageProps = {
   header: ProjectPageHeaderProps;
   footer?: ProjectPageFooterProps;
-  /**
-   * @deprecated only for legacy pages where we still need internal tabs for the moment, currently:
-   * - /webhooks
-   */
   tabs?: TabPathLink[];
+  containerClassName?: string;
 };
 
 export function ProjectPage(props: React.PropsWithChildren<ProjectPageProps>) {
   return (
     <div className="flex flex-col grow">
       <div className={cn(!props.tabs && "border-b")}>
-        <ProjectPageHeader {...props.header} />
+        <ProjectPageHeader
+          {...props.header}
+          className={cn(
+            props.tabs && props.tabs.length > 0 ? "pt-8 pb-6" : "py-8",
+          )}
+        />
         {props.tabs && (
           <TabPathLinks
             scrollableClassName="container max-w-7xl"
@@ -32,7 +34,11 @@ export function ProjectPage(props: React.PropsWithChildren<ProjectPageProps>) {
         )}
       </div>
 
-      <main className="container max-w-7xl pt-6">{props.children}</main>
+      <main
+        className={cn("container max-w-7xl pt-6", props.containerClassName)}
+      >
+        {props.children}
+      </main>
       <div className="h-20" />
       {props.footer && (
         <div className="border-t mt-auto">

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/solana-address.tsx

@@ -0,0 +1,83 @@
+"use client";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { useClipboard } from "@/hooks/useClipboard";
+import { cn } from "@/lib/utils";
+
+export function SolanaAddress(props: {
+  address: string;
+  shortenAddress?: boolean;
+  className?: string;
+}) {
+  const shortenedAddress = useMemo(() => {
+    return props.shortenAddress !== false
+      ? `${props.address.slice(0, 4)}...${props.address.slice(-4)}`
+      : props.address;
+  }, [props.address, props.shortenAddress]);
+
+  const lessShortenedAddress = useMemo(() => {
+    return `${props.address.slice(0, 8)}...${props.address.slice(-8)}`;
+  }, [props.address]);
+
+  const { onCopy, hasCopied } = useClipboard(props.address, 2000);
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild tabIndex={-1}>
+        <Button
+          className={cn(
+            "flex flex-row items-center gap-2 px-0",
+            props.className,
+          )}
+          onClick={(e) => e.stopPropagation()}
+          variant="link"
+        >
+          <div className="flex size-5 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-blue-500" />
+          <span className="cursor-pointer font-mono text-sm">
+            {shortenedAddress}
+          </span>
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardContent
+        className="w-80 border-border"
+        onClick={(e) => {
+          // do not close the hover card when clicking anywhere in the content
+          e.stopPropagation();
+        }}
+      >
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="font-semibold text-lg">Solana Public Key</h3>
+            <Button
+              className="flex items-center gap-2"
+              onClick={onCopy}
+              size="sm"
+              variant="outline"
+            >
+              {hasCopied ? (
+                <CheckIcon className="h-4 w-4" />
+              ) : (
+                <CopyIcon className="h-4 w-4" />
+              )}
+              {hasCopied ? "Copied!" : "Copy"}
+            </Button>
+          </div>
+          <p className="break-all rounded bg-muted p-3 text-center font-mono text-xs leading-relaxed">
+            {lessShortenedAddress}
+          </p>
+          <div className="rounded-lg bg-muted/50 p-3">
+            <p className="text-muted-foreground text-xs leading-relaxed">
+              Solana public key for blockchain transactions.
+            </p>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

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/blocks/wallet-address.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
+import type { SocialProfile } from "thirdweb/react";
+import { BadgeContainer, storybookThirdwebClient } from "@/storybook/utils";
+import { WalletAddress, WalletAddressUI } from "./wallet-address";
+
+const meta = {
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  title: "blocks/WalletAddress",
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+function Story() {
+  const client = storybookThirdwebClient as unknown as ThirdwebClient;
+
+  return (
+    <div className="container flex max-w-4xl flex-col gap-8 py-10">
+      <BadgeContainer label="Social Profiles Loaded">
+        <WalletAddressUI
+          address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
+          client={client}
+          profiles={{
+            data: vitalikEth,
+            isPending: false,
+          }}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="No Social Profiles">
+        <WalletAddressUI
+          address="0x83Dd93fA5D8343094f850f90B3fb90088C1bB425"
+          client={client}
+          shortenAddress
+          profiles={{
+            data: [],
+            isPending: false,
+          }}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Loading Social Profiles">
+        <WalletAddressUI
+          address="0x83Dd93fA5D8343094f850f90B3fb90088C1bB425"
+          client={client}
+          shortenAddress
+          profiles={{
+            data: [],
+            isPending: true,
+          }}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Zero address">
+        <WalletAddressUI
+          address={ZERO_ADDRESS}
+          client={client}
+          profiles={{
+            data: [],
+            isPending: false,
+          }}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Real Component - Invalid Address">
+        <WalletAddress address="not-an-address" client={client} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Real Component - vitalik.eth">
+        <WalletAddress
+          address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
+          client={client}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
+
+const vitalikEth: SocialProfile[] = [
+  {
+    type: "ens",
+    name: "vitalik.eth",
+    bio: "mi pinxe lo crino tcati",
+    avatar: "https://euc.li/vitalik.eth",
+    metadata: {
+      name: "vitalik.eth",
+      address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+      avatar: "https://euc.li/vitalik.eth",
+      description: "mi pinxe lo crino tcati",
+      url: "https://vitalik.ca",
+    },
+  },
+  {
+    type: "farcaster",
+    name: "vitalik.eth",
+    bio: undefined,
+    avatar:
+      "https://imagedelivery.net/BXluQx4ige9GuW0Ia56BHw/b663cd63-fecf-4d0f-7f87-0e0b6fd42800/original",
+    metadata: {
+      fid: 5650,
+      bio: undefined,
+      pfp: "https://imagedelivery.net/BXluQx4ige9GuW0Ia56BHw/b663cd63-fecf-4d0f-7f87-0e0b6fd42800/original",
+      username: "vitalik.eth",
+      addresses: [
+        "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+        "0x96B6bB2bd2Eba3b4Fbefd7DbAC448ad7B6CBf279",
+      ],
+    },
+  },
+];

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

@@ -1,11 +1,10 @@
 "use client";
-import { CheckIcon, CircleSlashIcon, CopyIcon, XIcon } from "lucide-react";
+import { CircleSlashIcon, XIcon } from "lucide-react";
 import { useMemo } from "react";
 import { isAddress, type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { Blobbie, type SocialProfile, useSocialProfiles } from "thirdweb/react";
 import { Img } from "@/components/blocks/Img";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   HoverCard,
@@ -13,41 +12,56 @@ import {
   HoverCardTrigger,
 } from "@/components/ui/hover-card";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { useClipboard } from "@/hooks/useClipboard";
 import { cn } from "@/lib/utils";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
+import { CopyTextButton } from "../ui/CopyTextButton";
+import { Skeleton } from "../ui/skeleton";
 
-export function WalletAddress(props: {
+type WalletAddressProps = {
   address: string | undefined;
   shortenAddress?: boolean;
   className?: string;
   iconClassName?: string;
   client: ThirdwebClient;
   fallbackIcon?: React.ReactNode;
-}) {
-  // default back to zero address if no address provided
-  const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
-
-  const [shortenedAddress, lessShortenedAddress] = useMemo(() => {
-    return [
-      props.shortenAddress !== false
-        ? `${address.slice(0, 6)}...${address.slice(-4)}`
-        : address,
-      `${address.slice(0, 14)}...${address.slice(-12)}`,
-    ];
-  }, [address, props.shortenAddress]);
+};
 
+export function WalletAddress(props: WalletAddressProps) {
   const profiles = useSocialProfiles({
-    address: address,
+    address: props.address,
     client: props.client,
   });
 
-  const { onCopy, hasCopied } = useClipboard(address, 2000);
+  return (
+    <WalletAddressUI
+      {...props}
+      profiles={{
+        data: profiles.data || [],
+        isPending: profiles.isPending,
+      }}
+    />
+  );
+}
+
+export function WalletAddressUI(
+  props: WalletAddressProps & {
+    profiles: {
+      data: SocialProfile[];
+      isPending: boolean;
+    };
+  },
+) {
+  const address = props.address || ZERO_ADDRESS;
+
+  const shortenedAddress =
+    props.shortenAddress !== false
+      ? `${address.slice(0, 6)}...${address.slice(-4)}`
+      : address;
 
   if (!isAddress(address)) {
     return (
       <ToolTipLabel hoverable label={address}>
-        <span className="flex items-center gap-2 underline-offset-4 hover:underline">
+        <span className="flex items-center gap-2 underline-offset-4 hover:underline w-fit">
           <div className="flex size-5 items-center justify-center rounded-full border bg-background">
             <XIcon className="size-4 text-muted-foreground" />
           </div>
@@ -78,7 +92,7 @@ export function WalletAddress(props: {
       <HoverCardTrigger asChild tabIndex={-1}>
         <Button
           className={cn(
-            "flex flex-row items-center gap-2 px-0",
+            "flex flex-row items-center gap-2 px-0 max-w-full truncate",
             props.className,
           )}
           onClick={(e) => e.stopPropagation()}
@@ -88,89 +102,82 @@ export function WalletAddress(props: {
             <WalletAvatar
               address={address}
               iconClassName={props.iconClassName}
-              profiles={profiles.data || []}
+              profiles={props.profiles.data}
               thirdwebClient={props.client}
               fallbackIcon={props.fallbackIcon}
             />
           )}
-          <span className="cursor-pointer font-mono">
-            {profiles.data?.[0]?.name || shortenedAddress}
+          <span className="cursor-pointer font-mono max-w-full truncate">
+            {props.profiles.data?.[0]?.name || shortenedAddress}
           </span>
         </Button>
       </HoverCardTrigger>
       <HoverCardContent
-        className="w-80 border-border"
+        className="w-[calc(100vw-2rem)] lg:w-[450px] border-border rounded-xl p-4 lg:p-6"
         onClick={(e) => {
           // do not close the hover card when clicking anywhere in the content
           e.stopPropagation();
         }}
       >
         <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="font-semibold text-lg">Wallet Address</h3>
-            <Button
-              className="flex items-center gap-2"
-              onClick={onCopy}
-              size="sm"
-              variant="outline"
-            >
-              {hasCopied ? (
-                <CheckIcon className="h-4 w-4" />
-              ) : (
-                <CopyIcon className="h-4 w-4" />
-              )}
-              {hasCopied ? "Copied!" : "Copy"}
-            </Button>
-          </div>
-          <p className="rounded bg-muted p-2 text-center font-mono text-sm">
-            {lessShortenedAddress}
-          </p>
-          <h3 className="font-semibold text-lg">Social Profiles</h3>
-          {profiles.isPending ? (
-            <p className="text-muted-foreground text-sm">Loading profiles...</p>
-          ) : !profiles.data?.length ? (
-            <p className="text-muted-foreground text-sm">No profiles found</p>
-          ) : (
-            profiles.data?.map((profile) => {
-              const walletAvatarLink = resolveSchemeWithErrorHandler({
-                client: props.client,
-                uri: profile.avatar,
-              });
+          <div className="space-y-1">
+            <h3 className="font-medium text-sm">Wallet Address</h3>
 
-              return (
-                <div
-                  className="flex flex-row items-center gap-2"
-                  key={profile.type + profile.name}
-                >
-                  {walletAvatarLink && (
-                    <Avatar>
-                      <AvatarImage
-                        alt={profile.name}
-                        className="object-cover"
-                        src={walletAvatarLink}
-                      />
-                      {profile.name && (
-                        <AvatarFallback>
-                          {profile.name.slice(0, 2)}
-                        </AvatarFallback>
-                      )}
-                    </Avatar>
-                  )}
-                  <div className="flex w-full flex-col gap-1">
-                    <div className="flex w-full flex-row items-center justify-between gap-4">
-                      <h4 className="font-semibold text-md">{profile.name}</h4>
-                      <Badge variant="outline">{profile.type}</Badge>
+            <CopyTextButton
+              textToShow={address}
+              textToCopy={address}
+              tooltip="Copy address"
+              copyIconPosition="right"
+              variant="ghost"
+              className="text-muted-foreground -translate-x-1.5"
+            />
+          </div>
+
+          <div className="space-y-1 border-t pt-5 border-dashed">
+            <h3 className="font-medium text-sm">Social Profiles</h3>
+
+            {props.profiles.isPending ? (
+              <Skeleton className="h-4 w-[50%]" />
+            ) : !props.profiles.data?.length ? (
+              <p className="text-muted-foreground text-sm">No profiles found</p>
+            ) : (
+              <div className="!mt-2">
+                {props.profiles.data?.map((profile) => {
+                  const walletAvatarLink = resolveSchemeWithErrorHandler({
+                    client: props.client,
+                    uri: profile.avatar,
+                  });
+
+                  return (
+                    <div
+                      className="flex flex-row items-center gap-3 py-2"
+                      key={profile.type + profile.name}
+                    >
+                      <Avatar className="size-9">
+                        <AvatarImage
+                          alt={profile.name}
+                          className="object-cover"
+                          src={walletAvatarLink}
+                        />
+                        {profile.name && (
+                          <AvatarFallback>
+                            {profile.name.slice(0, 2)}
+                          </AvatarFallback>
+                        )}
+                      </Avatar>
+
+                      <div className="space-y-0.5">
+                        <h4 className="text-sm leading-none">{profile.name}</h4>
+                        <span className="text-muted-foreground text-xs leading-none capitalize">
+                          {profile.type === "ens" ? "ENS" : profile.type}
+                        </span>
+                      </div>
                     </div>
-                    {profile.bio && (
-                      <p className="line-clamp-1 whitespace-normal text-muted-foreground text-sm">
-                        {profile.bio}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              );
-            })
-          )}
+                  );
+                })}
+              </div>
+            )}
+          </div>
         </div>
       </HoverCardContent>
     </HoverCard>

apps/dashboard/src/@/components/connect-wallet/index.tsx

@@ -17,6 +17,7 @@ import { resetAnalytics } from "@/analytics/reset";
 import { CustomChainRenderer } from "@/components/misc/CustomChainRenderer";
 import { LazyConfigureNetworkModal } from "@/components/misc/configure-networks/LazyConfigureNetworkModal";
 import { Button } from "@/components/ui/button";
+import { appMetadata } from "@/constants/connect";
 import { popularChains } from "@/constants/popularChains";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useFavoriteChainIds } from "@/hooks/favorite-chains";
@@ -138,11 +139,7 @@ export const CustomConnectWallet = (props: {
   return (
     <>
       <ConnectButton
-        appMetadata={{
-          logoUrl: "https://thirdweb.com/favicon.ico",
-          name: "thirdweb",
-          url: "https://thirdweb.com",
-        }}
+        appMetadata={appMetadata}
         chain={props.chain}
         chains={allChainsV5}
         client={client}
@@ -280,11 +277,7 @@ export function useCustomConnectModal() {
   return useCallback(
     (options: { chain?: Chain; client: ThirdwebClient }) => {
       return connect({
-        appMetadata: {
-          logoUrl: "https://thirdweb.com/favicon.ico",
-          name: "thirdweb",
-          url: "https://thirdweb.com",
-        },
+        appMetadata,
         chain: options?.chain,
         client: options.client,
         privacyPolicyUrl: "/privacy-policy",

apps/dashboard/src/@/components/contract-components/tables/contract-table.stories.tsx

@@ -62,6 +62,8 @@ function Story() {
             client={storybookThirdwebClient}
             contracts={[]}
             pageSize={10}
+            projectId="project-id"
+            teamId="team-id"
             projectSlug={projectSlug}
             removeContractFromProject={removeContractStub}
             teamSlug={teamSlug}
@@ -74,6 +76,8 @@ function Story() {
             client={storybookThirdwebClient}
             contracts={[popularPolygonNFTs[0] as ProjectContract]}
             pageSize={10}
+            projectId="project-id"
+            teamId="team-id"
             projectSlug={projectSlug}
             removeContractFromProject={removeContractStub}
             teamSlug={teamSlug}
@@ -86,6 +90,8 @@ function Story() {
             client={storybookThirdwebClient}
             contracts={popularPolygonNFTs}
             pageSize={10}
+            projectId="project-id"
+            teamId="team-id"
             projectSlug={projectSlug}
             removeContractFromProject={removeContractStub}
             teamSlug={teamSlug}
@@ -95,6 +101,8 @@ function Story() {
 
         <BadgeContainer label="10 Contracts, 2 chains">
           <ContractTableUI
+            projectId="project-id"
+            teamId="team-id"
             client={storybookThirdwebClient}
             contracts={[...popularPolygonNFTs, ...EthereumPopularNFTs]}
             pageSize={10}
@@ -114,6 +122,8 @@ function Story() {
               ...basePopularTokens,
             ]}
             pageSize={10}
+            projectId="project-id"
+            teamId="team-id"
             projectSlug={projectSlug}
             removeContractFromProject={removeContractStub}
             teamSlug={teamSlug}

apps/dashboard/src/@/components/contract-components/tables/contract-table.tsx

@@ -32,6 +32,8 @@ import { useAllChainsData } from "@/hooks/chains/allChains";
 import { removeContractFromProject } from "@/hooks/project-contracts";
 import { ChainIconClient } from "@/icons/ChainIcon";
 import { cn } from "@/lib/utils";
+import { revalidateCacheTagAction } from "../../../actions/revalidate";
+import { projectContractsCacheTag } from "../../../api/project/cache-tag";
 import {
   ContractNameCell,
   ContractTypeCell,
@@ -57,6 +59,8 @@ export function ContractTable(props: {
       client={props.client}
       contracts={props.contracts}
       pageSize={props.pageSize}
+      projectId={props.projectId}
+      teamId={props.teamId}
       projectSlug={props.projectSlug}
       removeContractFromProject={async (contractId) => {
         await removeContractFromProject({
@@ -77,6 +81,8 @@ export function ContractTableUI(props: {
   removeContractFromProject: (contractId: string) => Promise<void>;
   client: ThirdwebClient;
   variant: "asset" | "contract";
+  teamId: string;
+  projectId: string;
   teamSlug: string;
   projectSlug: string;
 }) {
@@ -243,6 +249,13 @@ export function ContractTableUI(props: {
                     <ContractActionsCell
                       contractId={contract.id}
                       onContractRemoved={() => {
+                        revalidateCacheTagAction(
+                          projectContractsCacheTag({
+                            teamId: props.teamId,
+                            projectId: props.projectId,
+                          }),
+                        );
+
                         setDeletedContractIds((v) => {
                           return [...v, contract.id];
                         });

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/contracts/contract-card/contract-card.tsx

@@ -178,7 +178,7 @@ export async function ContractCard({
           {auditLink && !isBeta && (
             <>
               <Link
-                className="relative z-1 flex items-center gap-1 font-medium text-sm text-success-text hover:underline"
+                className="relative z-10 flex items-center gap-1 font-medium text-sm text-success-text hover:underline"
                 href={auditLink}
                 rel="noopener noreferrer"
                 target="_blank"

apps/dashboard/src/@/components/contracts/import-contract/modal.tsx

@@ -1,11 +1,23 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ArrowDownToLineIcon, ExternalLinkIcon } from "lucide-react";
+import { UnderlineLink } from "@workspace/ui/components/UnderlineLink";
+import {
+  ArrowDownToLineIcon,
+  CircleAlertIcon,
+  ExternalLinkIcon,
+} from "lucide-react";
 import Link from "next/link";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { getAddress, isAddress, type ThirdwebClient } from "thirdweb";
+import {
+  getAddress,
+  getContract,
+  isAddress,
+  type ThirdwebClient,
+} from "thirdweb";
+import { defineChain } from "thirdweb/chains";
 import { useActiveWalletChain } from "thirdweb/react";
 import { z } from "zod";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
@@ -31,6 +43,11 @@ import { Spinner } from "@/components/ui/Spinner";
 import { useChainSlug } from "@/hooks/chains/chainSlug";
 import { useAddContractToProject } from "@/hooks/project-contracts";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { revalidateCacheTagAction } from "../../../actions/revalidate";
+import { projectContractsCacheTag } from "../../../api/project/cache-tag";
+import { resolveFunctionSelectors } from "../../../lib/selectors";
+import { supportedERCs } from "../../../utils/supportedERCs";
+import { Alert, AlertDescription, AlertTitle } from "../../ui/alert";
 
 type ImportModalProps = {
   isOpen: boolean;
@@ -42,6 +59,7 @@ type ImportModalProps = {
   client: ThirdwebClient;
   type: "contract" | "asset";
   onSuccess?: () => void;
+  allowedContractType: "token" | "non-token";
 };
 
 export const ImportModal: React.FC<ImportModalProps> = (props) => {
@@ -75,6 +93,7 @@ export const ImportModal: React.FC<ImportModalProps> = (props) => {
           teamId={props.teamId}
           teamSlug={props.teamSlug}
           type={props.type}
+          allowedContractType={props.allowedContractType}
         />
       </DialogContent>
     </Dialog>
@@ -105,6 +124,7 @@ function ImportForm(props: {
   client: ThirdwebClient;
   type: "contract" | "asset";
   onSuccess?: () => void;
+  allowedContractType: "token" | "non-token";
 }) {
   const router = useDashboardRouter();
   const activeChainId = useActiveWalletChain()?.id;
@@ -119,9 +139,14 @@ function ImportForm(props: {
   const chainSlug = useChainSlug(form.watch("chainId"));
   const addContractToProject = useAddContractToProject();
 
+  const [notAllowedError, setNotAllowedError] = useState(false);
+
   return (
     <Form {...form}>
       <form
+        onChange={() => {
+          setNotAllowedError(false);
+        }}
         onSubmit={form.handleSubmit(async (data) => {
           const { chainId } = data;
           let contractAddress: string;
@@ -158,6 +183,27 @@ function ImportForm(props: {
               return;
             }
 
+            // check if the contract matches the requirement
+            const contract = getContract({
+              address: contractAddress,
+              // eslint-disable-next-line no-restricted-syntax
+              chain: defineChain(chainId),
+              client: props.client,
+            });
+
+            const functionSelectors = await resolveFunctionSelectors(contract);
+            const ercs = supportedERCs(functionSelectors);
+
+            const isToken = ercs.isERC20 || ercs.isERC721 || ercs.isERC1155;
+
+            if (
+              (props.allowedContractType === "token" && !isToken) ||
+              (props.allowedContractType === "non-token" && isToken)
+            ) {
+              setNotAllowedError(true);
+              return;
+            }
+
             addContractToProject.mutate(
               {
                 chainId: chainId.toString(),
@@ -177,6 +223,12 @@ function ImportForm(props: {
                   }
                 },
                 onSuccess: () => {
+                  revalidateCacheTagAction(
+                    projectContractsCacheTag({
+                      teamId: props.teamId,
+                      projectId: props.projectId,
+                    }),
+                  );
                   router.refresh();
                   toast.success("Contract imported successfully");
                   props.onSuccess?.();
@@ -217,6 +269,34 @@ function ImportForm(props: {
           </div>
         </div>
 
+        {notAllowedError && (
+          <div className="px-6 pt-6 text-sm text-destructive-text">
+            <Alert variant="destructive">
+              <CircleAlertIcon className="size-5" />
+              <AlertTitle> Invalid Contract </AlertTitle>
+              <AlertDescription>
+                {props.allowedContractType === "token" && (
+                  <span>
+                    This contract is not a token contract. <br /> Only ERC20,
+                    ERC721 and ERC1155 contracts can be imported as tokens.
+                  </span>
+                )}
+                {props.allowedContractType === "non-token" && (
+                  <span>
+                    This contract is a token contract. <br /> Go to the{" "}
+                    <UnderlineLink
+                      href={`/team/${props.teamSlug}/${props.projectSlug}/tokens`}
+                    >
+                      Tokens
+                    </UnderlineLink>{" "}
+                    page to import in dashboard.
+                  </span>
+                )}
+              </AlertDescription>
+            </Alert>
+          </div>
+        )}
+
         <div className="mt-8 flex justify-end border-t bg-card p-6">
           {addContractToProject.isSuccess &&
           addContractToProject.data?.result ? (

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

@@ -14,6 +14,15 @@ import {
 } from "@/components/ui/select";
 import type { SearchType } from "./types";
 
+const searchTypeLabels: Record<SearchType, string> = {
+  email: "Email",
+  phone: "Phone",
+  id: "Auth Identifier",
+  address: "Address",
+  externalWallet: "External Wallet",
+  userId: "User Identifier",
+};
+
 export function AdvancedSearchInput(props: {
   onSearch: (searchType: SearchType, query: string) => void;
   onClear: () => void;
@@ -46,13 +55,14 @@ export function AdvancedSearchInput(props: {
         value={searchType}
         onValueChange={(value) => setSearchType(value as SearchType)}
       >
-        <SelectTrigger className="w-[140px] bg-card">
+        <SelectTrigger className="w-[140px] bg-background rounded-full">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
           <SelectItem value="email">Email</SelectItem>
           <SelectItem value="phone">Phone</SelectItem>
-          <SelectItem value="id">ID</SelectItem>
+          <SelectItem value="id">Auth Identifier</SelectItem>
+          <SelectItem value="userId">User Identifier</SelectItem>
           <SelectItem value="address">Address</SelectItem>
           <SelectItem value="externalWallet">External Wallet</SelectItem>
         </SelectContent>
@@ -61,8 +71,8 @@ export function AdvancedSearchInput(props: {
       <div className="flex flex-1">
         <div className="relative flex-1">
           <Input
-            className="bg-card pl-9 border-r-0 rounded-r-none"
-            placeholder={`Search by ${searchType}...`}
+            className="bg-background pl-9 border-r-0 rounded-r-none rounded-l-full"
+            placeholder={`Search by ${searchTypeLabels[searchType]}...`}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKeyDown}
@@ -86,7 +96,7 @@ export function AdvancedSearchInput(props: {
           onClick={handleSearch}
           variant="outline"
           disabled={!query.trim() || props.isLoading}
-          className="rounded-l-none gap-2 bg-card disabled:opacity-100"
+          className="rounded-l-none rounded-r-full gap-2 bg-background disabled:opacity-100"
         >
           {props.isLoading && <Spinner className="size-4" />}
           Search

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

@@ -12,18 +12,25 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { CopyTextButton } from "../ui/CopyTextButton";
 
-const getUserIdentifier = (user: WalletUser) => {
+const getAuthIdentifier = (user: WalletUser) => {
   const mainDetail = user.linkedAccounts[0]?.details;
   return (
+    mainDetail?.id ??
     mainDetail?.email ??
     mainDetail?.phone ??
-    mainDetail?.address ??
-    mainDetail?.id ??
-    user.id
+    mainDetail?.address
   );
 };
 
+const truncateIdentifier = (value: string) => {
+  if (value.length <= 18) {
+    return value;
+  }
+  return `${value.slice(0, 8)}...${value.slice(-4)}`;
+};
+
 export function SearchResults(props: {
   results: WalletUser[];
   client: ThirdwebClient;
@@ -51,6 +58,8 @@ export function SearchResults(props: {
         const mainDetail = user.linkedAccounts?.[0]?.details;
         const email = mainDetail?.email as string | undefined;
         const phone = mainDetail?.phone as string | undefined;
+        const authIdentifier = getAuthIdentifier(user);
+        const userIdentifier = user.id;
 
         // Get external wallet addresses from linkedAccounts where type is 'siwe'
         const externalWalletAccounts =
@@ -68,7 +77,34 @@ export function SearchResults(props: {
                   <p className="text-sm font-medium text-muted-foreground">
                     User Identifier
                   </p>
-                  <p className="text-sm">{getUserIdentifier(user)}</p>
+                  {userIdentifier ? (
+                    <CopyTextButton
+                      textToShow={truncateIdentifier(userIdentifier)}
+                      textToCopy={userIdentifier}
+                      tooltip="Copy User Identifier"
+                      copyIconPosition="left"
+                      variant="ghost"
+                    />
+                  ) : (
+                    <p className="text-sm">N/A</p>
+                  )}
+                </div>
+
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">
+                    Auth Identifier
+                  </p>
+                  {authIdentifier ? (
+                    <CopyTextButton
+                      textToShow={truncateIdentifier(authIdentifier)}
+                      textToCopy={authIdentifier}
+                      tooltip="Copy Auth Identifier"
+                      copyIconPosition="left"
+                      variant="ghost"
+                    />
+                  ) : (
+                    <p className="text-sm">N/A</p>
+                  )}
                 </div>
 
                 {walletAddress && (

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

@@ -1,333 +0,0 @@
-"use client";
-
-import { createColumnHelper } from "@tanstack/react-table";
-import { format } from "date-fns";
-import { ArrowLeftIcon, ArrowRightIcon } 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 getUserIdentifier = (accounts: WalletUser["linkedAccounts"]) => {
-  const mainDetail = accounts[0]?.details;
-  return (
-    mainDetail?.email ??
-    mainDetail?.phone ??
-    mainDetail?.address ??
-    mainDetail?.id
-  );
-};
-
-const getExternalWallets = (accounts: WalletUser["linkedAccounts"]) => {
-  return accounts?.filter((account) => account.type === "siwe") || [];
-};
-
-const columnHelper = createColumnHelper<WalletUser>();
-
-export function InAppWalletUsersPageContent(
-  props: {
-    authToken: string;
-    client: ThirdwebClient;
-    teamId: string;
-  } & (
-    | { projectClientId: string; ecosystemSlug?: never }
-    | { ecosystemSlug: string; projectClientId?: never }
-  ),
-) {
-  const columns = useMemo(() => {
-    return [
-      columnHelper.accessor("linkedAccounts", {
-        cell: (cell) => {
-          const identifier = getUserIdentifier(cell.getValue());
-
-          if (!identifier) {
-            return "N/A";
-          }
-
-          return (
-            <CopyTextButton
-              textToShow={
-                identifier.length > 30
-                  ? `${identifier.slice(0, 30)}...`
-                  : identifier
-              }
-              textToCopy={identifier}
-              tooltip="Copy User Identifier"
-              copyIconPosition="left"
-              variant="ghost"
-            />
-          );
-        },
-        enableColumnFilter: true,
-        header: "User Identifier",
-        id: "user_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 externalWallets = getExternalWallets(cell.getValue());
-          if (externalWallets.length === 0) {
-            return <span className="text-muted-foreground text-sm">None</span>;
-          }
-          return (
-            <div className="space-y-1">
-              {externalWallets.slice(0, 2).map((account) => {
-                const address = account.details?.address as string | undefined;
-                return address ? (
-                  <div
-                    key={`external-${address}-${account.details?.id}`}
-                    className="text-xs"
-                  >
-                    <WalletAddress address={address} client={props.client} />
-                  </div>
-                ) : null;
-              })}
-              {externalWallets.length > 2 && (
-                <span className="text-muted-foreground text-xs">
-                  +{externalWallets.length - 2} more
-                </span>
-              )}
-            </div>
-          );
-        },
-        header: "External Wallets",
-        id: "external_wallets",
-      }),
-      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 externalWallets = getExternalWallets(row.linkedAccounts);
-        const externalWalletAddresses = externalWallets
-          .map((account) => account.details?.address)
-          .filter(Boolean)
-          .join(", ");
-
-        return {
-          address: row.wallets[0]?.address || "Uninitialized",
-          created: row.wallets[0]?.createdAt
-            ? new Date(row.wallets[0].createdAt).toISOString()
-            : "Wallet not created yet",
-          external_wallets: externalWalletAddresses || "None",
-          login_methods: row.linkedAccounts.map((acc) => acc.type).join(", "),
-          user_identifier: getUserIdentifier(row.linkedAccounts),
-        };
-      }),
-    );
-    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="flex flex-col gap-4">
-        {/* Top section */}
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col md:flex-row lg:items-center justify-end gap-3">
-            <div className="w-full max-w-lg">
-              <AdvancedSearchInput
-                onSearch={handleSearch}
-                onClear={handleClearSearch}
-                isLoading={isSearching}
-                hasResults={hasSearchResults}
-              />
-            </div>
-            <Button
-              className="gap-2 bg-card"
-              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-b-none"
-                title="in-app wallets"
-              />
-
-              <div className="flex justify-center gap-3 rounded-b-lg border border-t-0 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/searchUsers.ts

@@ -18,10 +18,10 @@ configure({
 type APIWallet = ListUserWalletsResponses[200]["result"]["wallets"][0];
 type APIProfile = APIWallet["profiles"][0];
 
-// Transform API response to match existing WalletUser format
+// Transform API response to match wallet user format
 function transformToWalletUser(apiWallet: APIWallet): WalletUser {
   return {
-    id: getProfileId(apiWallet.profiles[0]) || "",
+    id: apiWallet.userId || getProfileId(apiWallet.profiles[0]) || "",
     linkedAccounts: apiWallet.profiles.map((profile) => {
       // Create details object based on the profile data
       let details:
@@ -105,6 +105,9 @@ export async function searchUsers(
       case "externalWallet":
         queryParams.externalWalletAddress = query;
         break;
+      case "userId":
+        queryParams.userId = query;
+        break;
     }
 
     // Use the generated API function with Bearer authentication

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

@@ -3,4 +3,5 @@ export type SearchType =
   | "phone"
   | "id"
   | "address"
-  | "externalWallet";
+  | "externalWallet"
+  | "userId";

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/misc/AnnouncementBanner.tsx

@@ -44,12 +44,11 @@ function AnnouncementBannerUI(props: {
 }
 
 export function AnnouncementBanner() {
-  // return (
-  //   <AnnouncementBannerUI
-  //     href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
-  //     label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
-  //     trackingLabel="product-rebrand"
-  //   />
-  // );
-  return null;
+  return (
+    <AnnouncementBannerUI
+      href="https://blog.thirdweb.com/changelog/project-view-update-wallets/"
+      label="Transactions, Vault, and Account Abstraction are now part of Wallets in Project Dashboard. View changes"
+      trackingLabel="project-view-update-wallets"
+    />
+  );
 }

apps/dashboard/src/@/components/project/create-project-modal/index.tsx

@@ -64,7 +64,7 @@ const CreateProjectDialog = (props: CreateProjectDialogProps) => {
     <CreateProjectDialogUI
       createProject={async (params) => {
         const res = await createProjectClient(props.teamId, params);
-        await createVaultAccountAndAccessToken({
+        const vaultTokens = await createVaultAccountAndAccessToken({
           project: res.project,
           projectSecretKey: res.secret,
         }).catch((error) => {
@@ -74,6 +74,13 @@ const CreateProjectDialog = (props: CreateProjectDialogProps) => {
           );
           throw error;
         });
+
+        const managementAccessToken = vaultTokens.managementToken?.accessToken;
+
+        if (!managementAccessToken) {
+          throw new Error("Missing management access token for project wallet");
+        }
+
         return {
           project: res.project,
           secret: res.secret,

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

@@ -41,7 +41,7 @@ export function CopyTextButton(props: {
       <Button
         aria-label={props.tooltip}
         className={cn(
-          "flex h-auto w-auto gap-2 rounded-lg px-1.5 py-0.5 font-normal text-foreground",
+          "flex h-auto w-auto gap-2 rounded-lg px-1.5 py-0.5 font-normal text-foreground max-w-full truncate",
           props.className,
         )}
         onClick={(e) => {

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/@/components/ui/link-with-copy-button.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { ArrowUpRightIcon, CheckIcon, CopyIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "./button";
+import { ToolTipLabel } from "./tooltip";
+
+export function LinkWithCopyButton(props: {
+  href: string;
+  textToShow: string;
+  textToCopy: string;
+  copyTooltip: string;
+  className?: string;
+  linkIconClassName?: string;
+}) {
+  const [isCopied, setIsCopied] = useState(false);
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+
+  return (
+    <div className={cn("flex items-center gap-1", props.className)}>
+      <ToolTipLabel label={props.copyTooltip}>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="p-1 h-auto shrink-0 opacity-70 hover:opacity-100 text-muted-foreground"
+          onClick={() => {
+            navigator.clipboard.writeText(props.textToCopy);
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), 1000);
+          }}
+        >
+          <Icon className="size-3" />
+        </Button>
+      </ToolTipLabel>
+      <Link
+        href={props.href}
+        target="_blank"
+        className="text-sm text-muted-foreground hover:underline flex items-center gap-1 tabular-nums flex-1 truncate hover:text-foreground group"
+      >
+        <span className="max-w-full truncate tabular-nums">
+          {props.textToShow}
+        </span>
+        <ArrowUpRightIcon
+          className={cn(
+            "size-3.5 opacity-70 shrink-0 group-hover:opacity-100",
+            props.linkIconClassName,
+          )}
+        />
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+export const appMetadata = {
+  logoUrl: "https://thirdweb.com/favicon.ico",
+  name: "thirdweb",
+  url: "https://thirdweb.com",
+};

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/siwa-example-prompts.ts

@@ -1,5 +1,5 @@
 export const siwaExamplePrompts = [
-  "How do I add in-app wallet with sign in with google to my react app?",
+  "How do I add user wallet with sign in with google to my react app?",
   "How do I send a transaction in Unity?",
   "What does this contract revert error mean?",
   "I see thirdweb support id in my console log, can you help me?",

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/useCsvUpload.ts

@@ -119,12 +119,17 @@ export function useCsvUpload<
       }
       Papa.parse(csv, {
         complete: (results) => {
-          const data = props.csvParser(results.data as T[]);
-          if (!data[0]?.address) {
+          try {
+            const data = props.csvParser(results.data as T[]);
+            if (!data[0]?.address) {
+              setNoCsv(true);
+              return;
+            }
+            setRawData(data);
+          } catch (error) {
+            console.error(error);
             setNoCsv(true);
-            return;
           }
-          setRawData(data);
         },
         header: true,
       });

apps/dashboard/src/@/hooks/useDashboardContractMetadata.tsx

@@ -59,7 +59,10 @@ export async function fetchDashboardContractMetadata(
 
   return {
     contractType: compilerMetadata?.name || "",
-    image: contractMetadata.image || "",
+    image:
+      contractMetadata.image && typeof contractMetadata.image === "string"
+        ? contractMetadata.image
+        : "",
     name: contractName,
     symbol: contractSymbol,
   };

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

@@ -76,10 +76,10 @@ const fetchAccountList = ({
   };
 };
 
-// Transform API response to match existing WalletUser format
+// Transform API response to match the wallet user format
 function transformToWalletUser(apiWallet: APIWallet): WalletUser {
   return {
-    id: getProfileId(apiWallet.profiles[0]) || "",
+    id: apiWallet.userId || getProfileId(apiWallet.profiles[0]) || "",
     linkedAccounts: apiWallet.profiles.map((profile) => {
       // Create details object based on the profile data
       let details:
@@ -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/@/icons/ConnectSDKIcon.tsx

@@ -1,21 +0,0 @@
-export function ConnectSDKIcon(props: { className?: string }) {
-  return (
-    <svg
-      className={props.className}
-      fill="none"
-      height="24"
-      role="presentation"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M16 8.00007V4.50073C16 3.66899 16 3.25312 15.8248 2.99755C15.6717 2.77425 15.4346 2.62257 15.1678 2.57715C14.8623 2.52517 14.4847 2.69944 13.7295 3.04799L4.85901 7.14206C4.18551 7.45291 3.84875 7.60834 3.60211 7.84939C3.38406 8.06249 3.21762 8.32262 3.1155 8.6099C3 8.93486 3 9.30575 3 10.0475V15.0001M16.5 14.5001H16.51M3 11.2001L3 17.8001C3 18.9202 3 19.4802 3.21799 19.9081C3.40973 20.2844 3.71569 20.5903 4.09202 20.7821C4.51984 21.0001 5.07989 21.0001 6.2 21.0001H17.8C18.9201 21.0001 19.4802 21.0001 19.908 20.7821C20.2843 20.5903 20.5903 20.2844 20.782 19.9081C21 19.4802 21 18.9202 21 17.8001V11.2001C21 10.08 21 9.51992 20.782 9.09209C20.5903 8.71577 20.2843 8.40981 19.908 8.21806C19.4802 8.00007 18.9201 8.00007 17.8 8.00007L6.2 8.00007C5.0799 8.00007 4.51984 8.00007 4.09202 8.21806C3.7157 8.40981 3.40973 8.71577 3.21799 9.09209C3 9.51991 3 10.08 3 11.2001ZM17 14.5001C17 14.7762 16.7761 15.0001 16.5 15.0001C16.2239 15.0001 16 14.7762 16 14.5001C16 14.2239 16.2239 14.0001 16.5 14.0001C16.7761 14.0001 17 14.2239 17 14.5001Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-      />
-    </svg>
-  );
-}

apps/dashboard/src/@/icons/NebulaIcon.tsx

@@ -1,24 +0,0 @@
-export function NebulaIcon(props: { className?: string }) {
-  return (
-    <svg
-      className={props.className}
-      fill="none"
-      height="24"
-      role="presentation"
-      viewBox="0 0 153 153"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M76.3162 90.8232C82.4613 90.8232 87.4429 85.8416 87.4429 79.6965C87.4429 73.5514 82.4613 68.5698 76.3162 68.5698C70.171 68.5698 65.1895 73.5514 65.1895 79.6965C65.1895 85.8416 70.171 90.8232 76.3162 90.8232Z"
-        fill="currentColor"
-      />
-      <path
-        clipRule="evenodd"
-        d="M91.9481 29.4892C78.7023 32.4916 63.6745 40.7425 50.4663 53.9508C46.781 57.636 43.4817 61.4629 40.5746 65.3532C44.5585 68.8492 47.0735 73.9786 47.0735 79.6955C47.0735 90.2299 38.5336 98.7698 27.9992 98.7698C27.1107 98.7698 26.2364 98.7091 25.3803 98.5915C23.3955 110.414 25.9579 119.384 31.3537 124.78C37.2202 130.646 47.3123 133.164 60.701 130.129C73.9468 127.126 88.9745 118.875 102.183 105.667C105.888 101.962 109.204 98.1131 112.122 94.2007C108.103 90.7037 105.562 85.551 105.562 79.8048C105.562 69.2704 114.102 60.7305 124.636 60.7305C125.536 60.7305 126.421 60.7928 127.288 60.9133C129.237 49.147 126.674 40.2167 121.295 34.8381C115.429 28.9716 105.337 26.4545 91.9481 29.4892ZM16.3791 94.8229C13.4047 109.493 15.9004 122.818 24.608 131.526C42.6147 149.532 80.3662 140.975 108.928 112.413C113.381 107.96 117.348 103.284 120.803 98.494C122.042 98.7466 123.324 98.8792 124.636 98.8792C135.171 98.8792 143.711 90.3393 143.711 79.8048C143.711 73.6582 140.803 68.1906 136.289 64.7023C139.234 50.0687 136.73 36.7817 128.041 28.0925C110.034 10.0859 72.2829 18.6429 43.7206 47.2051C39.2988 51.627 35.3564 56.2691 31.9179 61.024C30.6531 60.7599 29.3423 60.6211 27.9992 60.6211C17.4647 60.6211 8.9248 69.161 8.9248 79.6955C8.9248 85.8567 11.8461 91.3357 16.3791 94.8229ZM124.636 70.2677C119.369 70.2677 115.099 74.5376 115.099 79.8048C115.099 85.0721 119.369 89.342 124.636 89.342C129.904 89.342 134.174 85.0721 134.174 79.8048C134.174 74.5376 129.904 70.2677 124.636 70.2677ZM18.462 79.6955C18.462 74.4282 22.7319 70.1583 27.9992 70.1583C33.2664 70.1583 37.5363 74.4282 37.5363 79.6955C37.5363 84.9627 33.2664 89.2326 27.9992 89.2326C22.7319 89.2326 18.462 84.9627 18.462 79.6955Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-}

apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx

@@ -0,0 +1,21 @@
+export function ExpoIcon(props: { className?: string }) {
+  return (
+    <svg
+      width="800px"
+      height="800px"
+      viewBox="0 -12.5 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      preserveAspectRatio="xMidYMid"
+      className={props.className}
+      aria-hidden="true"
+    >
+      <g>
+        <path
+          d="M121.309004,84.6732585 C123.402504,81.5874152 125.694292,81.1950171 127.553451,81.1950171 C129.41261,81.1950171 132.509843,81.5874152 134.604162,84.6732585 C151.106348,107.339593 178.345607,152.492 198.439108,185.798721 C211.542532,207.519499 221.6069,224.201947 223.671721,226.324944 C231.422996,234.294992 242.053551,229.327949 248.230809,220.287799 C254.312201,211.387762 256.000111,205.138399 256.000111,198.471155 C256.000111,193.930186 167.895315,30.0714244 159.022317,16.4322117 C150.48936,3.31359639 147.710044,0 133.105527,0 L122.176721,0 C107.615631,0 105.511479,3.31359639 96.9777022,16.4322117 C88.1055238,30.0714244 0.0001105152,193.930186 0.0001105152,198.471155 C0.0001105152,205.138399 1.68839227,211.387762 7.76991495,220.287799 C13.9471241,229.327949 24.5775965,234.294992 32.3286259,226.324944 C34.3936934,224.201947 44.4580605,207.519499 57.5616485,185.798721 C77.654822,152.492 104.806818,107.339593 121.309004,84.6732585 Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}

apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx

@@ -0,0 +1,59 @@
+export function NextjsIcon(props: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      data-testid="geist-icon"
+      strokeLinejoin="round"
+      style={{
+        color: "currentColor",
+      }}
+      viewBox="3 3 10 10"
+      aria-hidden="true"
+      className={props.className}
+    >
+      <g clipPath="url(#clip0_53_108)">
+        <path
+          d="M10.63 11V5"
+          stroke="url(#paint0_linear_53_108vsxrmxu21)"
+          strokeWidth={1.25}
+          strokeMiterlimit={Math.SQRT2}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.995 5.00087V5H4.745V11H5.995V6.96798L12.3615 14.7076C12.712 14.4793 13.0434 14.2242 13.353 13.9453L5.99527 5.00065L5.995 5.00087Z"
+          fill="url(#paint1_linear_53_108vsxrmxu21)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_53_108vsxrmxu21"
+          x1={11.13}
+          y1={5}
+          x2={11.13}
+          y2={11}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="currentColor" />
+          <stop offset={0.609375} stopColor="currentColor" stopOpacity={0.57} />
+          <stop offset={0.796875} stopColor="currentColor" stopOpacity={0} />
+          <stop offset={1} stopColor="currentColor" stopOpacity={0} />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_53_108vsxrmxu21"
+          x1={9.9375}
+          y1={9.0625}
+          x2={13.5574}
+          y2={13.3992}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="currentColor" />
+          <stop offset={1} stopColor="currentColor" stopOpacity={0} />
+        </linearGradient>
+        <clipPath id="clip0_53_108">
+          <rect width={16} height={16} fill="red" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx

@@ -0,0 +1,20 @@
+export function NodeJSIcon(props: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={props.className}
+    >
+      <path
+        d="M17.1725 2.29872C16.4627 1.89953 15.5373 1.90132 14.8269 2.29872C11.2689 4.26227 7.71082 6.22641 4.15216 8.18906C3.45969 8.55335 2.99264 9.29698 3.00009 10.0688V21.9328C2.99509 22.7197 3.48622 23.4705 4.19655 23.8298C5.21871 24.3736 6.2118 24.9726 7.25244 25.4802C8.45451 26.0709 9.95843 26.2015 11.1752 25.5855C12.1629 25.075 12.6016 23.9395 12.6003 22.896C12.6083 18.9806 12.6016 15.0651 12.6034 11.1496C12.6269 10.9756 12.4962 10.7896 12.3064 10.7938C11.8517 10.7866 11.3964 10.7896 10.9417 10.7926C10.7699 10.7764 10.6022 10.9191 10.6152 11.0918C10.6091 14.982 10.6164 18.8734 10.6115 22.7642C10.6214 23.3024 10.2578 23.8196 9.73913 24.0014C8.5412 24.4213 5.12198 22.2012 5.12198 22.2012C4.9965 22.1431 4.91682 22.007 4.92912 21.8718C4.92912 17.9576 4.92973 14.0433 4.92912 10.1297C4.91187 9.97191 5.00912 9.8298 5.15402 9.76538C8.70033 7.8134 12.2448 5.85654 15.7911 3.90336C15.9143 3.82115 16.086 3.8214 16.2089 3.90396C19.7552 5.85654 23.3003 7.81161 26.8472 9.76368C26.9926 9.828 27.0857 9.9725 27.0709 10.1297C27.0703 14.0433 27.0721 17.9576 27.0697 21.8713C27.0802 22.0098 27.0086 22.144 26.8793 22.2048C23.3661 24.1462 19.8129 26.025 16.3315 28.0228C16.1796 28.1099 16.0075 28.2086 15.8373 28.1126C14.9218 27.6062 14.0174 27.0801 13.1049 26.5688C13.0057 26.5069 12.8794 26.4803 12.7759 26.5496C12.3668 26.7652 11.982 26.9398 11.5122 27.1258C10.8524 27.387 10.9578 27.4938 11.5529 27.8405C12.62 28.4444 13.6889 29.0459 14.756 29.6504C15.4585 30.0888 16.4024 30.12 17.1275 29.7149C20.6861 27.7538 24.2436 25.7904 27.8029 23.8293C28.5113 23.468 29.0049 22.7202 28.9999 21.9327V10.0688C29.0068 9.31264 28.5576 8.58227 27.886 8.21259C24.3156 6.23947 20.7435 4.27064 17.1725 2.29872Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22.5419 11.2062C21.1452 10.459 19.4836 10.4192 17.9315 10.5169C16.8102 10.6277 15.6309 10.9371 14.814 11.7409C13.9761 12.5489 13.7937 13.8537 14.1917 14.9085C14.4769 15.6539 15.1948 16.1386 15.9372 16.395C16.8935 16.7326 17.8979 16.837 18.9026 16.9414C19.819 17.0366 20.7357 17.1319 21.6165 17.4042C21.9763 17.5234 22.3953 17.7058 22.5055 18.0973C22.6073 18.5609 22.4957 19.0998 22.1193 19.4219C20.9237 20.3682 17.5979 20.2232 16.4166 19.4784C15.939 19.1611 15.7332 18.5994 15.6495 18.0641C15.6402 17.8973 15.5059 17.7443 15.3248 17.757C14.8713 17.7516 14.4178 17.7528 13.9643 17.7564C13.8061 17.7431 13.6416 17.8557 13.6329 18.0172C13.5397 20.4689 15.7914 21.5377 17.9039 21.773C19.1108 21.888 20.3442 21.8814 21.5327 21.6224C22.4261 21.419 23.3219 21.0444 23.9369 20.3563C24.6953 19.52 24.8444 18.2749 24.5043 17.2332C24.2443 16.4559 23.5012 15.9573 22.7416 15.7008C21.7086 15.3466 20.4844 15.1562 19.5488 15.0671C18.1889 14.9376 16.5729 14.9905 16.188 14.0969C16.0345 13.629 16.1651 13.048 16.5951 12.7602C17.7328 11.9885 20.0483 12.091 21.2265 12.6675C21.7675 12.9384 22.081 13.4948 22.2104 14.0565C22.2344 14.2215 22.3454 14.3937 22.5364 14.3865C22.9868 14.3955 23.4372 14.3889 23.8875 14.3895C24.0422 14.4003 24.2116 14.313 24.2418 14.1546C24.2227 12.9806 23.6232 11.7788 22.5419 11.2062Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx

@@ -0,0 +1,23 @@
+export function ViteIcon(props: { className?: string }) {
+  return (
+    <svg
+      viewBox="-0.5 0 257 257"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      preserveAspectRatio="xMidYMid"
+      aria-hidden="true"
+      className={props.className}
+    >
+      <g>
+        <path
+          d="M255.152904,37.937763 L134.896865,252.97646 C132.413943,257.416178 126.035075,257.442321 123.5149,253.02417 L0.87443175,37.9584812 C-1.87111536,33.1438084 2.24595371,27.3119153 7.70191187,28.2871109 L128.086639,49.8052023 C128.854587,49.9424525 129.640835,49.9411454 130.408783,49.8012155 L248.276014,28.3179595 C253.713738,27.3268821 257.850198,33.1136134 255.152904,37.937763 Z"
+          fill="currentColor"
+        />
+        <path
+          d="M185.432401,0.0631038902 L96.4393502,17.500942 C94.9766549,17.7875335 93.8936852,19.0270992 93.8054529,20.5146956 L88.3311293,112.971419 C88.2023755,115.149123 90.2023075,116.839261 92.3277254,116.349082 L117.10466,110.630976 C119.422882,110.096354 121.517582,112.138114 121.041128,114.469407 L113.67994,150.515893 C113.184532,152.941955 115.462232,155.016394 117.831433,154.29681 L133.134834,149.647295 C135.507302,148.927059 137.786963,151.00738 137.285019,153.435402 L125.586724,210.056351 C124.854723,213.598061 129.565674,215.529368 131.530313,212.49287 L132.842687,210.464834 L205.359174,65.745575 C206.573511,63.3224548 204.479465,60.5594769 201.818118,61.0730542 L176.31441,65.9952397 C173.91776,66.4573155 171.878614,64.2253653 172.555061,61.8805431 L189.2009,4.17570253 C189.878001,1.82692623 187.831665,-0.406957894 185.432401,0.0631038902 Z"
+          fill="hsl(var(--background))"
+        />
+      </g>
+    </svg>
+  );
+}

apps/dashboard/src/@/lib/project-wallet.ts

@@ -0,0 +1,21 @@
+const PROJECT_WALLET_LABEL_SUFFIX = " Wallet";
+const PROJECT_WALLET_LABEL_MAX_LENGTH = 32;
+
+/**
+ * Builds the default label for a project's primary server wallet.
+ * Ensures a stable naming convention so the wallet can be identified across flows.
+ */
+export function getProjectWalletLabel(projectName: string | undefined) {
+  const baseName = projectName?.trim() || "Project";
+  const maxBaseLength = Math.max(
+    1,
+    PROJECT_WALLET_LABEL_MAX_LENGTH - PROJECT_WALLET_LABEL_SUFFIX.length,
+  );
+
+  const normalizedBase =
+    baseName.length > maxBaseLength
+      ? baseName.slice(0, maxBaseLength).trimEnd()
+      : baseName;
+
+  return `${normalizedBase}${PROJECT_WALLET_LABEL_SUFFIX}`;
+}

apps/dashboard/src/@/lib/server/project-wallet.ts

@@ -0,0 +1,99 @@
+import "server-only";
+
+import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
+import type { Project } from "@/api/project/projects";
+import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
+import { getProjectWalletLabel } from "@/lib/project-wallet";
+
+export type ProjectWalletSummary = {
+  id: string;
+  address: string;
+  label?: string;
+};
+
+type VaultWalletListItem = {
+  id: string;
+  address: string;
+  metadata?: {
+    label?: string;
+    projectId?: string;
+    teamId?: string;
+    type?: string;
+  };
+};
+
+export async function getProjectWallet(
+  project: Project,
+): Promise<ProjectWalletSummary | undefined> {
+  const engineCloudService = project.services.find(
+    (service) => service.name === "engineCloud",
+  );
+
+  const managementAccessToken =
+    engineCloudService?.managementAccessToken || undefined;
+  const projectWalletAddress = (
+    engineCloudService as { projectWalletAddress?: string } | undefined
+  )?.projectWalletAddress;
+
+  if (
+    !managementAccessToken ||
+    !NEXT_PUBLIC_THIRDWEB_VAULT_URL ||
+    !projectWalletAddress
+  ) {
+    return undefined;
+  }
+
+  try {
+    const vaultClient = await createVaultClient({
+      baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
+    });
+
+    const response = await listEoas({
+      client: vaultClient,
+      request: {
+        auth: {
+          accessToken: managementAccessToken,
+        },
+        options: {
+          page: 0,
+          // @ts-expect-error - SDK expects snake_case for pagination arguments
+          page_size: 100,
+        },
+      },
+    });
+
+    if (!response.success || !response.data) {
+      return undefined;
+    }
+
+    const items = response.data.items as VaultWalletListItem[] | undefined;
+
+    if (!items?.length) {
+      return undefined;
+    }
+
+    const defaultLabel = getProjectWalletLabel(project.name);
+
+    const serverWallets = items.filter(
+      (item) => item.metadata?.projectId === project.id,
+    );
+
+    const defaultWallet = serverWallets.find(
+      (item) =>
+        item.address.toLowerCase() === projectWalletAddress.toLowerCase(),
+    );
+
+    if (!defaultWallet) {
+      return undefined;
+    }
+
+    return {
+      id: defaultWallet.id,
+      address: defaultWallet.address,
+      label: defaultWallet.metadata?.label ?? defaultLabel,
+    };
+  } catch (error) {
+    console.error("Failed to load project wallet", error);
+    return undefined;
+  }
+}

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,
@@ -248,7 +249,7 @@ export function teamSubscriptionsStub(
           // In-App Wallets
           {
             amount: usage.inAppWalletAmount?.amount || 0,
-            description: `${usage.inAppWalletAmount?.quantity || 0} x In-App Wallets (Tier 1 at $0.00 / month)`,
+            description: `${usage.inAppWalletAmount?.quantity || 0} x User Wallets (Tier 1 at $0.00 / month)`,
             thirdwebSku: "usage:in_app_wallet",
           },
           // AA Sponsorship

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;
@@ -23,6 +27,8 @@ export interface UserOpStats {
   successful: number;
   failed: number;
   sponsoredUsd: number;
+  gasUnits: number;
+  avgGasPrice: number;
   chainId?: string;
 }
 
@@ -33,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;
@@ -94,3 +93,46 @@ export interface AnalyticsQueryParams {
   period?: "day" | "week" | "month" | "year" | "all";
   limit?: number;
 }
+
+export interface X402SettlementsOverall {
+  date: string;
+  totalRequests: number;
+  totalValue: number;
+  totalValueUSD: number;
+}
+
+export interface X402SettlementsByChainId extends X402SettlementsOverall {
+  chainId: string;
+}
+
+export interface X402SettlementsByPayer extends X402SettlementsOverall {
+  payer: string;
+}
+
+interface X402SettlementsByReceiver extends X402SettlementsOverall {
+  receiver: string;
+}
+
+export interface X402SettlementsByResource extends X402SettlementsOverall {
+  resource: string;
+}
+
+interface X402SettlementsByAsset {
+  date: string;
+  asset: string;
+  totalRequests: number;
+  totalValue: number;
+  totalValueUSD: number;
+}
+
+export type X402SettlementStats =
+  | X402SettlementsOverall
+  | X402SettlementsByChainId
+  | X402SettlementsByPayer
+  | X402SettlementsByReceiver
+  | X402SettlementsByResource
+  | X402SettlementsByAsset;
+
+export interface X402QueryParams extends AnalyticsQueryParams {
+  groupBy?: "overall" | "chainId" | "payer" | "resource" | "asset" | "receiver";
+}

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/faucet.ts

@@ -5,6 +5,10 @@ const customClaimAmounts: Record<number, number> = {
   631571: 0.1,
   // Sophon testnet
   531050104: 5,
+  // Arc testnet
+  5042002: 1,
+  // Injective testnet
+  1439: 1,
 };
 
 const defaultClaimAmount = 0.01;

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) => {