Version Packages (#7949)

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

apps/dashboard/.eslintrc.js

@@ -95,6 +95,30 @@ module.exports = {
               'Import "posthog-js" directly only within the analytics helpers ("src/@/analytics/*"). Use the exported helpers from "@/analytics/track" elsewhere.',
             name: "posthog-js",
           },
+          {
+            importNames: ["useSendTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead',
+            name: "thirdweb/react",
+          },
+          {
+            importNames: ["useSendAndConfirmTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead',
+            name: "thirdweb/react",
+          },
+          {
+            importNames: ["sendTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead if used in react component',
+            name: "thirdweb",
+          },
+          {
+            importNames: ["sendAndConfirmTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead if used in react component',
+            name: "thirdweb",
+          },
         ],
         patterns: [
           {

apps/dashboard/.storybook/preview.tsx

@@ -1,14 +1,13 @@
 import type { Preview } from "@storybook/nextjs";
-import "../src/global.css";
+import "@workspace/ui/global.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Button } from "@workspace/ui/components/button";
 import { MoonIcon, SunIcon } from "lucide-react";
-import { ThemeProvider, useTheme } from "next-themes";
 import { Inter as interFont } from "next/font/google";
-// biome-ignore lint/style/useImportType: <explanation>
-import React from "react";
-import { useEffect } from "react";
+import { ThemeProvider, useTheme } from "next-themes";
+// biome-ignore lint/style/useImportType: ok
+import React, { useEffect } from "react";
 import { Toaster } from "sonner";
-import { Button } from "../src/@/components/ui/button";
 
 const queryClient = new QueryClient();
 
@@ -69,9 +68,7 @@ const preview: Preview = {
 
 export default preview;
 
-function StoryLayout(props: {
-  children: React.ReactNode;
-}) {
+function StoryLayout(props: { children: React.ReactNode }) {
   const { setTheme, theme } = useTheme();
 
   useEffect(() => {

apps/dashboard/framer-rewrites.js

@@ -21,8 +21,8 @@ module.exports = [
   "/storage",
   // -- end scale category
 
-  // -- nebula
-  "/nebula",
+  // -- ai
+  "/ai",
   // -- contracts
   "/contracts",
   "/contracts/modular-contracts",

apps/dashboard/knip.json

@@ -10,8 +10,16 @@
   "ignoreDependencies": [
     "@thirdweb-dev/service-utils",
     "@thirdweb-dev/vault-sdk",
+    "thirdweb",
     "@types/color",
-    "fast-xml-parser"
+    "fast-xml-parser",
+    "@workspace/ui",
+    "tailwindcss-animate",
+    "@radix-ui/react-tooltip",
+    "shiki",
+    "react-children-utilities",
+    "react-markdown",
+    "remark-gfm"
   ],
   "next": true,
   "project": ["src/**"]

apps/dashboard/next.config.ts

@@ -115,6 +115,7 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
 const FRAMER_ADDITIONAL_LANGUAGES = ["es"];
 
 const baseNextConfig: NextConfig = {
+  transpilePackages: ["@workspace/ui"],
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -196,7 +197,6 @@ const baseNextConfig: NextConfig = {
       ]),
     ];
   },
-  serverExternalPackages: ["pino-pretty"],
 };
 
 function getConfig(): NextConfig {

apps/dashboard/package.json

@@ -19,7 +19,6 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tooltip": "1.2.7",
-    "@scalar/api-reference-react": "0.7.25",
     "@sentry/nextjs": "9.34.0",
     "@shazow/whatsabi": "0.22.2",
     "@tanstack/react-query": "5.81.5",
@@ -28,6 +27,7 @@
     "@thirdweb-dev/vault-sdk": "workspace:*",
     "@vercel/functions": "2.2.2",
     "@vercel/og": "^0.6.8",
+    "@workspace/ui": "workspace:*",
     "abitype": "1.0.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -43,11 +43,9 @@
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
     "nuqs": "^2.4.3",
-    "p-limit": "^6.2.0",
     "papaparse": "^5.5.3",
     "pluralize": "^8.0.0",
     "posthog-js": "1.256.1",
-    "posthog-node": "^5.4.0",
     "prettier": "3.6.2",
     "react": "19.1.0",
     "react-children-utilities": "^2.10.0",
@@ -62,7 +60,7 @@
     "remark-gfm": "4.0.1",
     "responsive-rsc": "0.0.7",
     "server-only": "^0.0.1",
-    "shiki": "1.27.0",
+    "shiki": "3.12.0",
     "sonner": "2.0.6",
     "spdx-correct": "^3.2.0",
     "stripe": "17.7.0",

apps/dashboard/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {},
-    tailwindcss: {},
-  },
-};

apps/dashboard/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";

apps/dashboard/redirects.js

@@ -460,6 +460,12 @@ async function redirects() {
       permanent: false,
       source: "/universal-bridge",
     },
+    // redirect /nebula to /ai
+    {
+      destination: "/ai",
+      permanent: false,
+      source: "/nebula",
+    },
     ...legacyDashboardToTeamRedirects,
     ...projectPageRedirects,
     ...teamPageRedirects,

apps/dashboard/src/@/analytics/posthog-server.ts

@@ -1,57 +0,0 @@
-import "server-only";
-import { unstable_cache } from "next/cache";
-import { PostHog } from "posthog-node";
-
-let _posthogClient: PostHog | null = null;
-
-function getPostHogServer(): PostHog | null {
-  if (!_posthogClient && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
-    _posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
-      host: "https://us.i.posthog.com",
-    });
-  }
-  return _posthogClient;
-}
-
-/**
- * Check if a feature flag is enabled for a specific user
- * @param flagKey - The feature flag key
- * @param userEmail - The user's email address for filtering
- */
-export const isFeatureFlagEnabled = unstable_cache(
-  async (params: {
-    flagKey: string;
-    accountId: string;
-    email: string | undefined;
-  }): Promise<boolean> => {
-    const posthogClient = getPostHogServer();
-    if (!posthogClient) {
-      console.warn("Posthog client not set");
-      return true;
-    }
-
-    const { flagKey, accountId, email } = params;
-
-    try {
-      if (posthogClient && accountId) {
-        const isEnabled = await posthogClient.isFeatureEnabled(
-          flagKey,
-          accountId,
-          {
-            personProperties: email ? { email } : undefined,
-          },
-        );
-        if (isEnabled !== undefined) {
-          return isEnabled;
-        }
-      }
-    } catch (error) {
-      console.error(`Error checking feature flag ${flagKey}:`, error);
-    }
-    return false;
-  },
-  ["is-feature-flag-enabled"],
-  {
-    revalidate: 3600, // 1 hour
-  },
-);

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

@@ -224,7 +224,11 @@ export function reportChainConfigurationAdded(properties: {
 // ASSETS
 // ----------------------------
 
-type AssetContractType = "DropERC20" | "DropERC1155" | "DropERC721";
+type AssetContractType =
+  | "DropERC20"
+  | "DropERC1155"
+  | "DropERC721"
+  | "ERC20Asset";
 
 /**
  * ### Why do we need to report this event?
@@ -334,6 +338,15 @@ export function reportAssetCreationSuccessful(properties: {
   });
 }
 
+type CoinCreationStep =
+  | "erc20-asset:deploy-contract"
+  | "erc20-asset:airdrop-tokens"
+  | "erc20-asset:approve-airdrop-tokens"
+  | "drop-erc20:deploy-contract"
+  | "drop-erc20:set-claim-conditions"
+  | "drop-erc20:mint-tokens"
+  | "drop-erc20:airdrop-tokens";
+
 /**
  * ### Why do we need to report this event?
  * - To track number of failed asset creations
@@ -355,11 +368,7 @@ export function reportAssetCreationFailed(
       }
     | {
         assetType: "coin";
-        step:
-          | "deploy-contract"
-          | "set-claim-conditions"
-          | "mint-tokens"
-          | "airdrop-tokens";
+        step: CoinCreationStep;
       }
   ),
 ) {
@@ -517,3 +526,24 @@ export function reportTokenUpsellClicked(params: {
 }) {
   posthog.capture("token upsell clicked", params);
 }
+
+// ----------------------------
+// CHAIN INFRASTRUCTURE CHECKOUT
+// ----------------------------
+/**
+ * ### Why do we need to report this event?
+ * - To record explicit user acknowledgement when proceeding to checkout without RPC
+ * - To measure how often customers choose to omit RPC while purchasing Insight and/or Account Abstraction
+ * - To correlate potential support issues arising from missing RPC
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ */
+export function reportChainInfraRpcOmissionAgreed(properties: {
+  chainId: number;
+  frequency: "monthly" | "annual";
+  includeInsight: boolean;
+  includeAccountAbstraction: boolean;
+}) {
+  posthog.capture("chain infra checkout rpc omission agreed", properties);
+}

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

@@ -4,6 +4,7 @@ import { unstable_cache } from "next/cache";
 import { ANALYTICS_SERVICE_URL } from "@/constants/server-envs";
 import { normalizeTime } from "@/lib/time";
 import type {
+  AIUsageStats,
   AnalyticsQueryParams,
   EcosystemWalletStats,
   EngineCloudStats,
@@ -13,9 +14,7 @@ import type {
   UniversalBridgeWalletStats,
   UserOpStats,
   WalletStats,
-  WalletUserStats,
   WebhookLatencyStats,
-  WebhookRequestStats,
   WebhookSummaryStats,
 } from "@/types/analytics";
 import { getChains } from "./chain";
@@ -147,7 +146,13 @@ const cached_getWalletConnections = unstable_cache(
     }
 
     const json = await res.json();
-    return json.data as WalletStats[];
+    return (json.data as WalletStats[]).filter(
+      (w) =>
+        w.walletType !== "smart" &&
+        w.walletType !== "smartWallet" &&
+        w.walletType !== "inApp" &&
+        w.walletType !== "inAppWallet",
+    );
   },
   ["getWalletConnections"],
   {
@@ -200,6 +205,41 @@ export function getInAppWalletUsage(
   return cached_getInAppWalletUsage(normalizedParams(params), authToken);
 }
 
+const cached_getAiUsage = unstable_cache(
+  async (
+    params: AnalyticsQueryParams,
+    authToken: string,
+  ): Promise<AIUsageStats[]> => {
+    const searchParams = buildSearchParams(params);
+    const res = await fetchAnalytics({
+      authToken,
+      url: `v2/nebula/usage?${searchParams.toString()}`,
+      init: {
+        method: "GET",
+      },
+    });
+
+    if (res?.status !== 200) {
+      const reason = await res?.text();
+      console.error(
+        `Failed to fetch AI usage, ${res?.status} - ${res.statusText} - ${reason}`,
+      );
+      return [];
+    }
+
+    const json = await res.json();
+    return json.data as AIUsageStats[];
+  },
+  ["getAiUsage"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
+
+export function getAiUsage(params: AnalyticsQueryParams, authToken: string) {
+  return cached_getAiUsage(normalizedParams(params), authToken);
+}
+
 const cached_getUserOpUsage = unstable_cache(
   async (
     params: AnalyticsQueryParams,
@@ -398,44 +438,6 @@ export function getRpcUsageByType(
   return cached_getRpcUsageByType(normalizedParams(params), authToken);
 }
 
-const cached_getWalletUsers = unstable_cache(
-  async (
-    params: AnalyticsQueryParams,
-    authToken: string,
-  ): Promise<WalletUserStats[]> => {
-    const searchParams = buildSearchParams(params);
-    const res = await fetchAnalytics({
-      authToken,
-      url: `v2/sdk/wallet-connects/users?${searchParams.toString()}`,
-      init: {
-        method: "GET",
-      },
-    });
-
-    if (res?.status !== 200) {
-      const reason = await res?.text();
-      console.error(
-        `Failed to fetch wallet user stats: ${res?.status} - ${res.statusText} - ${reason}`,
-      );
-      return [];
-    }
-
-    const json = await res.json();
-    return json.data as WalletUserStats[];
-  },
-  ["getWalletUsers"],
-  {
-    revalidate: 60 * 60, // 1 hour
-  },
-);
-
-export function getWalletUsers(
-  params: AnalyticsQueryParams,
-  authToken: string,
-) {
-  return cached_getWalletUsers(normalizedParams(params), authToken);
-}
-
 type ActiveStatus = {
   bundler: boolean;
   storage: boolean;
@@ -693,7 +695,7 @@ export function getEngineCloudMethodUsage(
   return cached_getEngineCloudMethodUsage(normalizedParams(params), authToken);
 }
 
-const cached_getWebhookSummary = unstable_cache(
+const _cached_getWebhookSummary = unstable_cache(
   async (
     params: AnalyticsQueryParams & { webhookId: string },
     authToken: string,
@@ -721,51 +723,7 @@ const cached_getWebhookSummary = unstable_cache(
   },
 );
 
-export function getWebhookSummary(
-  params: AnalyticsQueryParams & { webhookId: string },
-  authToken: string,
-) {
-  return cached_getWebhookSummary(normalizedParams(params), authToken);
-}
-
-const cached_getWebhookRequests = unstable_cache(
-  async (
-    params: AnalyticsQueryParams & { webhookId?: string },
-    authToken: string,
-  ): Promise<{ data: WebhookRequestStats[] } | { error: string }> => {
-    const searchParams = buildSearchParams(params);
-    if (params.webhookId) {
-      searchParams.append("webhookId", params.webhookId);
-    }
-
-    const res = await fetchAnalytics({
-      authToken,
-      url: `v2/webhook/requests?${searchParams.toString()}`,
-      init: {
-        method: "GET",
-      },
-    });
-    if (!res.ok) {
-      const reason = await res.text();
-      return { error: reason };
-    }
-
-    return (await res.json()) as { data: WebhookRequestStats[] };
-  },
-  ["getWebhookRequests"],
-  {
-    revalidate: 60 * 60, // 1 hour
-  },
-);
-
-export function getWebhookRequests(
-  params: AnalyticsQueryParams & { webhookId?: string },
-  authToken: string,
-) {
-  return cached_getWebhookRequests(normalizedParams(params), authToken);
-}
-
-const cached_getWebhookLatency = unstable_cache(
+const _cached_getWebhookLatency = unstable_cache(
   async (
     params: AnalyticsQueryParams & { webhookId?: string },
     authToken: string,
@@ -795,13 +753,6 @@ const cached_getWebhookLatency = unstable_cache(
   },
 );
 
-export function getWebhookLatency(
-  params: AnalyticsQueryParams & { webhookId?: string },
-  authToken: string,
-) {
-  return cached_getWebhookLatency(normalizedParams(params), authToken);
-}
-
 const cached_getInsightChainUsage = unstable_cache(
   async (
     params: AnalyticsQueryParams,

apps/dashboard/src/@/api/insight/webhooks.ts

@@ -58,6 +58,7 @@ interface WebhookSingleResponse {
 }
 
 interface TestWebhookPayload {
+  webhook_id?: string;
   webhook_url: string;
   type?: "event" | "transaction";
 }

apps/dashboard/src/@/api/project/webhook-configs.ts

@@ -1,362 +0,0 @@
-"use server";
-
-import { getAuthToken } from "@/api/auth-token";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-
-export interface WebhookConfig {
-  id: string;
-  teamId: string;
-  projectId: string;
-  destinationUrl: string;
-  description: string;
-  pausedAt: string | null;
-  webhookSecret: string;
-  createdAt: string;
-  updatedAt: string;
-  deletedAt: string | null;
-  topics: {
-    id: string;
-    serviceName: string;
-    description: string;
-    createdAt: string;
-    updatedAt: string;
-    deletedAt: string | null;
-    filters: object | null;
-  }[];
-}
-
-type WebhookConfigsResponse =
-  | {
-      data: WebhookConfig[];
-      status: "success";
-    }
-  | {
-      body: string;
-      reason: string;
-      status: "error";
-    };
-
-interface CreateWebhookConfigRequest {
-  topicIdsWithFilters: { id: string; filters: object | null }[];
-  destinationUrl: string;
-  description: string;
-  isPaused?: boolean;
-}
-
-type CreateWebhookConfigResponse =
-  | {
-      data: WebhookConfig;
-      status: "success";
-    }
-  | {
-      body: string;
-      reason: string;
-      status: "error";
-    };
-
-export interface Topic {
-  id: string;
-  serviceName: string;
-  description: string;
-  createdAt: string;
-  updatedAt: string;
-  deletedAt: string | null;
-}
-
-type TopicsResponse =
-  | {
-      data: Topic[];
-      status: "success";
-    }
-  | {
-      body: string;
-      reason: string;
-      status: "error";
-    };
-
-interface UpdateWebhookConfigRequest {
-  destinationUrl?: string;
-  topicIdsWithFilters?: { id: string; filters: object | null }[];
-  description?: string;
-  isPaused?: boolean;
-}
-
-type UpdateWebhookConfigResponse =
-  | {
-      data: WebhookConfig;
-      status: "success";
-    }
-  | {
-      body: string;
-      reason: string;
-      status: "error";
-    };
-
-type DeleteWebhookConfigResponse =
-  | {
-      data: WebhookConfig;
-      status: "success";
-    }
-  | {
-      body: string;
-      reason: string;
-      status: "error";
-    };
-
-export async function getWebhookConfigs(props: {
-  teamIdOrSlug: string;
-  projectIdOrSlug: string;
-}): Promise<WebhookConfigsResponse> {
-  const authToken = await getAuthToken();
-
-  if (!authToken) {
-    return {
-      body: "Authentication required",
-      reason: "no_auth_token",
-      status: "error",
-    };
-  }
-
-  const response = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${props.teamIdOrSlug}/projects/${props.projectIdOrSlug}/webhook-configs`,
-    {
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
-      },
-      method: "GET",
-    },
-  );
-
-  if (!response.ok) {
-    const body = await response.text();
-    return {
-      body,
-      reason: "unknown",
-      status: "error",
-    };
-  }
-
-  const result = await response.json();
-  return {
-    data: result.data,
-    status: "success",
-  };
-}
-
-export async function createWebhookConfig(props: {
-  teamIdOrSlug: string;
-  projectIdOrSlug: string;
-  config: CreateWebhookConfigRequest;
-}): Promise<CreateWebhookConfigResponse> {
-  const authToken = await getAuthToken();
-
-  if (!authToken) {
-    return {
-      body: "Authentication required",
-      reason: "no_auth_token",
-      status: "error",
-    };
-  }
-
-  const response = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${props.teamIdOrSlug}/projects/${props.projectIdOrSlug}/webhook-configs`,
-    {
-      body: JSON.stringify(props.config),
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-    },
-  );
-
-  if (!response.ok) {
-    const body = await response.text();
-    return {
-      body,
-      reason: "unknown",
-      status: "error",
-    };
-  }
-
-  const result = await response.json();
-  return {
-    data: result.data,
-    status: "success",
-  };
-}
-
-export async function getAvailableTopics(): Promise<TopicsResponse> {
-  const authToken = await getAuthToken();
-
-  if (!authToken) {
-    return {
-      body: "Authentication required",
-      reason: "no_auth_token",
-      status: "error",
-    };
-  }
-
-  const response = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/webhook-topics`,
-    {
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
-      },
-      method: "GET",
-    },
-  );
-
-  if (!response.ok) {
-    const body = await response.text();
-    return {
-      body,
-      reason: "unknown",
-      status: "error",
-    };
-  }
-
-  const result = await response.json();
-  return {
-    data: result.data,
-    status: "success",
-  };
-}
-
-export async function updateWebhookConfig(props: {
-  teamIdOrSlug: string;
-  projectIdOrSlug: string;
-  webhookConfigId: string;
-  config: UpdateWebhookConfigRequest;
-}): Promise<UpdateWebhookConfigResponse> {
-  const authToken = await getAuthToken();
-
-  if (!authToken) {
-    return {
-      body: "Authentication required",
-      reason: "no_auth_token",
-      status: "error",
-    };
-  }
-
-  const response = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${props.teamIdOrSlug}/projects/${props.projectIdOrSlug}/webhook-configs/${props.webhookConfigId}`,
-    {
-      body: JSON.stringify(props.config),
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
-      },
-      method: "PATCH",
-    },
-  );
-
-  if (!response.ok) {
-    const body = await response.text();
-    return {
-      body,
-      reason: "unknown",
-      status: "error",
-    };
-  }
-
-  const result = await response.json();
-  return {
-    data: result.data,
-    status: "success",
-  };
-}
-
-export async function deleteWebhookConfig(props: {
-  teamIdOrSlug: string;
-  projectIdOrSlug: string;
-  webhookConfigId: string;
-}): Promise<DeleteWebhookConfigResponse> {
-  const authToken = await getAuthToken();
-
-  if (!authToken) {
-    return {
-      body: "Authentication required",
-      reason: "no_auth_token",
-      status: "error",
-    };
-  }
-
-  const response = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${props.teamIdOrSlug}/projects/${props.projectIdOrSlug}/webhook-configs/${props.webhookConfigId}`,
-    {
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
-      },
-      method: "DELETE",
-    },
-  );
-
-  if (!response.ok) {
-    const body = await response.text();
-    return {
-      body,
-      reason: "unknown",
-      status: "error",
-    };
-  }
-
-  const result = await response.json();
-  return {
-    data: result.data,
-    status: "success",
-  };
-}
-
-type TestDestinationUrlResponse =
-  | {
-      result: {
-        httpStatusCode: number;
-        httpResponseBody: string;
-      };
-      status: "success";
-    }
-  | {
-      body: string;
-      reason: string;
-      status: "error";
-    };
-
-export async function testDestinationUrl(props: {
-  teamIdOrSlug: string;
-  projectIdOrSlug: string;
-  destinationUrl: string;
-}): Promise<TestDestinationUrlResponse> {
-  const authToken = await getAuthToken();
-
-  if (!authToken) {
-    return {
-      body: "Authentication required",
-      reason: "no_auth_token",
-      status: "error",
-    };
-  }
-
-  const resp = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${props.teamIdOrSlug}/projects/${props.projectIdOrSlug}/webhook-configs/test-destination-url`,
-    {
-      body: JSON.stringify({ destinationUrl: props.destinationUrl }),
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-    },
-  );
-  if (!resp.ok) {
-    return {
-      body: await resp.text(),
-      reason: "unknown",
-      status: "error",
-    };
-  }
-  return await resp.json();
-}

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

@@ -12,6 +12,7 @@ export type AuthOption =
   | "google"
   | "facebook"
   | "x"
+  | "tiktok"
   | "discord"
   | "farcaster"
   | "telegram"

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

@@ -0,0 +1,35 @@
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
+import { UB_BASE_URL } from "./constants";
+import type { TokenMetadata } from "./types";
+
+export async function getUniversalBridgeTokens(props: {
+  chainId?: number;
+  address?: string;
+}) {
+  const url = new URL(`${UB_BASE_URL}/v1/tokens`);
+
+  if (props.chainId) {
+    url.searchParams.append("chainId", String(props.chainId));
+  }
+  if (props.address) {
+    url.searchParams.append("tokenAddress", props.address);
+  }
+  url.searchParams.append("limit", "1000");
+  url.searchParams.append("includePrices", "false");
+
+  const res = await fetch(url.toString(), {
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
+    } as Record<string, string>,
+    method: "GET",
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Array<TokenMetadata>;
+}

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

@@ -1,48 +1,8 @@
 "use server";
 import type { ProjectResponse } from "@thirdweb-dev/service-utils";
 import { getAuthToken } from "@/api/auth-token";
-import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { UB_BASE_URL } from "./constants";
-
-export type TokenMetadata = {
-  name: string;
-  symbol: string;
-  address: string;
-  decimals: number;
-  chainId: number;
-  iconUri?: string;
-};
-
-export async function getUniversalBridgeTokens(props: {
-  chainId?: number;
-  address?: string;
-}) {
-  const url = new URL(`${UB_BASE_URL}/v1/tokens`);
-
-  if (props.chainId) {
-    url.searchParams.append("chainId", String(props.chainId));
-  }
-  if (props.address) {
-    url.searchParams.append("tokenAddress", props.address);
-  }
-  url.searchParams.append("limit", "1000");
-
-  const res = await fetch(url.toString(), {
-    headers: {
-      "Content-Type": "application/json",
-      "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
-    } as Record<string, string>,
-    method: "GET",
-  });
-
-  if (!res.ok) {
-    const text = await res.text();
-    throw new Error(text);
-  }
-
-  const json = await res.json();
-  return json.data as Array<TokenMetadata>;
-}
+import type { TokenMetadata } from "./types";
 
 export async function addUniversalBridgeTokenRoute(props: {
   chainId: number;

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

@@ -0,0 +1,8 @@
+export type TokenMetadata = {
+  name: string;
+  symbol: string;
+  address: string;
+  decimals: number;
+  chainId: number;
+  iconUri?: string;
+};

apps/dashboard/src/@/components/analytics/date-range-selector.tsx

@@ -86,7 +86,9 @@ export function getLastNDaysRange(id: DurationId) {
     throw new Error(`Invalid duration id: ${id}`);
   }
 
-  const todayDate = new Date(Date.now());
+  const todayDate = new Date();
+  todayDate.setDate(todayDate.getDate() + 1); // Move to next day
+  todayDate.setHours(0, 0, 0, 0); // Set to start of next day (00:00)
 
   const value: Range = {
     from: subDays(todayDate, durationInfo.days),

apps/dashboard/src/@/components/analytics/responsive-time-filters.tsx

@@ -22,7 +22,7 @@ export function ResponsiveTimeFilters(props: { defaultRange: DurationId }) {
   });
 
   return (
-    <div className="flex justify-end gap-3 flex-col lg:flex-row">
+    <div className="flex gap-3 flex-row">
       <DateRangeSelector
         className="rounded-full"
         range={range}

apps/dashboard/src/@/components/billing/renew-subscription-button.tsx

@@ -7,7 +7,7 @@ import { toast } from "sonner";
 import { reSubscribePlan } from "@/actions/billing";
 import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { pollWithTimeout } from "@/utils/pollWithTimeout";
 import { tryCatch } from "@/utils/try-catch";

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

@@ -10,7 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "../../lib/utils";
 import { DynamicHeight } from "../ui/DynamicHeight";
 

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

@@ -3,7 +3,7 @@ import { DownloadIcon } from "lucide-react";
 import Papa from "papaparse";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "../../lib/utils";
 
 export function ExportToCSVButton(props: {

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

@@ -1,87 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 "use client";
-import { useRef, useState } from "react";
-import { cn } from "@/lib/utils";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 
-type imgElementProps = React.DetailedHTMLProps<
-  React.ImgHTMLAttributes<HTMLImageElement>,
-  HTMLImageElement
-> & {
-  skeleton?: React.ReactNode;
-  fallback?: React.ReactNode;
-  src: string | undefined;
-  containerClassName?: string;
-};
-
-export function Img(props: imgElementProps) {
-  const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
-    "pending",
-  );
-  const status =
-    props.src === undefined
-      ? "pending"
-      : props.src === ""
-        ? "fallback"
-        : _status;
-  const { className, fallback, skeleton, containerClassName, ...restProps } =
-    props;
-  const defaultSkeleton = <div className="animate-pulse bg-accent" />;
-  const defaultFallback = <div className="bg-accent" />;
-  const imgRef = useRef<HTMLImageElement>(null);
-
-  useIsomorphicLayoutEffect(() => {
-    const imgEl = imgRef.current;
-    if (!imgEl) {
-      return;
-    }
-    if (imgEl.complete) {
-      setStatus("loaded");
-    } else {
-      function handleLoad() {
-        setStatus("loaded");
-      }
-      imgEl.addEventListener("load", handleLoad);
-      return () => {
-        imgEl.removeEventListener("load", handleLoad);
-      };
-    }
-  }, []);
-
-  return (
-    <div className={cn("relative shrink-0", containerClassName)}>
-      <img
-        {...restProps}
-        // avoid setting empty src string to prevent request to the entire page
-        alt={restProps.alt || ""}
-        className={cn(
-          "fade-in-0 object-cover transition-opacity duration-300",
-          className,
-        )}
-        decoding="async"
-        onError={() => {
-          setStatus("fallback");
-        }}
-        ref={imgRef}
-        src={restProps.src || undefined}
-        style={{
-          opacity: status === "loaded" ? 1 : 0,
-          ...restProps.style,
-        }}
-      />
-
-      {status !== "loaded" && (
-        <div
-          className={cn(
-            "fade-in-0 absolute inset-0 overflow-hidden transition-opacity duration-300 [&>*]:h-full [&>*]:w-full",
-            className,
-          )}
-          style={restProps.style}
-        >
-          {status === "pending" && (skeleton || defaultSkeleton)}
-          {status === "fallback" && (fallback || defaultFallback)}
-        </div>
-      )}
-    </div>
-  );
-}
+export { Img } from "@workspace/ui/components/img";

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

@@ -29,16 +29,18 @@ export function MultiNetworkSelector(props: {
   client: ThirdwebClient;
   chainIds?: number[];
 }) {
-  let { allChains, idToChain } = useAllChainsData();
-
-  if (props.chainIds && props.chainIds.length > 0) {
-    allChains = allChains.filter((chain) =>
-      props.chainIds?.includes(chain.chainId),
-    );
-  }
+  const { allChains, idToChain } = useAllChainsData();
 
   const options = useMemo(() => {
-    let sortedChains = allChains;
+    let chains = allChains.filter((chain) => chain.status !== "deprecated");
+
+    if (props.chainIds && props.chainIds.length > 0) {
+      chains = allChains.filter((chain) =>
+        props.chainIds?.includes(chain.chainId),
+      );
+    }
+
+    let sortedChains = chains;
 
     if (props.priorityChains) {
       const priorityChainsSet = new Set();
@@ -69,7 +71,13 @@ export function MultiNetworkSelector(props: {
         value: String(chain.chainId),
       };
     });
-  }, [allChains, props.priorityChains, idToChain, props.hideTestnets]);
+  }, [
+    allChains,
+    props.priorityChains,
+    idToChain,
+    props.hideTestnets,
+    props.chainIds,
+  ]);
 
   const searchFn = useCallback(
     (option: Option, searchValue: string) => {
@@ -155,16 +163,38 @@ export function SingleNetworkSelector(props: {
   disableDeprecated?: boolean;
   placeholder?: string;
   client: ThirdwebClient;
+  priorityChains?: number[];
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
   const chainsToShow = useMemo(() => {
     let chains = allChains;
 
+    chains = chains.filter((chain) => chain.status !== "deprecated");
+
     if (props.disableTestnets) {
       chains = chains.filter((chain) => !chain.testnet);
     }
 
+    if (props.priorityChains) {
+      const priorityChainsSet = new Set();
+      for (const chainId of props.priorityChains || []) {
+        priorityChainsSet.add(chainId);
+      }
+
+      const priorityChains = (props.priorityChains || [])
+        .map((chainId) => {
+          return idToChain.get(chainId);
+        })
+        .filter((v) => !!v);
+
+      const otherChains = allChains.filter(
+        (chain) => !priorityChainsSet.has(chain.chainId),
+      );
+
+      chains = [...priorityChains, ...otherChains];
+    }
+
     if (props.chainIds) {
       const chainIdSet = new Set(props.chainIds);
       chains = chains.filter((chain) => chainIdSet.has(chain.chainId));
@@ -180,6 +210,8 @@ export function SingleNetworkSelector(props: {
     props.chainIds,
     props.disableTestnets,
     props.disableDeprecated,
+    props.priorityChains,
+    idToChain,
   ]);
 
   const options = useMemo(() => {

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

@@ -1,6 +1,6 @@
 import type React from "react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
 
 export function RouteDiscoveryCard(

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

@@ -1,6 +1,6 @@
 import type React from "react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
 
 export function SettingsCard(

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

@@ -19,7 +19,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Separator } from "@/components/ui/separator";
 import {
   Table,

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

@@ -5,16 +5,16 @@ import {
   type ThirdwebClient,
 } from "thirdweb";
 import { shortenAddress } from "thirdweb/utils";
-import type { TokenMetadata } from "@/api/universal-bridge/tokens";
+import type { TokenMetadata } from "@/api/universal-bridge/types";
 import { Img } from "@/components/blocks/Img";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/Spinner";
 import { fallbackChainIcon } from "@/constants/chain";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useTokensData } from "@/hooks/tokens";
 import { cn } from "@/lib/utils";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
-import { Spinner } from "../ui/Spinner/Spinner";
 
 type Option = { label: string; value: string };
 
@@ -204,7 +204,7 @@ export function TokenSelector(props: {
       searchPlaceholder="Search by name or symbol"
       showCheck={props.showCheck}
       side={props.side}
-      value={selectedValue}
+      value={tokensQuery.isPending ? undefined : selectedValue}
     />
   );
 }

apps/dashboard/src/@/components/blocks/distribution-chart.tsx

@@ -3,12 +3,15 @@ import { cn } from "@/lib/utils";
 export type Segment = {
   label: string;
   percent: number;
+  value: string;
   color: string;
 };
 
 type DistributionBarChartProps = {
   segments: Segment[];
-  title: string;
+  title?: string;
+  titleClassName?: string;
+  barClassName?: string;
 };
 
 export function DistributionBarChart(props: DistributionBarChartProps) {
@@ -21,24 +24,36 @@ export function DistributionBarChart(props: DistributionBarChartProps) {
 
   return (
     <div>
-      <div className="mb-2 flex items-center justify-between">
-        <h3 className="font-medium text-sm">{props.title}</h3>
-        <div
-          className={cn(
-            "font-medium text-muted-foreground text-sm",
-            invalidTotalPercentage && "text-red-500",
-          )}
-        >
-          Total: {totalPercentage}%
+      {props.title && (
+        <div className="mb-2 flex items-center justify-between">
+          <h3 className={cn("font-medium text-sm", props.titleClassName)}>
+            {props.title}
+          </h3>
+          <div
+            className={cn(
+              "font-medium text-muted-foreground text-sm",
+              invalidTotalPercentage && "text-red-500",
+            )}
+          >
+            Total: {totalPercentage}%
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Bar */}
-      <div className="flex h-3 overflow-hidden rounded-lg">
+      <div
+        className={cn(
+          "flex h-3 overflow-hidden rounded-lg",
+          props.barClassName,
+        )}
+      >
         {props.segments.map((segment) => {
           return (
             <div
-              className="flex h-full items-center justify-center transition-all duration-200"
+              className={cn(
+                "flex h-full items-center justify-center transition-all duration-200",
+                segment.percent > 0 && "border-r-2 border-background",
+              )}
               key={segment.label}
               style={{
                 backgroundColor: segment.color,
@@ -67,7 +82,7 @@ export function DistributionBarChart(props: DistributionBarChartProps) {
                     "text-destructive-text",
                 )}
               >
-                {segment.label}: {segment.percent}%
+                {segment.label}: {segment.value}
               </p>
             </div>
           );

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

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { ScrollShadow } from "@/components/ui/ScrollShadow";
 
 export function UnexpectedValueErrorMessage(props: {
   value: unknown;

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

@@ -91,7 +91,7 @@ export function FullWidthSidebarLayout(props: {
         <main className="flex min-w-0 grow flex-col max-sm:w-full">
           {children}
         </main>
-        <AppFooter containerClassName="max-w-7xl" />
+        <AppFooter />
       </div>
     </div>
   );

apps/dashboard/src/@/components/blocks/markdown-renderer.tsx

@@ -1,225 +1 @@
-import { onlyText } from "react-children-utilities";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { CodeClient } from "@/components/ui/code/code.client";
-import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
-import { InlineCode } from "@/components/ui/inline-code";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
-import { cn } from "@/lib/utils";
-
-export const MarkdownRenderer: React.FC<{
-  markdownText: string;
-  className?: string;
-  code?: {
-    disableCodeHighlight?: boolean;
-    ignoreFormattingErrors?: boolean;
-    className?: string;
-  };
-  inlineCode?: {
-    className?: string;
-  };
-  p?: {
-    className?: string;
-  };
-  li?: {
-    className?: string;
-  };
-  skipHtml?: boolean;
-}> = (markdownProps) => {
-  const { markdownText, className, code } = markdownProps;
-  const commonHeadingClassName = "mb-2 leading-5 font-semibold tracking-tight";
-
-  return (
-    <div className={className}>
-      <ReactMarkdown
-        components={{
-          a: (props) => (
-            <UnderlineLink
-              href={props.href ?? "#"}
-              rel="noopener noreferrer"
-              target="_blank"
-              {...cleanedProps(props)}
-              className="mt-4"
-            />
-          ),
-
-          code: ({ ...props }) => {
-            const codeStr = onlyText(props.children);
-
-            if (props?.className || codeStr.length > 100) {
-              if (code?.disableCodeHighlight || !props.className) {
-                return (
-                  <div className="my-4">
-                    {/* @ts-expect-error - TODO: fix this */}
-                    <PlainTextCodeBlock
-                      {...cleanedProps(props)}
-                      className={markdownProps.code?.className}
-                      code={onlyText(props.children).trim()}
-                    />
-                  </div>
-                );
-              }
-              const language = props.className.replace("language-", "");
-              return (
-                <div className="my-4">
-                  <CodeClient
-                    // @ts-expect-error - TODO: fix this
-                    lang={language}
-                    {...cleanedProps(props)}
-                    className={markdownProps.code?.className}
-                    code={onlyText(props.children).trim()}
-                    ignoreFormattingErrors={code?.ignoreFormattingErrors}
-                  />
-                </div>
-              );
-            }
-
-            return (
-              <InlineCode
-                className={markdownProps.inlineCode?.className}
-                code={onlyText(props.children).trim()}
-              />
-            );
-          },
-          h1: (props) => (
-            <h2
-              className={cn(
-                commonHeadingClassName,
-                "mb-3 border-dashed border-b pb-2 text-xl md:text-2xl",
-              )}
-              {...cleanedProps(props)}
-            />
-          ),
-
-          h2: (props) => (
-            <h3
-              {...cleanedProps(props)}
-              className={cn(
-                commonHeadingClassName,
-                "mt-8 mb-3 border-dashed border-b pb-2 text-lg md:text-xl",
-              )}
-            />
-          ),
-
-          h3: (props) => (
-            <h4
-              {...cleanedProps(props)}
-              className={cn(
-                commonHeadingClassName,
-                "mt-4 text-base md:text-lg",
-              )}
-            />
-          ),
-
-          h4: (props) => (
-            <h5
-              {...cleanedProps(props)}
-              className={cn(commonHeadingClassName, "mt-4 text-lg")}
-            />
-          ),
-
-          h5: (props) => (
-            <h6
-              {...cleanedProps(props)}
-              className={cn(commonHeadingClassName, "mt-4 text-lg")}
-            />
-          ),
-
-          h6: (props) => (
-            <p
-              {...cleanedProps(props)}
-              className={cn(commonHeadingClassName, "mt-4 text-lg")}
-            />
-          ),
-
-          hr: (props) => (
-            <hr {...cleanedProps(props)} className="my-5 bg-border" />
-          ),
-          li: ({ children: c, ...props }) => (
-            <li
-              className={cn(
-                "text-muted-foreground leading-relaxed [&>p]:m-0",
-                markdownProps.li?.className,
-              )}
-              {...cleanedProps(props)}
-            >
-              {c}
-            </li>
-          ),
-          ol: (props) => (
-            <ol
-              className="mb-4 list-outside list-decimal pl-4 space-y-2 [&>li]:first:mt-2"
-              {...cleanedProps(props)}
-            />
-          ),
-
-          p: (props) => (
-            <p
-              className={cn(
-                "mb-3 text-muted-foreground leading-7",
-                markdownProps.p?.className,
-              )}
-              {...cleanedProps(props)}
-            />
-          ),
-          strong(props) {
-            return <strong className="font-medium" {...cleanedProps(props)} />;
-          },
-
-          table: (props) => (
-            <div className="mb-6">
-              <TableContainer>
-                <Table {...cleanedProps(props)} />
-              </TableContainer>
-            </div>
-          ),
-          tbody: (props) => <TableBody {...cleanedProps(props)} />,
-
-          td: (props) => (
-            <TableCell {...cleanedProps(props)} className="text-left" />
-          ),
-
-          th: ({ children: c, ...props }) => (
-            <TableHead
-              {...cleanedProps(props)}
-              className="text-left text-muted-foreground"
-            >
-              {c}
-            </TableHead>
-          ),
-          thead: (props) => <TableHeader {...cleanedProps(props)} />,
-          tr: (props) => <TableRow {...cleanedProps(props)} />,
-          ul: (props) => {
-            return (
-              <ul
-                className="mb-4 list-outside list-disc pl-4 space-y-2 [&>li]:first:mt-2"
-                {...cleanedProps(props)}
-              />
-            );
-          },
-        }}
-        remarkPlugins={[remarkGfm]}
-        skipHtml={markdownProps.skipHtml}
-      >
-        {markdownText}
-      </ReactMarkdown>
-    </div>
-  );
-};
-
-function cleanedProps<T extends object & { node?: unknown }>(
-  props: T,
-): Omit<T, "node"> {
-  // biome-ignore lint/correctness/noUnusedVariables: EXPECTED
-  const { node, ...rest } = props;
-  return rest;
-}
+export { MarkdownRenderer } from "@workspace/ui/components/markdown-renderer";

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

@@ -10,7 +10,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { ScrollShadow } from "@/components/ui/ScrollShadow";
 import { Separator } from "@/components/ui/separator";
 import { useShowMore } from "@/hooks/useShowMore";
 import { cn } from "@/lib/utils";

apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx

@@ -7,8 +7,8 @@ import {
   RefreshCwIcon,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { DynamicHeight } from "../../ui/DynamicHeight";
-import { Spinner } from "../../ui/Spinner/Spinner";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { Spinner } from "@/components/ui/Spinner";
 
 export type MultiStepState<T extends string> = {
   id: T;
@@ -34,7 +34,7 @@ export function MultiStepStatus<T extends string>(props: {
 }) {
   return (
     <DynamicHeight>
-      <div className="space-y-4">
+      <div className="space-y-4 overflow-hidden">
         {props.steps.map((step) => (
           <div className="flex items-start space-x-3 " key={step.label}>
             {step.status.type === "completed" ? (
@@ -46,7 +46,7 @@ export function MultiStepStatus<T extends string>(props: {
             ) : (
               <CircleIcon className="mt-0.5 size-5 flex-shrink-0 text-muted-foreground/70" />
             )}
-            <div className="flex-1">
+            <div className="grow">
               <p
                 className={`font-medium ${
                   step.status.type === "pending"
@@ -73,7 +73,7 @@ export function MultiStepStatus<T extends string>(props: {
               {step.status.type === "error"
                 ? props.renderError?.(step, step.status.message) || (
                     <div className="mt-1 space-y-2">
-                      <p className="mb-1 text-red-500 text-sm">
+                      <p className="mb-1 text-red-500 text-sm whitespace-pre-wrap break-all">
                         {step.status.message}
                       </p>
                       <Button

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

@@ -0,0 +1,119 @@
+"use client";
+
+import { Button } from "@workspace/ui/components/button";
+import {
+  BookTextIcon,
+  BoxIcon,
+  ChevronDownIcon,
+  CodeIcon,
+  WebhookIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useMemo } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+type LinkType = "api" | "docs" | "playground" | "webhooks";
+
+const linkTypeToLabel: Record<LinkType, string> = {
+  api: "API Reference",
+  docs: "Documentation",
+  playground: "Playground",
+  webhooks: "Webhooks",
+};
+
+const linkTypeToOrder: Record<LinkType, number> = {
+  docs: 0,
+  playground: 1,
+  api: 3,
+  webhooks: 4,
+};
+
+const linkTypeToIcon: Record<LinkType, React.FC<{ className?: string }>> = {
+  api: CodeIcon,
+  docs: BookTextIcon,
+  playground: BoxIcon,
+  webhooks: WebhookIcon,
+};
+
+function orderLinks(links: ActionLink[]) {
+  return links.slice().sort((a, b) => {
+    const aIndex = linkTypeToOrder[a.type];
+    const bIndex = linkTypeToOrder[b.type];
+    return aIndex - bIndex;
+  });
+}
+
+export type ActionLink = {
+  type: LinkType;
+  href: string;
+};
+
+export function LinkGroup(props: { links: ActionLink[] }) {
+  const orderedLinks = useMemo(() => orderLinks(props.links), [props.links]);
+
+  if (orderedLinks.length === 1 && orderedLinks[0]) {
+    const link = orderedLinks[0];
+    const Icon = linkTypeToIcon[link.type];
+    return (
+      <Link
+        href={link.href}
+        target={link.href.startsWith("http") ? "_blank" : undefined}
+      >
+        <Button
+          variant="outline"
+          size="sm"
+          className="rounded-full border gap-2 bg-card"
+        >
+          <Icon className="size-3.5 text-muted-foreground" />
+          {linkTypeToLabel[link.type]}
+        </Button>
+      </Link>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="rounded-full border gap-2 bg-card [&[data-state=open]>svg]:rotate-180"
+        >
+          Resources
+          <ChevronDownIcon className="size-4 transition-transform duration-200 text-muted-foreground" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="gap-1 flex flex-col w-48 rounded-xl"
+        sideOffset={10}
+      >
+        {orderedLinks.map((link) => {
+          const isExternal = link.href.startsWith("http");
+          const Icon = linkTypeToIcon[link.type];
+          return (
+            <DropdownMenuItem
+              key={link.type}
+              asChild
+              className="flex flex-row items-center gap-2 cursor-pointer py-1.5"
+            >
+              <Link
+                href={link.href}
+                target={isExternal ? "_blank" : undefined}
+                rel={isExternal ? "noopener noreferrer" : undefined}
+              >
+                <Icon className="size-4 text-muted-foreground" />
+                {linkTypeToLabel[link.type]}
+              </Link>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,14 @@
+import {
+  type FooterCardProps,
+  FooterLinksSection,
+} from "../../../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/footer/FooterLinksSection";
+
+export type ProjectPageFooterProps = FooterCardProps;
+
+export function ProjectPageFooter(props: ProjectPageFooterProps) {
+  return (
+    <footer className="container max-w-7xl">
+      <FooterLinksSection {...props} />
+    </footer>
+  );
+}

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

@@ -0,0 +1,155 @@
+import { Button } from "@workspace/ui/components/button";
+import { ArrowUpRightIcon, Settings2Icon } from "lucide-react";
+import Link from "next/link";
+import type { ThirdwebClient } from "thirdweb";
+import { cn } from "@/lib/utils";
+import { type ActionLink, LinkGroup } from "./header/link-group";
+
+type Action =
+  | ({
+      label: string;
+      href: string;
+    } & (
+      | {
+          external: true;
+          icon?: never;
+        }
+      | {
+          icon?: React.ReactNode;
+          external?: false;
+        }
+    ))
+  | {
+      component: React.ReactNode;
+    };
+
+function Action(props: { action: Action; variant?: "default" | "secondary" }) {
+  const action = props.action;
+
+  return "component" in action ? (
+    action.component
+  ) : (
+    <Button
+      asChild
+      className={cn(
+        "rounded-full",
+        props.variant === "secondary" && "border border-border",
+      )}
+      size="sm"
+      variant={props.variant}
+    >
+      <Link
+        href={action.href}
+        target={action.external ? "_blank" : undefined}
+        rel={action.external ? "noopener noreferrer" : undefined}
+        className="flex flex-row items-center gap-2"
+      >
+        {action.icon}
+        {action.label}
+        {action.external && <ArrowUpRightIcon className="size-4" />}
+      </Link>
+    </Button>
+  );
+}
+
+export type ProjectPageHeaderProps = {
+  client: ThirdwebClient;
+  title: string;
+  description?: React.ReactNode;
+  imageUrl?: string | null;
+  icon: React.FC<{ className?: string }>;
+  isProjectIcon?: boolean;
+  actions: {
+    primary: Action;
+    secondary?: Action;
+  } | null;
+
+  links?: ActionLink[];
+  settings?: {
+    href: string;
+  };
+
+  // TODO: add task card component
+  task?: never;
+};
+
+export function ProjectPageHeader(props: ProjectPageHeaderProps) {
+  return (
+    <header className="container max-w-7xl py-6 relative">
+      {/* top row */}
+      <div className="flex justify-between items-start mb-4">
+        {/* left - icon */}
+        <div className="flex">
+          {props.isProjectIcon ? (
+            <props.icon />
+          ) : (
+            <div className="border rounded-full p-2.5 bg-card">
+              <props.icon className="size-5 text-muted-foreground" />
+            </div>
+          )}
+        </div>
+
+        {/* right - buttons */}
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-3">
+            {props.links && props.links.length > 0 && (
+              <LinkGroup links={props.links} />
+            )}
+
+            {props.settings && (
+              <Link href={props.settings.href}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="rounded-full gap-2 bg-card"
+                >
+                  <Settings2Icon className="size-4 text-muted-foreground" />
+                  Settings
+                </Button>
+              </Link>
+            )}
+          </div>
+
+          {/* hide on mobile */}
+          {props.actions && (
+            <div className="hidden lg:flex items-center gap-3">
+              {props.actions.secondary && (
+                <Action action={props.actions.secondary} variant="secondary" />
+              )}
+
+              {props.actions.primary && (
+                <Action action={props.actions.primary} />
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {/* mid row */}
+        <div className="space-y-1 max-w-3xl">
+          <h2 className="text-3xl font-semibold tracking-tight">
+            {props.title}
+          </h2>
+          {/* description */}
+          <p className="text-sm text-muted-foreground line-clamp-3 md:line-clamp-2">
+            {props.description}
+          </p>
+        </div>
+
+        {/* bottom row - hidden on desktop */}
+        {props.actions && (
+          <div className="flex items-center gap-3 lg:hidden">
+            {props.actions?.primary && (
+              <Action action={props.actions.primary} />
+            )}
+
+            {props.actions?.secondary && (
+              <Action action={props.actions.secondary} variant="secondary" />
+            )}
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { cn } from "@/lib/utils";
+import { type TabPathLink, TabPathLinks } from "../../ui/tabs";
+import {
+  ProjectPageFooter,
+  type ProjectPageFooterProps,
+} from "./project-page-footer";
+import {
+  ProjectPageHeader,
+  type ProjectPageHeaderProps,
+} from "./project-page-header";
+
+type ProjectPageProps = {
+  header: ProjectPageHeaderProps;
+  footer?: ProjectPageFooterProps;
+  /**
+   * @deprecated only for legacy pages where we still need internal tabs for the moment, currently:
+   * - /webhooks
+   */
+  tabs?: TabPathLink[];
+};
+
+export function ProjectPage(props: React.PropsWithChildren<ProjectPageProps>) {
+  return (
+    <div className="flex flex-col grow">
+      <div className={cn(!props.tabs && "border-b")}>
+        <ProjectPageHeader {...props.header} />
+        {props.tabs && (
+          <TabPathLinks
+            scrollableClassName="container max-w-7xl"
+            links={props.tabs}
+          />
+        )}
+      </div>
+
+      <main className="container max-w-7xl pt-6">{props.children}</main>
+      <div className="h-20" />
+      {props.footer && (
+        <div className="border-t mt-auto">
+          <ProjectPageFooter {...props.footer} />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -10,7 +10,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { ScrollShadow } from "@/components/ui/ScrollShadow";
 import { useShowMore } from "@/hooks/useShowMore";
 import { cn } from "@/lib/utils";
 

apps/dashboard/src/@/components/blocks/skeletons/GenericLoadingPage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
 
 export function GenericLoadingPage({ className }: { className?: string }) {

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

@@ -1,5 +1,5 @@
 "use client";
-import { CheckIcon, CopyIcon, XIcon } from "lucide-react";
+import { CheckIcon, CircleSlashIcon, CopyIcon, XIcon } from "lucide-react";
 import { useMemo } from "react";
 import { isAddress, type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { Blobbie, type SocialProfile, useSocialProfiles } from "thirdweb/react";
@@ -23,6 +23,7 @@ export function WalletAddress(props: {
   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]);
@@ -47,7 +48,7 @@ export function WalletAddress(props: {
     return (
       <ToolTipLabel hoverable label={address}>
         <span className="flex items-center gap-2 underline-offset-4 hover:underline">
-          <div className="flex size-6 items-center justify-center rounded-full border bg-background">
+          <div className="flex size-5 items-center justify-center rounded-full border bg-background">
             <XIcon className="size-4 text-muted-foreground" />
           </div>
           Invalid Address
@@ -59,9 +60,16 @@ export function WalletAddress(props: {
   // special case for zero address
   if (address === ZERO_ADDRESS) {
     return (
-      <span className={cn("cursor-pointer font-mono", props.className)}>
-        {shortenedAddress}
-      </span>
+      <div className="flex items-center gap-2 py-2">
+        <CircleSlashIcon
+          className={cn("size-5 text-muted-foreground/70", props.iconClassName)}
+        />
+        <span
+          className={cn("cursor-pointer font-mono text-sm", props.className)}
+        >
+          {shortenedAddress}
+        </span>
+      </div>
     );
   }
 
@@ -82,6 +90,7 @@ export function WalletAddress(props: {
               iconClassName={props.iconClassName}
               profiles={profiles.data || []}
               thirdwebClient={props.client}
+              fallbackIcon={props.fallbackIcon}
             />
           )}
           <span className="cursor-pointer font-mono">
@@ -173,6 +182,7 @@ function WalletAvatar(props: {
   profiles: SocialProfile[];
   thirdwebClient: ThirdwebClient;
   iconClassName?: string;
+  fallbackIcon?: React.ReactNode;
 }) {
   const avatar = useMemo(() => {
     return props.profiles.find(
@@ -198,12 +208,21 @@ function WalletAvatar(props: {
         <Img
           className={cn("size-5 object-cover", props.iconClassName)}
           src={resolvedAvatarSrc}
+          fallback={
+            <Blobbie
+              address={props.address}
+              className={props.iconClassName}
+              size={20}
+            />
+          }
         />
+      ) : props.fallbackIcon ? (
+        props.fallbackIcon
       ) : (
         <Blobbie
           address={props.address}
           className={props.iconClassName}
-          size={24}
+          size={20}
         />
       )}
     </div>

apps/dashboard/src/@/components/chat/CustomChats.tsx

@@ -15,7 +15,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { ScrollShadow } from "@/components/ui/ScrollShadow";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "../../../app/(app)/components/ThirdwebMiniLogo";
 import { SupportTicketForm } from "../../../app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm";
@@ -413,15 +413,15 @@ function StyledMarkdownRenderer(props: {
 }) {
   return (
     <MarkdownRenderer
-      className="[&>*:first-child]:mt-0 [&>*:first-child]:border-none [&>*:first-child]:pb-0 [&>*:last-child]:mb-0"
+      className="text-sm text-foreground [&>*:first-child]:mt-0 [&>*:first-child]:border-none [&>*:first-child]:pb-0 [&>*:last-child]:mb-0 leading-relaxed"
       code={{
-        className: "bg-card",
         ignoreFormattingErrors: true,
       }}
       inlineCode={{ className: "border-none" }}
+      li={{ className: "text-foreground leading-relaxed" }}
       markdownText={props.text}
       p={{
-        className: props.type === "assistant" ? "" : "leading-normal",
+        className: "text-foreground leading-relaxed",
       }}
       skipHtml
     />

apps/dashboard/src/@/components/cmd-k-search/index.tsx

@@ -22,8 +22,8 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { ScrollShadow } from "@/components/ui/ScrollShadow";
+import { Spinner } from "@/components/ui/Spinner";
 import { ChainIconClient } from "@/icons/ChainIcon";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { fetchTopContracts, type TrendingContract } from "@/lib/search";

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

@@ -17,7 +17,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import {
   Table,
@@ -300,6 +300,7 @@ const contractTypeToAssetTypeRecord: Record<string, string | undefined> = {
   DropERC20: "Coin",
   DropERC721: "NFT Collection",
   DropERC1155: "NFT Collection",
+  ERC20Asset: "Coin",
 };
 
 const NetworkFilterCell = React.memo(function NetworkFilterCell({

apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx

@@ -20,7 +20,7 @@ import {
   toSerializableTransaction,
   toWei,
 } from "thirdweb";
-import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+import { useActiveAccount } from "thirdweb/react";
 import { parseAbiParams, stringify, toFunctionSelector } from "thirdweb/utils";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SolidityInput } from "@/components/solidity-inputs";
@@ -31,9 +31,10 @@ import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 
 function formatResponseData(data: unknown): {
   type: "json" | "text";
@@ -264,7 +265,7 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
     data: mutationData,
     error: mutationError,
     isPending: mutationLoading,
-  } = useSendAndConfirmTransaction();
+  } = useSendAndConfirmTx();
 
   const {
     mutate: readFn,

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

@@ -27,7 +27,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useChainSlug } from "@/hooks/chains/chainSlug";
 import { useAddContractToProject } from "@/hooks/project-contracts";
 import { useDashboardRouter } from "@/lib/DashboardRouter";

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

@@ -4,7 +4,7 @@ import { SearchIcon, XIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,

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

@@ -10,7 +10,7 @@ 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/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   ToolTipLabel,
   Tooltip,

apps/dashboard/src/@/components/misc/CustomChainRenderer.tsx

@@ -2,8 +2,7 @@ import { SettingsIcon } from "lucide-react";
 import type { ThirdwebClient } from "thirdweb";
 import type { UseNetworkSwitcherModalOptions } from "thirdweb/react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { OPSponsoredChains } from "@/constants/chains";
+import { Spinner } from "@/components/ui/Spinner";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { ChainIconClient } from "@/icons/ChainIcon";
 import { cn } from "@/lib/utils";
@@ -32,7 +31,6 @@ export const CustomChainRenderer = ({
   const { idToChain } = useAllChainsData();
   const storedChain = idToChain.get(chain.id);
   const isDeprecated = storedChain?.status === "deprecated";
-  const isSponsored = OPSponsoredChains.includes(chain.id);
 
   return (
     <div className="flex min-h-[48px] w-full cursor-pointer justify-start rounded-lg px-2 py-1 hover:bg-accent">
@@ -70,16 +68,6 @@ export const CustomChainRenderer = ({
                   Deprecated
                 </div>
               )}
-              {isSponsored && (
-                <div
-                  className="flex shrink-0 cursor-not-allowed items-center overflow-hidden rounded-xl px-2 py-1 font-medium text-xs"
-                  style={{
-                    background: "linear-gradient(to right, #701953, #5454B2)",
-                  }}
-                >
-                  Sponsored
-                </div>
-              )}
             </div>
             {switching && (
               <div className="flex items-center gap-1 font-medium text-link-foreground text-xs">

apps/dashboard/src/@/components/misc/configure-networks/ConfigureNetworkForm.tsx

@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { ScrollShadow } from "@/components/ui/ScrollShadow";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { ChainIconClient } from "@/icons/ChainIcon";
 import { useStore } from "@/lib/reactive";

apps/dashboard/src/@/components/misc/configure-networks/Form/IconUpload.tsx

@@ -5,7 +5,7 @@ import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import { FileInput } from "@/components/blocks/FileInput";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardStorageUpload } from "@/hooks/useDashboardStorageUpload";
 
 export const IconUpload: React.FC<{

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

@@ -1,5 +1,4 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { DialogDescription } from "@radix-ui/react-dialog";
 import { useMutation } from "@tanstack/react-query";
 import type { ProjectService } from "@thirdweb-dev/service-utils";
 import { SERVICES } from "@thirdweb-dev/service-utils";
@@ -18,6 +17,7 @@ import {
   Dialog,
   DialogClose,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -32,7 +32,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Textarea } from "@/components/ui/textarea";
 import { createProjectClient } from "@/hooks/useApi";
 import { useDashboardRouter } from "@/lib/DashboardRouter";

apps/dashboard/src/@/components/solidity-inputs/address-input.tsx

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import { isAddress, isValidENSName } from "thirdweb/utils";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useEns } from "@/hooks/contract-hooks";
 import type { SolidityInputProps } from ".";
 import { validateAddress } from "./helpers";

apps/dashboard/src/@/components/sponsored-transactions-table/SponsoredTransactionsTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useState } from "react";
-import type { ThirdwebClient } from "thirdweb/dist/types/client/client";
+import type { ThirdwebClient } from "thirdweb";
 import { analyticsServerProxy } from "@/actions/proxies";
 import {
   type SponsoredTransaction,

apps/dashboard/src/@/components/tx-button/MismatchButton.tsx

@@ -12,13 +12,14 @@ import { forwardRef, useCallback, useRef, useState } from "react";
 import { toast } from "sonner";
 import {
   prepareTransaction,
+  // eslint-disable-next-line no-restricted-imports
   sendTransaction,
   type ThirdwebClient,
   toWei,
 } from "thirdweb";
 import { type Chain, type ChainMetadata, localhost } from "thirdweb/chains";
 import {
-  PayEmbed,
+  BuyWidget,
   useActiveAccount,
   useActiveWallet,
   useActiveWalletChain,
@@ -29,7 +30,6 @@ import {
 import { privateKeyToAccount, type Wallet } from "thirdweb/wallets";
 import { apiServerProxy } from "@/actions/proxies";
 import { Button } from "@/components/ui/button";
-import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import {
   Dialog,
   DialogContent,
@@ -42,7 +42,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { LOCAL_NODE_PKEY } from "@/constants/misc";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
@@ -251,39 +251,32 @@ export const MismatchButton = forwardRef<
       >
         <DialogContent
           className={cn(
-            "gap-0 p-0",
-            dialog === "no-funds" && "md:!max-w-[480px]",
-            dialog === "pay" && "md:!max-w-[360px] border-none bg-transparent",
+            "gap-0 p-0 md:!max-w-[480px]",
+            dialog === "pay" && "border-none bg-transparent",
           )}
           dialogCloseClassName="focus:ring-0"
         >
-          <DynamicHeight>
-            {dialog === "no-funds" && (
-              <NoFundsDialogContent
-                chain={txChain}
-                client={props.client}
-                isLoggedIn={props.isLoggedIn}
-                onCloseModal={() => setDialog(undefined)}
-                openPayModal={() => {
-                  setDialog("pay");
-                }}
-              />
-            )}
+          {dialog === "no-funds" && (
+            <NoFundsDialogContent
+              chain={txChain}
+              client={props.client}
+              isLoggedIn={props.isLoggedIn}
+              onCloseModal={() => setDialog(undefined)}
+              openPayModal={() => {
+                setDialog("pay");
+              }}
+            />
+          )}
 
-            {dialog === "pay" && (
-              <PayEmbed
-                className="!w-auto"
-                client={props.client}
-                payOptions={{
-                  prefillBuy: {
-                    amount: "0.01",
-                    chain: txChain,
-                  },
-                }}
-                theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
-              />
-            )}
-          </DynamicHeight>
+          {dialog === "pay" && (
+            <BuyWidget
+              className="!w-full"
+              client={props.client}
+              chain={txChain}
+              amount="0.01"
+              theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
+            />
+          )}
         </DialogContent>
       </Dialog>
     </>
@@ -362,11 +355,7 @@ function NoFundsDialogContent(props: {
                 (x) => x.enabled && x.service === "pay",
               ) ? (
               // pay case
-              <Button
-                className="w-full"
-                onClick={props.openPayModal}
-                variant="primary"
-              >
+              <Button className="w-full" onClick={props.openPayModal}>
                 Buy Funds
               </Button>
             ) : // no funds options available

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

@@ -25,6 +25,7 @@ export function CopyAddressButton(props: {
       copyIconPosition={props.copyIconPosition}
       textToCopy={props.address}
       textToShow={shortenedAddress}
+      iconClassName={props.iconClassName}
       tooltip={props.tooltip || "Copy Address"}
       variant={props.variant}
     />

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

@@ -17,9 +17,7 @@ export function DynamicHeight(props: {
         boxSizing: "border-box",
         height: height ? `${height}px` : "auto",
         overflow: "hidden",
-        transition:
-          props.transition ||
-          "height 210ms cubic-bezier(0.175, 0.885, 0.32, 1.1)",
+        transition: props.transition || "height 220ms ease",
       }}
     >
       <div

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

@@ -0,0 +1,3 @@
+"use client";
+
+export { ScrollShadow } from "@workspace/ui/components/scroll-shadow";

apps/dashboard/src/@/components/ui/ScrollShadow/ScrollShadow.module.css

@@ -1,36 +0,0 @@
-.scrollShadowY {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 32px;
-  pointer-events: none;
-}
-
-.scrollShadowX {
-  position: absolute;
-  top: 0;
-  width: 32px;
-  height: 100%;
-  pointer-events: none;
-}
-
-.scrollShadowTop {
-  top: 0;
-  background: linear-gradient(to bottom, var(--shadow), transparent);
-  opacity: 0;
-}
-
-.scrollShadowBottom {
-  bottom: 0;
-  background: linear-gradient(to top, var(--shadow), transparent);
-}
-
-.scrollShadowLeft {
-  left: 0;
-  background: linear-gradient(to right, var(--shadow), transparent);
-}
-
-.scrollShadowRight {
-  right: 0;
-  background: linear-gradient(to left, var(--shadow), transparent);
-}

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

@@ -1,151 +0,0 @@
-"use client";
-
-import { useRef } from "react";
-import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
-import { cn } from "@/lib/utils";
-import styles from "./ScrollShadow.module.css";
-
-export function ScrollShadow(props: {
-  children: React.ReactNode;
-  className?: string;
-  scrollableClassName?: string;
-  disableTopShadow?: boolean;
-  shadowColor?: string;
-  shadowClassName?: string;
-}) {
-  const scrollableEl = useRef<HTMLDivElement>(null);
-  const shadowTopEl = useRef<HTMLDivElement>(null);
-  const shadowBottomEl = useRef<HTMLDivElement>(null);
-  const shadowLeftEl = useRef<HTMLDivElement>(null);
-  const shadowRightEl = useRef<HTMLDivElement>(null);
-  const wrapperEl = useRef<HTMLDivElement>(null);
-
-  useIsomorphicLayoutEffect(() => {
-    const content = scrollableEl.current;
-    const shadowTop = shadowTopEl.current;
-    const shadowBottom = shadowBottomEl.current;
-    const wrapper = wrapperEl.current;
-    const shadowLeft = shadowLeftEl.current;
-    const shadowRight = shadowRightEl.current;
-
-    if (!content || !shadowTop || !shadowBottom || !wrapper) {
-      return;
-    }
-
-    function handleScroll() {
-      if (
-        !content ||
-        !shadowTop ||
-        !shadowBottom ||
-        !shadowLeft ||
-        !shadowRight ||
-        !wrapper
-      ) {
-        return;
-      }
-
-      const contentScrollHeight = content.scrollHeight - wrapper.offsetHeight;
-      const contentScrollWidth = content.scrollWidth - wrapper.offsetWidth;
-
-      if (contentScrollHeight > 10) {
-        const currentScroll = content.scrollTop / contentScrollHeight;
-        shadowTop.style.opacity = `${currentScroll}`;
-        shadowBottom.style.opacity = `${1 - currentScroll}`;
-      } else {
-        shadowTop.style.opacity = "0";
-        shadowBottom.style.opacity = "0";
-      }
-
-      if (contentScrollWidth > 10) {
-        const currentScrollX = content.scrollLeft / contentScrollWidth;
-        shadowLeft.style.opacity = `${currentScrollX}`;
-        shadowRight.style.opacity = `${1 - currentScrollX}`;
-      } else {
-        shadowLeft.style.opacity = "0";
-        shadowRight.style.opacity = "0";
-      }
-    }
-
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        handleScroll();
-      });
-    });
-    content.addEventListener("scroll", handleScroll);
-
-    const resizeObserver = new ResizeObserver(() => {
-      handleScroll();
-    });
-
-    resizeObserver.observe(content);
-    return () => {
-      content.removeEventListener("scroll", handleScroll);
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  return (
-    <div
-      className={cn(props.className, "relative overflow-hidden")}
-      ref={wrapperEl}
-      style={
-        {
-          "--shadow": props.shadowColor || "hsl(var(--muted))",
-        } as React.CSSProperties
-      }
-    >
-      <div
-        className={cn(
-          styles.scrollShadowTop,
-          styles.scrollShadowY,
-          props.shadowClassName,
-        )}
-        ref={shadowTopEl}
-        style={{
-          display: props.disableTopShadow ? "none" : "block",
-          opacity: "0",
-        }}
-      />
-      <div
-        className={cn(
-          styles.scrollShadowBottom,
-          styles.scrollShadowY,
-          props.shadowClassName,
-        )}
-        ref={shadowBottomEl}
-        style={{
-          opacity: "0",
-        }}
-      />
-      <div
-        className={cn(
-          styles.scrollShadowLeft,
-          styles.scrollShadowX,
-          props.shadowClassName,
-        )}
-        ref={shadowLeftEl}
-        style={{
-          opacity: "0",
-        }}
-      />
-      <div
-        className={cn(
-          styles.scrollShadowRight,
-          styles.scrollShadowX,
-          props.shadowClassName,
-        )}
-        ref={shadowRightEl}
-        style={{
-          opacity: "0",
-        }}
-      />
-      <div
-        className={cn("no-scrollbar overflow-auto", props.scrollableClassName)}
-        data-scrollable
-        ref={scrollableEl}
-      >
-        {props.children}
-      </div>
-    </div>
-  );
-}

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

@@ -0,0 +1 @@
+export { Spinner } from "@workspace/ui/components/spinner";

apps/dashboard/src/@/components/ui/Spinner/Spinner.module.css

@@ -1,37 +0,0 @@
-.loader {
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 2s linear infinite;
-}
-
-.loader circle {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 4px solid #fff;
-  stroke-linecap: round;
-  animation: dash 1.5s ease-in-out infinite;
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}

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

@@ -1,21 +0,0 @@
-import { cn } from "@/lib/utils";
-import style from "./Spinner.module.css";
-
-export function Spinner(props: { className?: string }) {
-  return (
-    <svg
-      className={cn(style.loader, props.className || "size-4")}
-      viewBox="0 0 50 50"
-    >
-      <title>loading</title>
-      <circle
-        cx="25"
-        cy="25"
-        fill="none"
-        r="20"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
-    </svg>
-  );
-}

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

@@ -1,16 +1 @@
-import Link from "next/link";
-import { cn } from "../../lib/utils";
-
-type LinkProps = React.ComponentProps<typeof Link>;
-
-export function UnderlineLink(props: LinkProps) {
-  return (
-    <Link
-      {...props}
-      className={cn(
-        "underline decoration-muted-foreground/50 decoration-dotted underline-offset-[5px] hover:text-foreground hover:decoration-foreground hover:decoration-solid",
-        props.className,
-      )}
-    />
-  );
-}
+export { UnderlineLink } from "@workspace/ui/components/UnderlineLink";

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

@@ -1,39 +1,2 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 leading-4",
-  {
-    defaultVariants: {
-      variant: "default",
-    },
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary/20 text-primary",
-        destructive:
-          "border-transparent dark:bg-red-950 dark:text-red-400 bg-red-500/20 text-red-800",
-        outline: "text-foreground",
-        secondary:
-          "border-transparent bg-accent text-accent-foreground hover:bg-accent/80",
-        success:
-          "border-transparent dark:bg-green-950/50 dark:text-green-400 bg-green-200 text-green-950",
-        warning:
-          "border-transparent dark:bg-yellow-600/20 dark:text-yellow-500 bg-yellow-500/20 text-yellow-900",
-      },
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };
+export type { BadgeProps } from "@workspace/ui/components/badge";
+export { Badge, badgeVariants } from "@workspace/ui/components/badge";

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

@@ -1,119 +1,9 @@
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode;
-  }
->(({ ...props }, ref) => <nav aria-label="breadcrumb" ref={ref} {...props} />);
-Breadcrumb.displayName = "Breadcrumb";
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-BreadcrumbList.displayName = "BreadcrumbList";
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    className={cn("inline-flex items-center gap-1.5", className)}
-    ref={ref}
-    {...props}
-  />
-));
-BreadcrumbItem.displayName = "BreadcrumbItem";
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean;
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp
-      className={cn("transition-colors hover:text-foreground", className)}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  // biome-ignore lint/a11y/useFocusableInteractive: required
-  <span
-    aria-current="page"
-    aria-disabled="true"
-    className={cn("font-normal text-foreground", className)}
-    ref={ref}
-    role="link"
-    {...props}
-  />
-));
-BreadcrumbPage.displayName = "BreadcrumbPage";
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
-    role="presentation"
-    {...props}
-  >
-    {children ?? <ChevronRightIcon />}
-  </li>
-);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden="true"
-    className={cn(
-      "relative flex h-9 w-9 items-center justify-center",
-      className,
-    )}
-    role="presentation"
-    {...props}
-  >
-    <MoreHorizontalIcon className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
-
 export {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};
+} from "@workspace/ui/components/breadcrumb";

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

@@ -1,83 +1,3 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    defaultVariants: {
-      size: "default",
-      variant: "default",
-    },
-    variants: {
-      size: {
-        default: "h-10 px-4 py-2",
-        icon: "h-10 w-10",
-        lg: "h-11 rounded-md px-8",
-        sm: "h-9 rounded-md px-3",
-      },
-      variant: {
-        default: "bg-foreground text-background hover:bg-foreground/90",
-        destructive:
-          "bg-destructive hover:bg-destructive/90 text-destructive-foreground ",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-        primary: "bg-primary hover:bg-primary/90 text-primary-foreground ",
-        secondary:
-          "bg-secondary hover:bg-secondary/80 text-secondary-foreground ",
-        upsell:
-          "bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
-      },
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, disabled, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-
-    // "button" elements automatically handle the `disabled` attribute.
-    // For non-button elements rendered via `asChild` (e.g. <a>), we still want
-    // to visually convey the disabled state and prevent user interaction.
-    // We do that by conditionally adding the same utility classes that the
-    // `disabled:` pseudo-variant would normally apply and by setting
-    // `aria-disabled` for accessibility.
-    const disabledClass = disabled ? "pointer-events-none opacity-50" : "";
-
-    const btnOnlyProps =
-      Comp === "button"
-        ? {
-            type:
-              (props as React.ButtonHTMLAttributes<HTMLButtonElement>).type ||
-              ("button" as const),
-          }
-        : undefined;
-
-    return (
-      <Comp
-        aria-disabled={disabled ? true : undefined}
-        className={cn(
-          buttonVariants({ className, size, variant }),
-          disabledClass,
-        )}
-        disabled={disabled}
-        ref={ref}
-        {...props}
-        {...btnOnlyProps}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
+"use client";
+export type { ButtonProps } from "@workspace/ui/components/button";
+export { Button, buttonVariants } from "@workspace/ui/components/button";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -21,7 +21,11 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <CheckIcon className="size-4" />
+      {props.checked === "indeterminate" ? (
+        <MinusIcon className="size-3" />
+      ) : (
+        <CheckIcon className="size-4" />
+      )}
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

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

@@ -1,71 +1,3 @@
 "use client";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import type { BundledLanguage } from "shiki";
-import { getCodeHtml } from "./getCodeHtml";
-import { PlainTextCodeBlock } from "./plaintext-code";
-import { RenderCode } from "./RenderCode";
 
-export type CodeProps = {
-  code: string;
-  lang: BundledLanguage;
-  className?: string;
-  scrollableClassName?: string;
-  keepPreviousDataOnCodeChange?: boolean;
-  copyButtonClassName?: string;
-  scrollableContainerClassName?: string;
-  shadowColor?: string;
-  ignoreFormattingErrors?: boolean;
-  onCopy?: (code: string) => void;
-};
-
-export const CodeClient: React.FC<CodeProps> = ({
-  code,
-  lang,
-  className,
-  scrollableClassName,
-  keepPreviousDataOnCodeChange = false,
-  copyButtonClassName,
-  ignoreFormattingErrors,
-  scrollableContainerClassName,
-  shadowColor,
-  onCopy,
-}) => {
-  const codeQuery = useQuery({
-    placeholderData: keepPreviousDataOnCodeChange
-      ? keepPreviousData
-      : undefined,
-    queryFn: () =>
-      getCodeHtml(code, lang, {
-        ignoreFormattingErrors: ignoreFormattingErrors,
-      }),
-    queryKey: ["html", code],
-    retry: false,
-  });
-
-  if (!codeQuery.data) {
-    return (
-      <PlainTextCodeBlock
-        className={className}
-        code={code}
-        copyButtonClassName={copyButtonClassName}
-        onCopy={onCopy}
-        scrollableClassName={scrollableClassName}
-        scrollableContainerClassName={scrollableContainerClassName}
-        shadowColor={shadowColor}
-      />
-    );
-  }
-
-  return (
-    <RenderCode
-      className={className}
-      code={codeQuery.data.formattedCode}
-      copyButtonClassName={copyButtonClassName}
-      html={codeQuery.data.html}
-      onCopy={onCopy}
-      scrollableClassName={scrollableClassName}
-      scrollableContainerClassName={scrollableContainerClassName}
-      shadowColor={shadowColor}
-    />
-  );
-};
+export { CodeClient } from "@workspace/ui/components/code/code.client";

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

@@ -1,22 +1,4 @@
-import type { BundledLanguage } from "shiki";
-import { getCodeHtml } from "./getCodeHtml";
-import { RenderCode } from "./RenderCode";
-
-export type CodeProps = {
-  code: string;
-  lang: BundledLanguage;
-  className?: string;
-  ignoreFormattingErrors?: boolean;
-};
-
-export const CodeServer: React.FC<CodeProps> = async ({
-  code,
-  lang,
-  className,
-  ignoreFormattingErrors,
-}) => {
-  const { html, formattedCode } = await getCodeHtml(code, lang, {
-    ignoreFormattingErrors,
-  });
-  return <RenderCode className={className} code={formattedCode} html={html} />;
-};
+export {
+  type CodeProps,
+  CodeServer,
+} from "@workspace/ui/components/code/code.server";

apps/dashboard/src/@/components/ui/code/plaintext-code.tsx

@@ -1,29 +1 @@
-import { cn } from "@/lib/utils";
-import { CodeBlockContainer } from "./CodeBlockContainer";
-
-export function PlainTextCodeBlock(props: {
-  code: string;
-  copyButtonClassName?: string;
-  className?: string;
-  scrollableClassName?: string;
-  codeClassName?: string;
-  scrollableContainerClassName?: string;
-  shadowColor?: string;
-  onCopy?: (code: string) => void;
-}) {
-  return (
-    <CodeBlockContainer
-      className={props.className}
-      codeToCopy={props.code}
-      copyButtonClassName={props.copyButtonClassName}
-      onCopy={props.onCopy}
-      scrollableClassName={props.scrollableClassName}
-      scrollableContainerClassName={props.scrollableContainerClassName}
-      shadowColor={props.shadowColor}
-    >
-      <code className={cn("block whitespace-pre", props.codeClassName)}>
-        {props.code}
-      </code>
-    </CodeBlockContainer>
-  );
-}
+export { PlainTextCodeBlock } from "@workspace/ui/components/code/plaintext-code";

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

@@ -1,25 +1 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background selection:bg-inverted selection:text-inverted-foreground file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className,
-        )}
-        ref={ref}
-        type={type}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };
+export { Input } from "@workspace/ui/components/input";

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

@@ -1,156 +1,11 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
-
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <table
-    className={cn(
-      "w-full caption-bottom border-collapse align-top text-sm lining-nums tabular-nums",
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead
-    className={cn("relative border-b bg-background", className)}
-    ref={ref}
-    {...props}
-  />
-));
-
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    className={cn("[&_tr:last-child]:border-0", className)}
-    ref={ref}
-    {...props}
-  />
-));
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    className={cn(
-      "border-border border-t bg-card font-medium [&>tr]:last:border-b-0",
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement> & {
-    /**
-     * Contain the absolutely position elements inside the row with position:relative + transform:translate(0)
-     * transform:translate(0) is required because position:relative on tr element does not work on webkit
-     */
-    linkBox?: boolean;
-  }
->(({ className, linkBox, ...props }, ref) => (
-  <tr
-    className={cn(
-      "border-border border-b last:border-0 data-[state=selected]:bg-muted",
-      linkBox && "relative translate-x-0 translate-y-0",
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    className={cn(
-      "px-6 py-4 text-left align-middle font-medium text-muted-foreground text-xs uppercase tracking-wider [&:has([role=checkbox])]:pr-0",
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    className={cn(
-      "px-6 py-4 text-start align-middle text-sm [&:has([role=checkbox])]:pr-0",
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    className={cn("py-4 text-muted-foreground text-sm", className)}
-    ref={ref}
-    {...props}
-  />
-));
-TableCaption.displayName = "TableCaption";
-
-function TableContainer(props: {
-  children: React.ReactNode;
-  className?: string;
-  scrollableContainerClassName?: string;
-}) {
-  return (
-    <ScrollShadow
-      className={cn(
-        "relative whitespace-nowrap rounded-lg border border-border bg-card",
-        props.className,
-      )}
-      disableTopShadow
-      scrollableClassName={props.scrollableContainerClassName}
-      shadowClassName="z-30"
-      shadowColor="hsl(var(--muted))"
-    >
-      {props.children}
-    </ScrollShadow>
-  );
-}
-
 export {
   Table,
-  TableHeader,
   TableBody,
+  TableCaption,
+  TableCell,
+  TableContainer,
   TableFooter,
   TableHead,
+  TableHeader,
   TableRow,
-  TableCell,
-  TableCaption,
-  TableContainer,
-};
+} from "@workspace/ui/components/table";

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

@@ -6,7 +6,7 @@ import { useCallback, useRef, useState } from "react";
 import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import { cn } from "@/lib/utils";
 import { Button } from "./button";
-import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
+import { ScrollShadow } from "./ScrollShadow";
 import { ToolTipLabel } from "./tooltip";
 
 export type TabLink = {
@@ -98,6 +98,7 @@ export function TabButtons(props: {
   shadowColor?: string;
   tabIconClassName?: string;
   hideBottomLine?: boolean;
+  bottomLineClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLButtonElement>();
@@ -106,7 +107,12 @@ export function TabButtons(props: {
     <div className={cn("relative", props.containerClassName)}>
       {/* Bottom line */}
       {!props.hideBottomLine && (
-        <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
+        <div
+          className={cn(
+            "absolute right-0 bottom-0 left-0 h-[1px] bg-border",
+            props.bottomLineClassName,
+          )}
+        />
       )}
 
       <ScrollShadow
@@ -210,14 +216,16 @@ function useUnderline<El extends HTMLElement>() {
   return { activeTabRef, containerRef, lineRef };
 }
 
+export type TabPathLink = {
+  name: React.ReactNode;
+  path: string;
+  exactMatch?: boolean;
+  isDisabled?: boolean;
+  isActive?: (pathname: string) => boolean;
+};
+
 export function TabPathLinks(props: {
-  links: {
-    name: React.ReactNode;
-    path: string;
-    exactMatch?: boolean;
-    isDisabled?: boolean;
-    isActive?: (pathname: string) => boolean;
-  }[];
+  links: TabPathLink[];
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;

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

@@ -1,70 +1,9 @@
 "use client";
 
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    className={cn(
-      "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 animate-in overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-popover-foreground text-sm shadow-md data-[state=closed]:animate-out",
-      className,
-    )}
-    ref={ref}
-    sideOffset={sideOffset}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
-
-export function ToolTipLabel(props: {
-  children: React.ReactNode;
-  label: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  leftIcon?: React.ReactNode;
-  hoverable?: boolean;
-  contentClassName?: string;
-  side?: "top" | "right" | "bottom" | "left";
-  align?: "center" | "start" | "end";
-}) {
-  if (!props.label) {
-    return props.children;
-  }
-
-  return (
-    <TooltipProvider>
-      <Tooltip delayDuration={100} disableHoverableContent={!props.hoverable}>
-        <TooltipTrigger asChild className="!pointer-events-auto" tabIndex={-1}>
-          {props.children}
-        </TooltipTrigger>
-        <TooltipContent
-          align={props.align}
-          className={cn(
-            "max-w-[400px] whitespace-normal p-0 leading-relaxed",
-            props.contentClassName,
-          )}
-          side={props.side}
-          sideOffset={10}
-        >
-          <div className="flex items-center gap-1.5 p-4 text-sm">
-            {props.leftIcon}
-            {props.label}
-            {props.rightIcon}
-          </div>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
+export {
+  ToolTipLabel,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@workspace/ui/components/tooltip";

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

@@ -1,9 +1,6 @@
 export const THIRDWEB_DEPLOYER_ADDRESS =
   "0xdd99b75f095d0c4d5112aCe938e4e6ed962fb024";
 
-export const THIRDWEB_PUBLISHER_ADDRESS =
-  "0xdd99b75f095d0c4d5112aCe938e4e6ed962fb024";
-
 export const DEFAULT_FEE_RECIPIENT =
   "0x1af20c6b23373350ad464700b5965ce4b0d2ad94";
 

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

@@ -1,23 +0,0 @@
-// TODO: move to API
-export const OPSponsoredChains = [
-  // Optimism
-  10,
-  // Base
-  8453,
-  // Zora
-  7777777,
-  // Mode
-  34443,
-  // Frax
-  252,
-  // Cyber
-  7560,
-  // Redstone
-  690,
-  // Ancient8
-  888888888,
-  //Donatuz
-  42026,
-  //Mantle
-  5000,
-];

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

@@ -3,3 +3,4 @@ export const COOKIE_PREFIX_TOKEN = "tw_token_";
 
 export const LAST_USED_PROJECT_ID = "last-used-project-id";
 export const LAST_USED_TEAM_ID = "last-used-team-id";
+export const HAS_USED_DASHBOARD = "has-used-dashboard";

apps/dashboard/src/@/contexts/error-handler.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import { CircleAlertIcon, InfoIcon } from "lucide-react";
 import Link from "next/link";
 import { createContext, useCallback, useContext, useState } from "react";

apps/dashboard/src/@/hooks/chains/v5-adapter.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import type { Chain, ChainMetadata } from "thirdweb/chains";
 import { useActiveWalletChain } from "thirdweb/react";
 import { useAllChainsData } from "@/hooks/chains/allChains";
@@ -27,6 +27,17 @@ export function useV5DashboardChain(
   }, [chainId, idToChain]);
 }
 
+export function useGetV5DashboardChain() {
+  const { idToChain } = useAllChainsData();
+  return useCallback(
+    (chainId: number) => {
+      // eslint-disable-next-line no-restricted-syntax
+      return defineDashboardChain(chainId, idToChain.get(chainId));
+    },
+    [idToChain],
+  );
+}
+
 /**
  * same behavior as v4 `useChain()` but for v5
  */

apps/dashboard/src/@/hooks/project-contracts.ts

@@ -11,7 +11,12 @@ export function useAddContractToProject() {
       contractAddress: string;
       chainId: string;
       deploymentType: "asset" | undefined;
-      contractType: "DropERC20" | "DropERC721" | "DropERC1155" | undefined;
+      contractType:
+        | "ERC20Asset"
+        | "DropERC721"
+        | "DropERC1155"
+        | "DropERC20"
+        | undefined;
     }) => {
       const res = await apiServerProxy({
         body: JSON.stringify({

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

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { getUniversalBridgeTokens } from "@/api/universal-bridge/tokens";
+import { getUniversalBridgeTokens } from "@/api/universal-bridge/token-list";
 
 export function useTokensData({
   chainId,

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

@@ -1,5 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
-import pLimit from "p-limit";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import Papa from "papaparse";
 import { useCallback, useState } from "react";
 import { isAddress, type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
@@ -95,6 +94,7 @@ export function useCsvUpload<
   // Always gonna need the wallet address
   T extends { address: string },
 >(props: Props<T>) {
+  const queryClient = useQueryClient();
   const [rawData, setRawData] = useState<
     T[] | Array<T & { [key in string]: unknown }>
   >(props.defaultRawData || []);
@@ -132,16 +132,29 @@ export function useCsvUpload<
     [props.csvParser],
   );
 
+  const [normalizeProgress, setNormalizeProgress] = useState({
+    total: 0,
+    current: 0,
+  });
+
   const normalizeQuery = useQuery({
     queryFn: async () => {
-      const limit = pLimit(50);
-      const results = await Promise.all(
-        rawData.map((item) => {
-          return limit(() =>
+      const batchSize = 50;
+      const results = [];
+      for (let i = 0; i < rawData.length; i += batchSize) {
+        const batch = rawData.slice(i, i + batchSize);
+        setNormalizeProgress({
+          total: rawData.length,
+          current: i,
+        });
+        const batchResults = await Promise.all(
+          batch.map((item) =>
             checkIsAddress({ item: item, thirdwebClient: props.client }),
-          );
-        }),
-      );
+          ),
+        );
+        results.push(...batchResults);
+      }
+
       return {
         invalidFound: !!results.find((item) => !item?.isValid),
         result: processAirdropData(results),
@@ -153,12 +166,18 @@ export function useCsvUpload<
 
   const removeInvalid = useCallback(() => {
     const filteredData = normalizeQuery.data?.result.filter(
-      ({ isValid }) => isValid,
+      (d) => d.isValid && d.resolvedAddress !== ZERO_ADDRESS,
     );
-    // double type assertion is save here because we don't really use this variable (only check for its length)
-    // Also filteredData's type is the superset of T[]
-    setRawData(filteredData as unknown as T[]);
-  }, [normalizeQuery.data?.result]);
+
+    if (filteredData && normalizeQuery.data) {
+      // Directly update the query result instead of setting new state to avoid triggering refetch
+      queryClient.setQueryData(["snapshot-check-isAddress", rawData], {
+        ...normalizeQuery.data,
+        result: filteredData,
+        invalidFound: false, // Since we removed all invalid items
+      });
+    }
+  }, [normalizeQuery.data, queryClient, rawData]);
 
   const processData = useCallback(
     (data: T[]) => {
@@ -181,5 +200,6 @@ export function useCsvUpload<
     removeInvalid,
     reset,
     setFiles,
+    normalizeProgress,
   };
 }

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

@@ -11,8 +11,8 @@ import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
 import { apiServerProxy } from "@/actions/proxies";
 import type { EngineBackendWalletType } from "@/constants/engine";
-import type { ResultItem } from "../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/metrics/components/StatusCodes";
-import type { EngineStatus } from "../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table";
+import type { ResultItem } from "../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/metrics/components/StatusCodes";
+import type { EngineStatus } from "../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/transactions-table";
 import { engineKeys } from "../query-keys/cache-keys";
 
 // Engine instances
@@ -1662,7 +1662,7 @@ export function useEngineSystemMetrics(
     queryFn: async () => {
       const res = await apiServerProxy({
         method: "GET",
-        pathname: `/v1/teams/${teamIdOrSlug}/${projectSlug}/engine/dedicated/${engineId}/metrics`,
+        pathname: `/v1/teams/${teamIdOrSlug}/${projectSlug}/engine/${engineId}/metrics`,
       });
 
       if (!res.ok) {

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

@@ -0,0 +1,19 @@
+import { useTheme } from "next-themes";
+import {
+  type SendTransactionConfig,
+  // eslint-disable-next-line no-restricted-imports
+  useSendAndConfirmTransaction,
+} from "thirdweb/react";
+import { getSDKTheme } from "@/utils/sdk-component-theme";
+
+export function useSendAndConfirmTx(config?: SendTransactionConfig) {
+  const { theme } = useTheme();
+  const sendAndConfirmTransaction = useSendAndConfirmTransaction({
+    payModal: {
+      theme: getSDKTheme(theme === "light" ? "light" : "dark"),
+    },
+    ...config,
+  });
+
+  return sendAndConfirmTransaction;
+}

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

@@ -7,15 +7,20 @@ import {
 import { toast } from "sonner";
 import {
   type Chain,
-  sendAndConfirmTransaction,
+  getAddress,
+  NATIVE_TOKEN_ADDRESS,
   type ThirdwebClient,
   type ThirdwebContract,
 } from "thirdweb";
+import type { GetBalanceResult } from "thirdweb/extensions/erc20";
 import { distribute, distributeByToken } from "thirdweb/extensions/split";
 import { getOwnedTokens } from "thirdweb/insight";
 import { useActiveAccount } from "thirdweb/react";
+import { getWalletBalance } from "thirdweb/wallets";
 import invariant from "tiny-invariant";
 import { parseError } from "../utils/errorParser";
+import { tryCatch } from "../utils/try-catch";
+import { useSendAndConfirmTx } from "./useSendTx";
 
 function getTokenBalancesQuery(params: {
   ownerAddress: string;
@@ -24,7 +29,7 @@ function getTokenBalancesQuery(params: {
 }) {
   return queryOptions({
     queryFn: async () => {
-      return getOwnedTokens({
+      const ownedTokenBalancePromise = getOwnedTokens({
         client: params.client,
         chains: [params.chain],
         ownerAddress: params.ownerAddress,
@@ -32,6 +37,31 @@ function getTokenBalancesQuery(params: {
           include_native: "true",
         },
       });
+
+      const result = await tryCatch(ownedTokenBalancePromise);
+
+      // fallback to fetch native token balance with rpc
+      if (result.error) {
+        const walletBalance = await getWalletBalance({
+          address: params.ownerAddress,
+          client: params.client,
+          chain: params.chain,
+        });
+
+        const nativeTokenBalance: GetBalanceResult = {
+          name: walletBalance.name,
+          value: walletBalance.value,
+          decimals: walletBalance.decimals,
+          displayValue: walletBalance.displayValue,
+          symbol: walletBalance.symbol,
+          chainId: params.chain.id,
+          tokenAddress: NATIVE_TOKEN_ADDRESS,
+        };
+
+        return [nativeTokenBalance];
+      }
+
+      return result.data;
     },
     queryKey: ["getOwnedTokens", params.chain.id, params.ownerAddress],
     retry: false,
@@ -49,6 +79,7 @@ export function useOwnedTokenBalances(params: {
 export function useSplitDistributeFunds(contract: ThirdwebContract) {
   const account = useActiveAccount();
   const queryClient = useQueryClient();
+  const sendAndConfirmTx = useSendAndConfirmTx();
 
   const params = {
     ownerAddress: contract.address, // because we want to fetch the balance of split contract
@@ -69,16 +100,15 @@ export function useSplitDistributeFunds(contract: ThirdwebContract) {
         .filter((token) => token.value !== 0n)
         .map(async (currency) => {
           const transaction =
-            currency.name === "Native Token"
+            getAddress(currency.tokenAddress) ===
+            getAddress(NATIVE_TOKEN_ADDRESS)
               ? distribute({ contract })
               : distributeByToken({
                   contract,
                   tokenAddress: currency.tokenAddress,
                 });
-          const promise = sendAndConfirmTransaction({
-            account,
-            transaction,
-          });
+          const promise = sendAndConfirmTx.mutateAsync(transaction);
+
           toast.promise(promise, {
             error: (err) => ({
               message: `Error distributing ${currency.name}`,
@@ -87,6 +117,8 @@ export function useSplitDistributeFunds(contract: ThirdwebContract) {
             loading: `Distributing ${currency.name}`,
             success: `Successfully distributed ${currency.name}`,
           });
+
+          await promise;
         });
 
       return await Promise.all(distributions);

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

@@ -8,9 +8,9 @@ import {
 } from "thirdweb";
 import * as ERC20Ext from "thirdweb/extensions/erc20";
 import * as VoteExt from "thirdweb/extensions/vote";
-import { useSendAndConfirmTransaction } from "thirdweb/react";
 import type { Account } from "thirdweb/wallets";
 import invariant from "tiny-invariant";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 
 export async function tokensDelegated(
   options: BaseTransactionOptions<{ account: Account | undefined }>,
@@ -81,7 +81,7 @@ export async function votingTokenDecimals(options: BaseTransactionOptions) {
 }
 
 export function useDelegateMutation() {
-  const { mutateAsync } = useSendAndConfirmTransaction();
+  const sendAndConfirmTx = useSendAndConfirmTx();
 
   return useMutation({
     mutationFn: async (contract: ThirdwebContract) => {
@@ -97,7 +97,7 @@ export function useDelegateMutation() {
         contract: tokenContract,
         delegatee: contract.address,
       });
-      return await mutateAsync(transaction);
+      return await sendAndConfirmTx.mutateAsync(transaction);
     },
   });
 }

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

@@ -74,6 +74,12 @@ export function teamStub(id: string, billingPlan: Team["billingPlan"]): Team {
       rpc: {
         enabled: true,
         rateLimit: 1000,
+        websockets: {
+          enabled: false,
+          reasonCode: "enterprise_plan_required",
+          maxConnections: 0,
+          maxSubscriptions: 0,
+        },
       },
       storage: {
         download: {

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

@@ -7,17 +7,11 @@ export interface WalletStats {
   walletType: string;
 }
 
-export interface WalletUserStats {
-  date: string;
-  newUsers: number;
-  returningUsers: number;
-  totalUsers: number;
-}
-
 export interface InAppWalletStats {
   date: string;
   authenticationMethod: string;
   uniqueWalletsConnected: number;
+  newUsers: number;
 }
 
 export interface EcosystemWalletStats extends InAppWalletStats {
@@ -66,13 +60,6 @@ export interface UniversalBridgeWalletStats {
   developerFeeUsdCents: number;
 }
 
-export interface WebhookRequestStats {
-  date: string;
-  webhookId: string;
-  httpStatusCode: number;
-  totalRequests: number;
-}
-
 export interface WebhookLatencyStats {
   date: string;
   webhookId: string;
@@ -91,6 +78,14 @@ export interface WebhookSummaryStats {
   errorBreakdown: Record<string, number>;
 }
 
+export interface AIUsageStats {
+  date: string;
+  totalPromptTokens: number;
+  totalCompletionTokens: number;
+  totalSessions: number;
+  totalRequests: number;
+}
+
 export interface AnalyticsQueryParams {
   teamId: string;
   projectId?: string;

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

@@ -17,7 +17,6 @@ import type { Chain, ChainMetadata } from "thirdweb/chains";
 import {
   useActiveAccount,
   useActiveWalletChain,
-  useSendTransaction,
   useSwitchActiveWalletChain,
   useWalletBalance,
 } from "thirdweb/react";
@@ -43,11 +42,12 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET,
   NEXT_PUBLIC_TURNSTILE_SITE_KEY,
 } from "@/constants/public-envs";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 import { parseError } from "@/utils/errorParser";
 import { mapV4ChainToV5Chain } from "@/utils/map-chains";
 
@@ -310,7 +310,7 @@ function SendFundsToFaucetModalContent(props: {
   const account = useActiveAccount();
   const activeChain = useActiveWalletChain();
   const switchActiveWalletChain = useSwitchActiveWalletChain();
-  const sendTxMutation = useSendTransaction({
+  const sendAndConfirmTx = useSendAndConfirmTx({
     payModal: false,
   });
   const switchChainMutation = useMutation({
@@ -334,7 +334,7 @@ function SendFundsToFaucetModalContent(props: {
       value: toWei(values.amount.toString()),
     });
 
-    const promise = sendTxMutation.mutateAsync(sendNativeTokenTx);
+    const promise = sendAndConfirmTx.mutateAsync(sendNativeTokenTx);
 
     toast.promise(promise, {
       error: `Failed to send ${values.amount} ${props.chainMeta.nativeCurrency.symbol} to faucet`,
@@ -404,11 +404,11 @@ function SendFundsToFaucetModalContent(props: {
             {activeChain.id === props.chain.id ? (
               <Button
                 className="mt-4 w-full gap-2"
-                disabled={sendTxMutation.isPending}
+                disabled={sendAndConfirmTx.isPending}
                 key="submit"
                 type="submit"
               >
-                {sendTxMutation.isPending && <Spinner className="size-4" />}
+                {sendAndConfirmTx.isPending && <Spinner className="size-4" />}
                 Send funds to faucet
               </Button>
             ) : (

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx

@@ -11,7 +11,7 @@ import {
 import { useDebounce } from "use-debounce";
 import { useCustomConnectModal } from "@/components/connect-wallet";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 
 type AddChainToWalletProps = {

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

@@ -2,8 +2,8 @@
 import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { cancelAuction, cancelListing } from "thirdweb/extensions/marketplace";
-import { useSendAndConfirmTransaction } from "thirdweb/react";
 import { TransactionButton } from "@/components/tx-button";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 
 interface CancelTabProps {
   id: string;
@@ -21,15 +21,15 @@ export const CancelTab: React.FC<CancelTabProps> = ({
   const transaction = isAuction
     ? cancelAuction({ auctionId: BigInt(id), contract })
     : cancelListing({ contract, listingId: BigInt(id) });
-  const cancelQuery = useSendAndConfirmTransaction();
+  const sendAndConfirmTx = useSendAndConfirmTx();
   return (
     <TransactionButton
       className="self-end"
       client={contract.client}
       isLoggedIn={isLoggedIn}
-      isPending={cancelQuery.isPending}
+      isPending={sendAndConfirmTx.isPending}
       onClick={() => {
-        const promise = cancelQuery.mutateAsync(transaction, {
+        const promise = sendAndConfirmTx.mutateAsync(transaction, {
           onError: (error) => {
             console.error(error);
           },

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

@@ -28,7 +28,7 @@ import type {
   CreateListingParams,
 } from "thirdweb/extensions/marketplace";
 import { createAuction, createListing } from "thirdweb/extensions/marketplace";
-import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+import { useActiveAccount } from "thirdweb/react";
 import { shortenAddress } from "thirdweb/utils";
 import { CurrencySelector } from "@/components/blocks/CurrencySelector";
 import { NFTMediaWithEmptyState } from "@/components/blocks/nft-media";
@@ -54,6 +54,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useDashboardOwnedNFTs } from "@/hooks/useDashboardOwnedNFTs";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 import { useTxNotifications } from "@/hooks/useTxNotifications";
 import { useOwnedNFTsInsight } from "@/hooks/useWalletNFTs";
 import { cn } from "@/lib/utils";
@@ -122,7 +123,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
     chain: contract.chain,
   });
 
-  const sendAndConfirmTx = useSendAndConfirmTransaction();
+  const sendAndConfirmTx = useSendAndConfirmTx();
   const listingNotifications = useTxNotifications(
     "NFT listed Successfully",
     "Failed to list NFT",

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/types.ts

@@ -1,5 +1,4 @@
-// FIXME: export listing status type
-import type { ListingStatus } from "thirdweb/dist/types/extensions/marketplace/types";
+import type { ListingStatus } from "thirdweb/extensions/marketplace";
 
 export const LISTING_STATUS: Record<ListingStatus, string> = {
   ACTIVE: "Active",

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx

@@ -27,13 +27,15 @@ export const ClaimerSelection = () => {
     setOpenSnapshotIndex: setOpenIndex,
     isAdmin,
     claimConditionType,
+    phaseSnapshots,
+    setPhaseSnapshot,
   } = useClaimConditionsFormContext();
 
   const handleClaimerChange = (value: string) => {
     const val = value as "any" | "specific" | "overrides";
 
     if (val === "any") {
-      form.setValue(`phases.${phaseIndex}.snapshot`, undefined);
+      setPhaseSnapshot(phaseIndex, undefined);
     } else {
       if (val === "specific") {
         form.setValue(`phases.${phaseIndex}.maxClaimablePerWallet`, 0);
@@ -41,7 +43,7 @@ export const ClaimerSelection = () => {
       if (val === "overrides" && field.maxClaimablePerWallet !== 1) {
         form.setValue(`phases.${phaseIndex}.maxClaimablePerWallet`, 1);
       }
-      form.setValue(`phases.${phaseIndex}.snapshot`, []);
+      setPhaseSnapshot(phaseIndex, []);
       setOpenIndex(phaseIndex);
     }
   };
@@ -49,6 +51,7 @@ export const ClaimerSelection = () => {
   let helperText: React.ReactNode;
 
   const disabledSnapshotButton = isAdmin && formDisabled;
+  const snapshot = phaseSnapshots[phaseIndex];
 
   if (dropType === "specific") {
     helperText = (
@@ -87,10 +90,7 @@ export const ClaimerSelection = () => {
 
   return (
     <FormFieldSetup
-      errorMessage={
-        form.getFieldState(`phases.${phaseIndex}.snapshot`, form.formState)
-          ?.error?.message
-      }
+      errorMessage={undefined}
       helperText={helperText}
       label={label}
       isRequired={false}
@@ -117,7 +117,7 @@ export const ClaimerSelection = () => {
         )}
 
         {/* Edit or See Snapshot */}
-        {field.snapshot ? (
+        {snapshot ? (
           <div className="flex items-center gap-3">
             {/* disable the "Edit" button when form is disabled, but not when it's a "See" button */}
             <Button
@@ -133,7 +133,7 @@ export const ClaimerSelection = () => {
             <div
               className={cn(
                 "flex gap-2 items-center",
-                field.snapshot?.length === 0
+                snapshot?.length === 0
                   ? "text-muted-foreground"
                   : "text-green-600 dark:text-green-500",
                 disabledSnapshotButton ? "opacity-50" : "",
@@ -141,9 +141,8 @@ export const ClaimerSelection = () => {
             >
               <div className="size-2 bg-current rounded-full" />
               <span className="text-sm">
-                {field.snapshot?.length}{" "}
-                {field.snapshot?.length === 1 ? "address" : "addresses"} in
-                snapshot
+                {snapshot?.length}{" "}
+                {snapshot?.length === 1 ? "address" : "addresses"} in snapshot
               </span>
             </div>
           </div>

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

@@ -5,13 +5,12 @@ import {
   toUnits,
 } from "thirdweb";
 import { getContract } from "thirdweb/contract";
-import type { OverrideEntry } from "thirdweb/dist/types/utils/extensions/drops/types";
-import type { Prettify } from "thirdweb/dist/types/utils/type-utils";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import * as ERC20Ext from "thirdweb/extensions/erc20";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import { download } from "thirdweb/storage";
+import type { OverrideEntry } from "thirdweb/utils";
 import { maxUint256 } from "thirdweb/utils";
 import type { z } from "zod";
 import type {
@@ -26,20 +25,15 @@ type SnapshotEntry = {
   currencyAddress?: string | undefined;
 };
 
-type CombinedClaimCondition = Prettify<
-  Omit<
-    LegacyClaimCondition,
-    "price" | "waitInSeconds" | "availableSupply" | "currencyMetadata"
-  > & {
-    price: bigint;
-    currencyMetadata: Omit<
-      LegacyClaimCondition["currencyMetadata"],
-      "value"
-    > & {
-      value: bigint;
-    };
-  }
->;
+type CombinedClaimCondition = Omit<
+  LegacyClaimCondition,
+  "price" | "waitInSeconds" | "availableSupply" | "currencyMetadata"
+> & {
+  price: bigint;
+  currencyMetadata: Omit<LegacyClaimCondition["currencyMetadata"], "value"> & {
+    value: bigint;
+  };
+};
 
 type Options =
   | {

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

@@ -6,7 +6,15 @@ import {
   CircleHelpIcon,
   PlusIcon,
 } from "lucide-react";
-import { createContext, Fragment, useContext, useMemo, useState } from "react";
+import {
+  createContext,
+  Fragment,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   type UseFieldArrayReturn,
   type UseFormReturn,
@@ -20,11 +28,7 @@ import {
   ZERO_ADDRESS,
 } from "thirdweb";
 import { decimals } from "thirdweb/extensions/erc20";
-import {
-  useActiveAccount,
-  useReadContract,
-  useSendAndConfirmTransaction,
-} from "thirdweb/react";
+import { useActiveAccount, useReadContract } from "thirdweb/react";
 import invariant from "tiny-invariant";
 import * as z from "zod";
 import { ZodError } from "zod";
@@ -38,9 +42,10 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Form } from "@/components/ui/form";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useIsAdmin } from "@/hooks/useContractRoles";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 import { useTxNotifications } from "@/hooks/useTxNotifications";
 import {
   type ClaimConditionInput,
@@ -120,21 +125,19 @@ export const ClaimConditionTypeData: Record<
 });
 
 const getClaimConditionTypeFromPhase = (
-  phase: ClaimConditionInput,
+  phase: Omit<ClaimConditionInput, "snapshot">,
+  snapshot: SnapshotEntry[] | undefined,
 ): ClaimConditionType => {
-  if (!phase.snapshot) {
+  if (!snapshot) {
     return "public";
   }
 
-  if (phase.snapshot) {
+  if (snapshot) {
     if (
       phase.maxClaimablePerWallet?.toString() === "0" &&
       phase.price === "0" &&
-      typeof phase.snapshot !== "string" &&
-      phase.snapshot.length === 1 &&
-      phase.snapshot.some(
-        (a) => (a as SnapshotEntry).maxClaimable === "unlimited",
-      )
+      snapshot.length === 1 &&
+      snapshot.some((a) => a.maxClaimable === "unlimited")
     ) {
       return "creator";
     }
@@ -165,6 +168,11 @@ interface ClaimsConditionFormContextData {
   isColumn?: boolean;
   isErc20: boolean;
   claimConditionType: ClaimConditionType;
+  phaseSnapshots: Record<number, SnapshotEntry[] | undefined>;
+  setPhaseSnapshot: (
+    phaseIndex: number,
+    snapshot: SnapshotEntry[] | undefined,
+  ) => void;
 }
 
 // legacy, but we SHOULD remove this and instead pass down props!
@@ -207,7 +215,11 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
 
   const isAdmin = useIsAdmin(contract);
   const [openSnapshotIndex, setOpenSnapshotIndex] = useState(-1);
-  const sendTx = useSendAndConfirmTransaction();
+  const [phaseSnapshots, setPhaseSnapshots] = useState<
+    Record<number, SnapshotEntry[] | undefined>
+  >({});
+
+  const sendAndConfirmTx = useSendAndConfirmTx();
 
   const tokenDecimals = useReadContract(decimals, {
     contract,
@@ -233,35 +245,56 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
           }),
   });
 
+  const isSnapshotInitialized = useRef(false);
+  // save snapshots in a separate state instead of form state because it makes rendering very slow for large snapshots (10k, 100k rows etc)
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (isSnapshotInitialized.current || !claimConditionsQuery.data) {
+      return;
+    }
+
+    const newPhaseSnapshots: Record<number, SnapshotEntry[] | undefined> = {};
+
+    claimConditionsQuery.data.forEach((phase, idx) => {
+      const snapshot = phase.snapshot?.map(
+        ({ address, maxClaimable, price, currencyAddress }) => ({
+          address,
+          currencyAddress: currencyAddress || undefined,
+          maxClaimable: maxClaimable || "0",
+          price: price || undefined,
+        }),
+      );
+      newPhaseSnapshots[idx] = snapshot;
+    });
+
+    setPhaseSnapshots(newPhaseSnapshots);
+    isSnapshotInitialized.current = true;
+  }, [claimConditionsQuery.data]);
+
   const transformedQueryData = useMemo(() => {
     return (claimConditionsQuery.data || [])
-      .map((phase, idx) => ({
-        ...phase,
-        currencyAddress: phase.currencyAddress?.toLowerCase() || "0",
-        currencyMetadata: {
-          ...phase.currencyMetadata,
-          value: phase.currencyMetadata.value?.toString() || "0",
-        },
-        fromSdk: true,
-        isEditing: false,
-        maxClaimablePerWallet: phase.maxClaimablePerWallet?.toString() || "0",
-        maxClaimableSupply: phase.maxClaimableSupply?.toString() || "0",
-        merkleRootHash: (phase.merkleRootHash || "") as string,
-        metadata: {
-          ...phase.metadata,
-          name: phase?.metadata?.name || `Phase ${idx + 1}`,
-        },
-        price: phase.currencyMetadata.displayValue,
-        snapshot: phase.snapshot?.map(
-          ({ address, maxClaimable, price, currencyAddress }) => ({
-            address,
-            currencyAddress: currencyAddress || undefined,
-            maxClaimable: maxClaimable || "0",
-            price: price || undefined,
-          }),
-        ),
-        startTime: new Date(phase.startTime),
-      }))
+      .map((phase, idx) => {
+        return {
+          ...phase,
+          currencyAddress: phase.currencyAddress?.toLowerCase() || "0",
+          currencyMetadata: {
+            ...phase.currencyMetadata,
+            value: phase.currencyMetadata.value?.toString() || "0",
+          },
+          fromSdk: true,
+          isEditing: false,
+          maxClaimablePerWallet: phase.maxClaimablePerWallet?.toString() || "0",
+          maxClaimableSupply: phase.maxClaimableSupply?.toString() || "0",
+          merkleRootHash: (phase.merkleRootHash || "") as string,
+          metadata: {
+            ...phase.metadata,
+            name: phase?.metadata?.name || `Phase ${idx + 1}`,
+          },
+          price: phase.currencyMetadata.displayValue,
+          snapshot: undefined, // Do not save snapshot in form data - its slow
+          startTime: new Date(phase.startTime),
+        };
+      })
       .filter(
         (phase) => isMultiPhase || Number(phase.maxClaimableSupply) !== 0,
       );
@@ -269,7 +302,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
 
   const isFetchingData =
     claimConditionsQuery.isFetching ||
-    sendTx.isPending ||
+    sendAndConfirmTx.isPending ||
     // Need to make sure the tokenDecimals.data is present when interacting with ERC20 claim conditions
     (isErc20 && tokenDecimals.isLoading);
 
@@ -289,8 +322,19 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
     name: "phases",
   });
 
+  const setPhaseSnapshot = (
+    phaseIndex: number,
+    snapshot: SnapshotEntry[] | undefined,
+  ) => {
+    setPhaseSnapshots((prev) => ({
+      ...prev,
+      [phaseIndex]: snapshot,
+    }));
+  };
+
   const addPhase = (type: ClaimConditionType) => {
     const name = `${ClaimConditionTypeData[type].name} phase`;
+    const newPhaseIndex = formFields.fields.length;
 
     switch (type) {
       case "public":
@@ -305,8 +349,9 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
           ...DEFAULT_PHASE,
           maxClaimablePerWallet: "0",
           metadata: { name },
-          snapshot: [],
+          snapshot: undefined,
         });
+        setPhaseSnapshot(newPhaseIndex, []);
         break;
 
       case "overrides":
@@ -314,8 +359,9 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
           ...DEFAULT_PHASE,
           maxClaimablePerWallet: "1",
           metadata: { name },
-          snapshot: [],
+          snapshot: undefined,
         });
+        setPhaseSnapshot(newPhaseIndex, []);
         break;
 
       case "creator":
@@ -325,16 +371,17 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
           maxClaimableSupply: "unlimited",
           metadata: { name },
           price: "0",
-          snapshot: walletAddress
-            ? [
-                {
-                  address: walletAddress,
-                  maxClaimable: "unlimited",
-                  price: "0",
-                },
-              ]
-            : [],
+          snapshot: undefined,
         });
+        if (walletAddress) {
+          setPhaseSnapshot(newPhaseIndex, [
+            {
+              address: walletAddress,
+              maxClaimable: "unlimited",
+              price: "0",
+            },
+          ]);
+        }
         break;
 
       default:
@@ -360,6 +407,12 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
       );
     }
     try {
+      // Merge snapshots back into phases for submission
+      const phasesWithSnapshots = d.phases.map((phase, index) => ({
+        ...phase,
+        snapshot: phaseSnapshots[index] || undefined,
+      }));
+
       const tx = setClaimPhasesTx(
         {
           contract,
@@ -370,19 +423,11 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
               ? { type: "erc721" }
               : { tokenId: BigInt(tokenId || 0), type: "erc1155" }),
         },
-        d.phases,
+        phasesWithSnapshots,
       );
-      await sendTx.mutateAsync(tx);
+      await sendAndConfirmTx.mutateAsync(tx);
 
       saveClaimPhaseNotification.onSuccess();
-
-      const newPhases = d.phases.map((phase) => ({
-        ...phase,
-        fromSdk: true,
-        isEditing: false,
-      }));
-
-      form.setValue("phases", newPhases);
     } catch (error) {
       console.error(error);
 
@@ -446,17 +491,21 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
         {!isAdmin && <p>Connect with admin wallet to edit claim conditions.</p>}
 
         {controlledFields.map((field, index) => {
-          const dropType: DropType = field.snapshot
+          const snapshot = phaseSnapshots[index];
+          const dropType: DropType = snapshot
             ? field.maxClaimablePerWallet?.toString() === "0"
               ? "specific"
               : "overrides"
             : "any";
 
-          const claimConditionType = getClaimConditionTypeFromPhase(field);
+          const claimConditionType = getClaimConditionTypeFromPhase(
+            field,
+            snapshot,
+          );
 
           const isActive = activePhaseId === field.id;
 
-          const snapshotValue = field.snapshot?.map((v) =>
+          const snapshotValue = snapshot?.map((v) =>
             typeof v === "string"
               ? {
                   address: v,
@@ -482,9 +531,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                 onClose={() => {
                   setOpenSnapshotIndex(-1);
                 }}
-                setSnapshot={(snapshot) =>
-                  form.setValue(`phases.${index}.snapshot`, snapshot)
-                }
+                setSnapshot={(snapshot) => setPhaseSnapshot(index, snapshot)}
                 value={snapshotValue}
               />
 
@@ -503,13 +550,17 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                   phaseIndex: index,
                   setOpenSnapshotIndex,
                   tokenDecimals: tokenDecimals.data,
+                  phaseSnapshots,
+                  setPhaseSnapshot,
                 }}
               >
                 <ClaimConditionsPhase
                   contract={contract}
-                  isPending={sendTx.isPending}
+                  isPending={sendAndConfirmTx.isPending}
                   onRemove={() => {
                     formFields.remove(index);
+                    // Clean up snapshot when phase is removed
+                    setPhaseSnapshot(index, undefined);
                   }}
                 />
               </ClaimsConditionFormContext.Provider>
@@ -540,7 +591,8 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                 <DropdownMenuTrigger asChild>
                   <Button
                     disabled={
-                      sendTx.isPending || (!isMultiPhase && phases?.length > 0)
+                      sendAndConfirmTx.isPending ||
+                      (!isMultiPhase && phases?.length > 0)
                     }
                     size="sm"
                     variant="outline"
@@ -595,7 +647,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                 client={contract.client}
                 disabled={claimConditionsQuery.isPending}
                 isLoggedIn={isLoggedIn}
-                isPending={sendTx.isPending}
+                isPending={sendAndConfirmTx.isPending}
                 transactionCount={undefined}
                 txChainID={contract.chain.id}
                 type="submit"

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

@@ -35,12 +35,15 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
     isActive,
     isMultiPhase,
     phaseIndex,
+    phaseSnapshots,
   } = useClaimConditionsFormContext();
 
   const toggleEditing = () => {
     form.setValue(`phases.${phaseIndex}.isEditing`, !field.isEditing);
   };
 
+  const snapshot = phaseSnapshots[phaseIndex];
+
   return (
     <DynamicHeight transition="height 0.3s ease">
       <div className="border border-border rounded-lg bg-card relative">
@@ -118,9 +121,7 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
               <PhaseStartTimeInput />
 
               <CreatorInput
-                creatorAddress={
-                  (field.snapshot?.[0] as { address: string })?.address
-                }
+                creatorAddress={(snapshot?.[0] as { address: string })?.address}
               />
 
               <MaxClaimableSupplyInput />

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

@@ -5,9 +5,9 @@ import type { ThirdwebContract } from "thirdweb";
 import * as ERC20Ext from "thirdweb/extensions/erc20";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
-import { useSendAndConfirmTransaction } from "thirdweb/react";
 import { TransactionButton } from "@/components/tx-button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 import { useTxNotifications } from "@/hooks/useTxNotifications";
 
 export function ResetClaimEligibility({
@@ -23,7 +23,7 @@ export function ResetClaimEligibility({
   isLoggedIn: boolean;
   isMultiphase: boolean;
 }) {
-  const sendTxMutation = useSendAndConfirmTransaction();
+  const sendAndConfirmTx = useSendAndConfirmTx();
 
   const txNotification = useTxNotifications(
     "Successfully reset claim eligibility",
@@ -52,7 +52,7 @@ export function ResetClaimEligibility({
       }
     })();
 
-    sendTxMutation.mutate(tx, {
+    sendAndConfirmTx.mutate(tx, {
       onError: (error) => {
         txNotification.onError(error);
       },
@@ -70,7 +70,7 @@ export function ResetClaimEligibility({
     <TransactionButton
       client={contract.client}
       isLoggedIn={isLoggedIn}
-      isPending={sendTxMutation.isPending}
+      isPending={sendAndConfirmTx.isPending}
       onClick={handleResetClaimEligibility}
       size="sm"
       variant="outline"
@@ -79,7 +79,7 @@ export function ResetClaimEligibility({
       type="button"
       className="text-destructive-text bg-card"
     >
-      {sendTxMutation.isPending ? (
+      {sendAndConfirmTx.isPending ? (
         "Resetting Eligibility"
       ) : (
         <div className="flex items-center gap-2">