Version Packages (#7932)

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

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/knip.json

@@ -14,7 +14,12 @@
     "@types/color",
     "fast-xml-parser",
     "@workspace/ui",
-    "tailwindcss-animate"
+    "tailwindcss-animate",
+    "@radix-ui/react-tooltip",
+    "shiki",
+    "react-children-utilities",
+    "react-markdown",
+    "remark-gfm"
   ],
   "next": true,
   "project": ["src/**"]

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",
@@ -47,7 +46,6 @@
     "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/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/@/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,
@@ -14,7 +15,6 @@ import type {
   UserOpStats,
   WalletStats,
   WebhookLatencyStats,
-  WebhookRequestStats,
   WebhookSummaryStats,
 } from "@/types/analytics";
 import { getChains } from "./chain";
@@ -205,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,
@@ -660,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,
@@ -688,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,
@@ -762,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/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/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/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/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 };
 

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;

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

@@ -48,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
@@ -62,7 +62,7 @@ export function WalletAddress(props: {
     return (
       <div className="flex items-center gap-2 py-2">
         <CircleSlashIcon
-          className={cn("size-6 text-muted-foreground/70", props.iconClassName)}
+          className={cn("size-5 text-muted-foreground/70", props.iconClassName)}
         />
         <span
           className={cn("cursor-pointer font-mono text-sm", props.className)}
@@ -208,6 +208,13 @@ 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
@@ -215,7 +222,7 @@ function WalletAvatar(props: {
         <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,

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

@@ -31,7 +31,7 @@ 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";
 

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,7 +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 { Spinner } from "@/components/ui/Spinner";
 import { OPSponsoredChains } from "@/constants/chains";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { ChainIconClient } from "@/icons/ChainIcon";

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

@@ -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/tx-button/MismatchButton.tsx

@@ -41,7 +41,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";

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/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 = {
@@ -216,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/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/@/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/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/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/useSplit.ts

@@ -7,6 +7,7 @@ import {
 import { toast } from "sonner";
 import {
   type Chain,
+  getAddress,
   NATIVE_TOKEN_ADDRESS,
   sendAndConfirmTransaction,
   type ThirdwebClient,
@@ -98,7 +99,8 @@ 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,
@@ -108,6 +110,7 @@ export function useSplitDistributeFunds(contract: ThirdwebContract) {
             account,
             transaction,
           });
+
           toast.promise(promise, {
             error: (err) => ({
               message: `Error distributing ${currency.name}`,
@@ -116,6 +119,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/@/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

@@ -60,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;
@@ -85,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

@@ -43,7 +43,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 {
   NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET,
   NEXT_PUBLIC_TURNSTILE_SITE_KEY,

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]/_components/claim-conditions/claim-conditions-form/index.tsx

@@ -46,7 +46,7 @@ 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 { useTxNotifications } from "@/hooks/useTxNotifications";

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

@@ -11,7 +11,7 @@ import { DropZone } from "@/components/blocks/drop-zone/drop-zone";
 import { PaginationButtons } from "@/components/blocks/pagination-buttons";
 import { Button } from "@/components/ui/button";
 import { InlineCode } from "@/components/ui/inline-code";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Sheet,
   SheetContent,

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/page-skeletons.tsx

@@ -1,4 +1,4 @@
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 
 export function LoadingPage() {
   return (

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

@@ -23,7 +23,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { useAddContractToProject } from "@/hooks/project-contracts";
 import type { EVMContractInfo } from "@/hooks/useActiveChainId";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx

@@ -15,8 +15,8 @@ import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { Label } from "@/components/ui/label";
-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 {
   Select,
   SelectContent,

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

@@ -5,7 +5,7 @@ import type { ThirdwebContract } from "thirdweb";
 import { getInstalledModules, owner } from "thirdweb/modules";
 import { useActiveAccount, useReadContract } from "thirdweb/react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { InstalledModulesTable } from "./components/InstalledModulesTable";
 import { InstallModuleForm } from "./components/ModuleForm";
 

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

@@ -4,7 +4,7 @@ import { CircleSlashIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb/contract";
 import type { Account } from "thirdweb/wallets";
 import { Alert, AlertTitle } from "@/components/ui/alert";
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { ScrollShadow } from "@/components/ui/ScrollShadow";
 import { ModuleCard } from "./module-card";
 import { useAllModuleContractInfo } from "./moduleContractInfo";
 

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

@@ -27,7 +27,7 @@ import type { Account } from "thirdweb/wallets";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { TransactionButton } from "@/components/tx-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/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx

@@ -28,7 +28,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ModuleInstance } from "./module-instance";
 import { useModuleContractInfo } from "./moduleContractInfo";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx

@@ -21,7 +21,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { CodeClient } from "@/components/ui/code/code.client";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { TabButtons } from "@/components/ui/tabs";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useChainSlug } from "@/hooks/chains/chainSlug";

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

@@ -16,7 +16,7 @@ import { NFTMediaWithEmptyState } from "@/components/blocks/nft-media";
 import { PaginationButtons } from "@/components/blocks/pagination-buttons";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx

@@ -6,7 +6,7 @@ import type { ThirdwebContract } from "thirdweb";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx

@@ -12,7 +12,7 @@ import { useReadContract } from "thirdweb/react";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,

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

@@ -99,6 +99,26 @@ export const WithImageAndMultipleSocialUrls: Story = {
       website: mockSocialUrls.website,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
+  },
+};
+
+export const NotDashboardUser: Story = {
+  args: {
+    chainMetadata: ethereumChainMetadata,
+    clientContract: mockContract,
+    contractCreator: null,
+    image: mockTokenImage,
+    name: "Sample Token",
+    socialUrls: {
+      discord: mockSocialUrls.discord,
+      github: mockSocialUrls.github,
+      telegram: mockSocialUrls.telegram,
+      twitter: mockSocialUrls.twitter,
+      website: mockSocialUrls.website,
+    },
+    symbol: "SMPL",
+    isDashboardUser: false,
   },
 };
 
@@ -117,6 +137,7 @@ export const WithContractCreator: Story = {
       website: mockSocialUrls.website,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };
 
@@ -131,6 +152,7 @@ export const WithBrokenImageAndSingleSocialUrl: Story = {
       website: mockSocialUrls.website,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };
 
@@ -143,6 +165,7 @@ export const WithoutImageAndNoSocialUrls: Story = {
     name: "Sample Token",
     socialUrls: {},
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };
 
@@ -163,6 +186,7 @@ export const LongNameAndLotsOfSocialUrls: Story = {
       youtube: mockSocialUrls.youtube,
     },
     symbol: "LONG",
+    isDashboardUser: true,
   },
 };
 
@@ -187,6 +211,7 @@ export const AllSocialUrls: Story = {
       youtube: mockSocialUrls.youtube,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };
 
@@ -205,6 +230,7 @@ export const InvalidSocialUrls: Story = {
       youtube: mockSocialUrls.youtube,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };
 
@@ -220,5 +246,6 @@ export const SomeSocialUrls: Story = {
       website: mockSocialUrls.website,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };

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

@@ -9,7 +9,6 @@ import Link from "next/link";
 import { useMemo } from "react";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
-import { useActiveAccount } from "thirdweb/react";
 import { Img } from "@/components/blocks/Img";
 import { Button } from "@/components/ui/button";
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
@@ -51,6 +50,7 @@ export function ContractHeaderUI(props: {
   imageClassName?: string;
   contractCreator: string | null;
   className?: string;
+  isDashboardUser: boolean;
 }) {
   const socialUrls = useMemo(() => {
     const socialUrlsValue: { name: string; href: string }[] = [];
@@ -66,7 +66,6 @@ export function ContractHeaderUI(props: {
 
     return socialUrlsValue;
   }, [props.socialUrls]);
-  const activeAccount = useActiveAccount();
 
   const cleanedChainName = props.chainMetadata?.name
     ?.replace("Mainnet", "")
@@ -172,8 +171,7 @@ export function ContractHeaderUI(props: {
             variant="outline"
           />
 
-          {props.contractCreator?.toLowerCase() ===
-            activeAccount?.address?.toLowerCase() && (
+          {props.isDashboardUser && (
             <ToolTipLabel
               contentClassName="max-w-[300px]"
               label={

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

@@ -115,7 +115,6 @@ function RecentTransfersUI(props: {
                           <WalletAddress
                             address={transfer.from_address}
                             client={props.client}
-                            iconClassName="size-4.5"
                           />
                           <ArrowRightIcon className="size-4 text-muted-foreground/50 absolute -right-1 lg:right-3" />
                         </div>
@@ -133,7 +132,6 @@ function RecentTransfersUI(props: {
                             address={transfer.to_address}
                             client={props.client}
                             key={transfer.log_index}
-                            iconClassName="size-4.5"
                           />
                         </div>
                       ))}

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

@@ -35,7 +35,7 @@ import { TransactionButton } from "@/components/tx-button";
 import { Button } from "@/components/ui/button";
 import { DecimalInput } from "@/components/ui/decimal-input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { parseError } from "@/utils/errorParser";

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

@@ -1,8 +1,10 @@
+import { cookies } from "next/headers";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { decimals, getActiveClaimCondition } from "thirdweb/extensions/erc20";
 import { GridPattern } from "@/components/ui/background-patterns";
+import { HAS_USED_DASHBOARD } from "@/constants/cookie";
 import { resolveFunctionSelectors } from "@/lib/selectors";
 import { AssetPageView } from "../_components/asset-page-view";
 import { getContractCreator } from "../_components/getContractCreator";
@@ -65,6 +67,9 @@ export async function ERC20PublicPage(props: {
       : undefined,
   ]);
 
+  const cookieStore = await cookies();
+  const isDashboardUser = cookieStore.has(HAS_USED_DASHBOARD);
+
   const buyEmbed = (
     <BuyEmbed
       chainMetadata={props.chainMetadata}
@@ -96,6 +101,7 @@ export async function ERC20PublicPage(props: {
             clientContract={props.clientContract}
             contractCreator={contractCreator}
             image={contractMetadata.image}
+            isDashboardUser={isDashboardUser}
             name={contractMetadata.name}
             socialUrls={
               typeof contractMetadata.social_urls === "object" &&

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

@@ -14,6 +14,7 @@ export function NFTPublicPageLayout(props: {
   };
   children: React.ReactNode;
   contractCreator: string | null;
+  isDashboardUser: boolean;
 }) {
   return (
     <div className="flex grow flex-col">
@@ -38,6 +39,7 @@ export function NFTPublicPageLayout(props: {
                 : {}
             }
             symbol={props.contractMetadata.symbol}
+            isDashboardUser={props.isDashboardUser}
           />
         </div>
       </div>

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

@@ -1,9 +1,11 @@
+import { cookies } from "next/headers";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { isTokenByIndexSupported } from "thirdweb/extensions/erc721";
 import { ResponsiveLayout } from "@/components/blocks/Responsive";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HAS_USED_DASHBOARD } from "@/constants/cookie";
 import { resolveFunctionSelectors } from "@/lib/selectors";
 import { cn } from "@/lib/utils";
 import { getContractCreator } from "../_components/getContractCreator";
@@ -100,12 +102,16 @@ export async function NFTPublicPage(props: {
     <Skeleton className="h-[620px] border" />
   ) : null;
 
+  const cookieStore = await cookies();
+  const isDashboardUser = cookieStore.has(HAS_USED_DASHBOARD);
+
   return (
     <NFTPublicPageLayout
       chainMetadata={props.chainMetadata}
       clientContract={props.clientContract}
       contractCreator={contractCreator}
       contractMetadata={contractMetadata}
+      isDashboardUser={isDashboardUser}
     >
       <ResponsiveLayout
         desktop={

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

@@ -25,7 +25,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { ScrollShadow } from "@/components/ui/ScrollShadow";
 import { Skeleton, SkeletonContainer } from "@/components/ui/skeleton";
 import { TabButtons } from "@/components/ui/tabs";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/detected-state.tsx

@@ -1,5 +1,5 @@
 import { Grid2x2XIcon } from "lucide-react";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import type { ExtensionDetectedState } from "@/types/ExtensionDetectedState";
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/components/ContractSourcesPage.tsx

@@ -21,7 +21,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useContractSources } from "@/hooks/contract-ui/useContractSources";
 import { useResolveContractAbi } from "@/hooks/useResolveContractAbi";
 import { useDashboardRouter } from "@/lib/DashboardRouter";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/components/distribute-button.tsx

@@ -2,14 +2,12 @@
 
 import { SplitIcon } from "lucide-react";
 import { useMemo } from "react";
-import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import type { GetBalanceResult } from "thirdweb/extensions/erc20";
 import { TransactionButton } from "@/components/tx-button";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useSplitDistributeFunds } from "@/hooks/useSplit";
-import { parseError } from "@/utils/errorParser";
 
 export const DistributeButton = ({
   contract,
@@ -25,6 +23,7 @@ export const DistributeButton = ({
   isLoggedIn: boolean;
 }) => {
   const validBalances = balances.filter((item) => item.value !== 0n);
+
   const numTransactions = useMemo(() => {
     if (
       validBalances.length === 1 &&
@@ -38,20 +37,10 @@ export const DistributeButton = ({
     return validBalances?.filter((b) => b.value !== 0n).length;
   }, [validBalances, balancesIsPending]);
 
-  const mutation = useSplitDistributeFunds(contract);
+  const distributeFundsMutation = useSplitDistributeFunds(contract);
 
   const distributeFunds = () => {
-    mutation.mutate(undefined, {
-      onError: (error) => {
-        toast.error("Failed to process transaction", {
-          description: parseError(error),
-        });
-        console.error(error);
-      },
-      onSuccess: () => {
-        toast.success("Funds splitted successfully");
-      },
-    });
+    distributeFundsMutation.mutateAsync();
   };
 
   if (balancesIsError) {
@@ -59,7 +48,7 @@ export const DistributeButton = ({
       <TransactionButton
         client={contract.client}
         isLoggedIn={isLoggedIn}
-        isPending={mutation.isPending}
+        isPending={distributeFundsMutation.isPending}
         onClick={distributeFunds}
         size="sm"
         transactionCount={undefined}
@@ -86,7 +75,7 @@ export const DistributeButton = ({
     <TransactionButton
       client={contract.client}
       isLoggedIn={isLoggedIn}
-      isPending={mutation.isPending}
+      isPending={distributeFundsMutation.isPending}
       onClick={distributeFunds}
       transactionCount={numTransactions === 1 ? undefined : numTransactions}
       txChainID={contract.chain.id}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx

@@ -3,7 +3,7 @@ import type { ThirdwebClient } from "thirdweb";
 import { DownloadableCode } from "@/components/blocks/code/downloadable-code";
 import { DropZone } from "@/components/blocks/drop-zone/drop-zone";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useCsvUpload } from "@/hooks/useCsvUpload";
 import { AirdropCSVTable } from "./airdrop-csv-table";
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/client/star-button.tsx

@@ -4,7 +4,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { StarIcon } from "lucide-react";
 import { apiServerProxy } from "@/actions/proxies";
 import { Button, type ButtonProps } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useFavoriteChainIds } from "@/hooks/favorite-chains";
 import { cn } from "@/lib/utils";

apps/dashboard/src/app/(app)/(dashboard)/contracts/publish/[publish_uri]/contract-publish-form/index.tsx

@@ -13,7 +13,7 @@ import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import { reportContractPublished } from "@/analytics/report";
 import { CustomConnectWallet } from "@/components/connect-wallet";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   DASHBOARD_ENGINE_RELAYER_URL,
   DASHBOARD_FORWARDER_ADDRESS,

apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { fetchPublishedContracts } from "@/api/contract/fetchPublishedContracts";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { ProfileHeader } from "./components/profile-header";
 import { PublishedContracts } from "./components/published-contracts";

apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/components/contract-deploy-form/deploy-context-modal.tsx

@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
 
 export type DeployModalStep = {

apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx

@@ -20,7 +20,7 @@ import { Card } from "@/components/ui/card";
 import { CodeClient } from "@/components/ui/code/code.client";
 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 { Textarea } from "@/components/ui/textarea";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";

apps/dashboard/src/app/(app)/(stripe)/loading.tsx

@@ -1,4 +1,4 @@
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 
 export default function Loading() {
   return (

apps/dashboard/src/app/(app)/(stripe)/stripe-redirect/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { stripeRedirectPageChannel } from "@/hooks/stripe/redirect-event";
 
 export default function ClosePage() {