Version Packages (#8240 )

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Engine SDK updates (#8238 )
2025-10-11 19:31:58 +07:00 · 2025-10-11 19:24:30 +07:00 · 2025-10-11 07:42:22 +07:00 · 2025-10-11 07:37:27 +07:00 · 2025-10-09 22:14:06 +00:00 · 2025-10-09 14:19:19 -07:00
1621 changed files with 91460 additions and 36927 deletions
@@ -2,7 +2,7 @@ name: Auto Author Assign

 on:
  pull_request:
-    types: [opened, reopened, ready_for_review, draft]
+    types: [opened, reopened, ready_for_review]

 permissions:
  pull-requests: write
@@ -172,6 +172,8 @@ See our [open source page](https://thirdweb.com/open-source) for more informatio
 - [Documentation](https://portal.thirdweb.com/)
 - [Templates](https://thirdweb.com/templates)
 - [YouTube](https://www.youtube.com/c/thirdweb)
+- [X/Twitter](https://x.com/thirdweb)
+- [Telegram](https://t.me/officialthirdweb)

 ## Support

@@ -64,3 +64,5 @@ ANALYTICS_SERVICE_URL=""

 # required for billing parts of the dashboard (team -> settings -> billing / invoices)
 STRIPE_SECRET_KEY=""
+GROWTH_PLAN_SKU=""
+PAYMENT_METHOD_CONFIGURATION=""
@@ -95,6 +95,30 @@ module.exports = {
              'Import "posthog-js" directly only within the analytics helpers ("src/@/analytics/*"). Use the exported helpers from "@/analytics/track" elsewhere.',
            name: "posthog-js",
          },
+          {
+            importNames: ["useSendTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead',
+            name: "thirdweb/react",
+          },
+          {
+            importNames: ["useSendAndConfirmTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead',
+            name: "thirdweb/react",
+          },
+          {
+            importNames: ["sendTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead if used in react component',
+            name: "thirdweb",
+          },
+          {
+            importNames: ["sendAndConfirmTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead if used in react component',
+            name: "thirdweb",
+          },
        ],
        patterns: [
          {
@@ -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(() => {
@@ -10,6 +10,7 @@ module.exports = [
  "/wallets",
  "/account-abstraction",
  "/payments",
+  "/payments/x402",
  "/auth",
  "/in-app-wallets",
  "/transactions",
@@ -21,8 +22,8 @@ module.exports = [
  "/storage",
  // -- end scale category

-  // -- nebula
-  "/nebula",
+  // -- ai
+  "/ai",
  // -- contracts
  "/contracts",
  "/contracts/modular-contracts",
@@ -64,4 +65,5 @@ module.exports = [
  "/enterprise",
  "/token",
  "/vault",
+  "/monetize/bridge",
 ];
@@ -8,10 +8,19 @@
  ],
  "ignoreBinaries": ["only-allow"],
  "ignoreDependencies": [
+    "@thirdweb-dev/api",
    "@thirdweb-dev/service-utils",
    "@thirdweb-dev/vault-sdk",
+    "thirdweb",
    "@types/color",
-    "fast-xml-parser"
+    "fast-xml-parser",
+    "@workspace/ui",
+    "tailwindcss-animate",
+    "@radix-ui/react-tooltip",
+    "shiki",
+    "react-children-utilities",
+    "react-markdown",
+    "remark-gfm"
  ],
  "next": true,
  "project": ["src/**"]
@@ -115,6 +115,7 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
 const FRAMER_ADDITIONAL_LANGUAGES = ["es"];

 const baseNextConfig: NextConfig = {
+  transpilePackages: ["@workspace/ui"],
  eslint: {
    ignoreDuringBuilds: true,
  },
@@ -196,7 +197,6 @@ const baseNextConfig: NextConfig = {
      ]),
    ];
  },
-  serverExternalPackages: ["pino-pretty"],
 };

 function getConfig(): NextConfig {
@@ -19,21 +19,25 @@
    "@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",
+    "@stripe/react-stripe-js": "4.0.2",
+    "@stripe/stripe-js": "7.9.0",
    "@tanstack/react-query": "5.81.5",
    "@tanstack/react-table": "^8.21.3",
+    "@thirdweb-dev/api": "workspace:*",
    "@thirdweb-dev/service-utils": "workspace:*",
    "@thirdweb-dev/vault-sdk": "workspace:*",
    "@vercel/functions": "2.2.2",
    "@vercel/og": "^0.6.8",
+    "@workspace/ui": "workspace:*",
    "abitype": "1.0.8",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "compare-versions": "^6.1.0",
    "date-fns": "4.1.0",
    "fast-xml-parser": "^5.2.5",
+    "fetch-event-stream": "0.1.5",
    "fuse.js": "7.1.0",
    "input-otp": "^1.4.1",
    "ioredis": "^5.6.1",
@@ -43,11 +47,10 @@
    "next-themes": "^0.4.6",
    "nextjs-toploader": "^1.6.12",
    "nuqs": "^2.4.3",
-    "p-limit": "^6.2.0",
+    "ogl": "^1.0.11",
    "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 +65,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",
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {},
-    tailwindcss: {},
-  },
-};
@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";
@@ -460,6 +460,12 @@ async function redirects() {
      permanent: false,
      source: "/universal-bridge",
    },
+    // redirect /nebula to /ai
+    {
+      destination: "/ai",
+      permanent: false,
+      source: "/nebula",
+    },
    ...legacyDashboardToTeamRedirects,
    ...projectPageRedirects,
    ...teamPageRedirects,
@@ -468,6 +474,11 @@ async function redirects() {
      destination: "/team/~/~/support",
      permanent: false,
    },
+    {
+      source: "/routes",
+      destination: "/tokens",
+      permanent: false,
+    },
  ];
 }

@@ -0,0 +1,70 @@
+"use server";
+
+import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
+import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
+import type { ProjectWalletSummary } from "@/lib/server/project-wallet";
+
+interface VaultWalletListItem {
+  id: string;
+  address: string;
+  metadata?: {
+    label?: string;
+    projectId?: string;
+    teamId?: string;
+    type?: string;
+  } | null;
+}
+
+export async function listProjectServerWallets(params: {
+  managementAccessToken: string;
+  projectId: string;
+  pageSize?: number;
+}): Promise<ProjectWalletSummary[]> {
+  const { managementAccessToken, projectId, pageSize = 100 } = params;
+
+  if (!managementAccessToken || !NEXT_PUBLIC_THIRDWEB_VAULT_URL) {
+    return [];
+  }
+
+  try {
+    const vaultClient = await createVaultClient({
+      baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
+    });
+
+    const response = await listEoas({
+      client: vaultClient,
+      request: {
+        auth: {
+          accessToken: managementAccessToken,
+        },
+        options: {
+          page: 0,
+          // @ts-expect-error - Vault SDK expects snake_case pagination fields
+          page_size: pageSize,
+        },
+      },
+    });
+
+    if (!response.success || !response.data?.items) {
+      return [];
+    }
+
+    const items = response.data.items as VaultWalletListItem[];
+
+    return items
+      .filter((item) => {
+        return (
+          item.metadata?.projectId === projectId &&
+          (!item.metadata?.type || item.metadata.type === "server-wallet")
+        );
+      })
+      .map<ProjectWalletSummary>((item) => ({
+        id: item.id,
+        address: item.address,
+        label: item.metadata?.label ?? undefined,
+      }));
+  } catch (error) {
+    console.error("Failed to list project server wallets", error);
+    return [];
+  }
+}
@@ -0,0 +1,74 @@
+"use server";
+
+import { configure, sendTokens } from "@thirdweb-dev/api";
+import { THIRDWEB_API_HOST } from "@/constants/urls";
+
+configure({
+  override: {
+    baseUrl: THIRDWEB_API_HOST,
+  },
+});
+
+export async function sendProjectWalletTokens(options: {
+  walletAddress: string;
+  recipientAddress: string;
+  chainId: number;
+  quantityWei: string;
+  publishableKey: string;
+  teamId: string;
+  tokenAddress?: string;
+  secretKey: string;
+  vaultAccessToken?: string;
+}) {
+  const {
+    walletAddress,
+    recipientAddress,
+    chainId,
+    quantityWei,
+    publishableKey,
+    teamId,
+    tokenAddress,
+    secretKey,
+    vaultAccessToken,
+  } = options;
+
+  if (!secretKey) {
+    return {
+      error: "A project secret key is required to send funds.",
+      ok: false,
+    } as const;
+  }
+
+  const response = await sendTokens({
+    body: {
+      chainId,
+      from: walletAddress,
+      recipients: [
+        {
+          address: recipientAddress,
+          quantity: quantityWei,
+        },
+      ],
+      ...(tokenAddress ? { tokenAddress } : {}),
+    },
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": publishableKey,
+      "x-secret-key": secretKey,
+      "x-team-id": teamId,
+      ...(vaultAccessToken ? { "x-vault-access-token": vaultAccessToken } : {}),
+    },
+  });
+
+  if (response.error || !response.data) {
+    return {
+      error: response.error || "Failed to submit transfer request.",
+      ok: false,
+    } as const;
+  }
+
+  return {
+    ok: true,
+    transactionIds: response.data.result?.transactionIds ?? [],
+  } as const;
+}
@@ -14,6 +14,7 @@ type ProxyActionParams = {
  body?: string;
  headers?: Record<string, string>;
  parseAsText?: boolean;
+  signal?: AbortSignal;
 };

 type ProxyActionResult<T> =
@@ -1,8 +1,13 @@
 import "server-only";

+import { cookies, headers } from "next/headers";
 import Stripe from "stripe";
 import type { Team } from "@/api/team/get-team";
-import { STRIPE_SECRET_KEY } from "@/constants/server-envs";
+import {
+  GROWTH_PLAN_SKU,
+  PAYMENT_METHOD_CONFIGURATION,
+  STRIPE_SECRET_KEY,
+} from "@/constants/server-envs";

 let existingStripe: Stripe | undefined;

@@ -72,3 +77,64 @@ export async function getStripeBalance(customerId: string) {
  // Stripe returns a positive balance for credits, so we need to divide by -100 to get the actual balance (as long as the balance is not 0)
  return customer.balance === 0 ? 0 : customer.balance / -100;
 }
+
+export async function fetchClientSecret(team: Team) {
+  "use server";
+  const origin = (await headers()).get("origin");
+  const stripe = getStripe();
+  const customerId = team.stripeCustomerId;
+
+  if (!customerId) {
+    throw new Error("No customer ID found");
+  }
+
+  // try to get the gclid cookie
+  const gclid = (await cookies()).get("gclid")?.value;
+
+  // Create Checkout Sessions from body params.
+  const session = await stripe.checkout.sessions.create({
+    ui_mode: "embedded",
+    line_items: [
+      {
+        // Provide the exact Price ID (for example, price_1234) of
+        // the product you want to sell
+        price: GROWTH_PLAN_SKU,
+        quantity: 1,
+      },
+    ],
+    mode: "subscription",
+
+    return_url: `${origin}/get-started/team/${team.slug}/select-plan?session_id={CHECKOUT_SESSION_ID}`,
+    automatic_tax: { enabled: true },
+    allow_promotion_codes: true,
+    customer: customerId,
+    customer_update: {
+      address: "auto",
+    },
+    payment_method_collection: "always",
+    payment_method_configuration: PAYMENT_METHOD_CONFIGURATION,
+    subscription_data: {
+      trial_period_days: 14,
+      trial_settings: {
+        end_behavior: {
+          missing_payment_method: "cancel",
+        },
+      },
+      // if gclid exists, set it as a metadata field so we can attribute the conversion later
+      metadata: gclid ? { gclid } : undefined,
+    },
+  });
+
+  if (!session.client_secret) {
+    throw new Error("No client secret found");
+  }
+
+  return session.client_secret;
+}
+
+export async function getStripeSessionById(sessionId: string) {
+  const session = await getStripe().checkout.sessions.retrieve(sessionId, {
+    expand: ["line_items", "payment_intent"],
+  });
+  return session;
+}
@@ -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
-  },
-);
@@ -24,6 +24,7 @@ export function reportContractDeployed(properties: {
  publisher: string | undefined;
  contractName: string | undefined;
  deploymentType?: "asset";
+  is_testnet: boolean | undefined;
 }) {
  posthog.capture("contract deployed", properties);
 }
@@ -40,6 +41,7 @@ export function reportContractDeployed(properties: {
 export function reportContractDeployFailed(properties: {
  errorMessage: string;
  chainId: number;
+  is_testnet: boolean | undefined;
  publisher: string | undefined;
  contractName: string | undefined;
 }) {
@@ -81,33 +83,6 @@ export function reportOnboardingStarted() {
  posthog.capture("onboarding started");
 }

-/**
- * ### Why do we need to report this event?
- * - To track the number of teams that select a paid plan during onboarding
- * - To know **which** plan was selected
- *
- * ### Who is responsible for this event?
- * @jnsdls
- *
- */
-export function reportOnboardingPlanSelected(properties: {
-  plan: Team["billingPlan"];
-}) {
-  posthog.capture("onboarding plan selected", properties);
-}
-
-/**
- * ### Why do we need to report this event?
- * - To track the number of teams that skip the plan-selection step during onboarding
- *
- * ### Who is responsible for this event?
- * @jnsdls
- *
- */
-export function reportOnboardingPlanSelectionSkipped() {
-  posthog.capture("onboarding plan selection skipped");
-}
-
 /**
 * ### Why do we need to report this event?
 * - To track the number of teams that invite members during onboarding
@@ -161,6 +136,18 @@ export function reportOnboardingMembersUpsellPlanSelected(properties: {
  posthog.capture("onboarding members upsell plan selected", properties);
 }

+/**
+ * ### Why do we need to report this event?
+ * - To track the number of teams that completed the team member step during onboarding
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ *
+ */
+export function reportTeamMemberStepCompleted() {
+  posthog.capture("onboarding members completed");
+}
+
 /**
 * ### Why do we need to report this event?
 * - To track the number of teams that completed onboarding
@@ -186,9 +173,7 @@ export function reportOnboardingCompleted() {
 *
 */
 export function reportFaucetUsed(properties: { chainId: number }) {
-  posthog.capture("faucet used", {
-    chainId: properties.chainId,
-  });
+  posthog.capture("faucet used", properties);
 }

 // ----------------------------
@@ -212,19 +197,18 @@ export function reportChainConfigurationAdded(properties: {
    decimals: number;
  };
 }) {
-  posthog.capture("chain configuration added", {
-    chainId: properties.chainId,
-    chainName: properties.chainName,
-    nativeCurrency: properties.nativeCurrency,
-    rpcURLs: properties.rpcURLs,
-  });
+  posthog.capture("chain configuration added", properties);
 }

 // ----------------------------
 // ASSETS
 // ----------------------------

-type AssetContractType = "DropERC20" | "DropERC1155" | "DropERC721";
+type AssetContractType =
+  | "DropERC20"
+  | "DropERC1155"
+  | "DropERC721"
+  | "ERC20Asset";

 /**
 * ### Why do we need to report this event?
@@ -236,19 +220,120 @@ type AssetContractType = "DropERC20" | "DropERC1155" | "DropERC721";
 */
 export function reportAssetBuySuccessful(properties: {
  chainId: number;
-  contractType: AssetContractType;
+  contractType: AssetContractType | undefined;
  assetType: "nft" | "coin";
+  is_testnet: boolean | undefined;
 }) {
-  posthog.capture("asset buy successful", {
-    assetType: properties.assetType,
-    chainId: properties.chainId,
-    contractType: properties.contractType,
-  });
+  posthog.capture("asset buy successful", properties);
+}
+
+type TokenSwapParams = {
+  buyTokenChainId: number;
+  buyTokenAddress: string;
+  sellTokenChainId: number;
+  sellTokenAddress: string;
+  pageType: "asset" | "bridge" | "chain";
+};
+
+type TokenBuyParams = {
+  buyTokenChainId: number | undefined;
+  buyTokenAddress: string | undefined;
+  pageType: "asset" | "bridge" | "chain";
+};
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of successful token buys
+ * - To track which tokens are being bought the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuySuccessful(properties: TokenBuyParams) {
+  posthog.capture("token buy successful", properties);
 }

 /**
 * ### Why do we need to report this event?
- * - To track number of failed asset purchases from the token page
+ * - To track number of failed token buys
+ * - To track which token buys are failing
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuyFailed(properties: TokenBuyParams) {
+  posthog.capture("token buy failed", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of cancelled token buys
+ * - To track which token buys are being cancelled
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuyCancelled(properties: TokenBuyParams) {
+  posthog.capture("token buy cancelled", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of successful token swaps
+ * - To track which tokens are being swapped the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenSwapSuccessful(properties: TokenSwapParams) {
+  posthog.capture("token swap successful", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track impressions of the swap widget
+ * - To create a funnel "swap widget shown" -> "swap widget successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportSwapWidgetShown(properties: {
+  pageType: "asset" | "bridge" | "chain";
+}) {
+  posthog.capture("swap widget shown", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of failed token swaps
+ * - To track which tokens are being swapped the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenSwapFailed(
+  properties: TokenSwapParams & {
+    errorMessage: string;
+  },
+) {
+  posthog.capture("token swap failed", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of cancelled token swaps
+ * - To track which tokens are being swapped the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenSwapCancelled(properties: TokenSwapParams) {
+  posthog.capture("token swap cancelled", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of failed asset purchases
 * - To track the errors that users encounter when trying to purchase an asset
 *
 * ### Who is responsible for this event?
@@ -256,16 +341,29 @@ export function reportAssetBuySuccessful(properties: {
 */
 export function reportAssetBuyFailed(properties: {
  chainId: number;
-  contractType: AssetContractType;
+  is_testnet: boolean | undefined;
+  contractType: AssetContractType | undefined;
  assetType: "nft" | "coin";
  error: string;
 }) {
-  posthog.capture("asset buy failed", {
-    assetType: properties.assetType,
-    chainId: properties.chainId,
-    contractType: properties.contractType,
-    error: properties.error,
-  });
+  posthog.capture("asset buy failed", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of cancelled asset purchases from the token page
+ * - To track the errors that users encounter when trying to purchase an asset
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportAssetBuyCancelled(properties: {
+  chainId: number;
+  is_testnet: boolean | undefined;
+  contractType: AssetContractType | undefined;
+  assetType: "nft" | "coin";
+}) {
+  posthog.capture("asset buy cancelled", properties);
 }

 // Assets Landing Page ----------------------------
@@ -310,10 +408,7 @@ export function reportAssetCreationStepConfigured(
        step: "coin-info" | "token-distribution" | "launch-coin";
      },
 ) {
-  posthog.capture("asset creation step configured", {
-    assetType: properties.assetType,
-    step: properties.step,
-  });
+  posthog.capture("asset creation step configured", properties);
 }

 /**
@@ -327,13 +422,21 @@ export function reportAssetCreationStepConfigured(
 export function reportAssetCreationSuccessful(properties: {
  assetType: "nft" | "coin";
  contractType: AssetContractType;
+  chainId: number;
+  is_testnet: boolean | undefined;
 }) {
-  posthog.capture("asset creation successful", {
-    assetType: properties.assetType,
-    contractType: properties.contractType,
-  });
+  posthog.capture("asset creation successful", properties);
 }

+type CoinCreationStep =
+  | "erc20-asset:deploy-contract"
+  | "erc20-asset:airdrop-tokens"
+  | "erc20-asset:approve-airdrop-tokens"
+  | "drop-erc20:deploy-contract"
+  | "drop-erc20:set-claim-conditions"
+  | "drop-erc20:mint-tokens"
+  | "drop-erc20:airdrop-tokens";
+
 /**
 * ### Why do we need to report this event?
 * - To track number of failed asset creations
@@ -344,7 +447,12 @@ export function reportAssetCreationSuccessful(properties: {
 * @MananTank
 */
 export function reportAssetCreationFailed(
-  properties: { contractType: AssetContractType; error: string } & (
+  properties: {
+    contractType: AssetContractType;
+    error: string;
+    is_testnet: boolean | undefined;
+    chainId: number;
+  } & (
    | {
        assetType: "nft";
        step:
@@ -355,20 +463,11 @@ export function reportAssetCreationFailed(
      }
    | {
        assetType: "coin";
-        step:
-          | "deploy-contract"
-          | "set-claim-conditions"
-          | "mint-tokens"
-          | "airdrop-tokens";
+        step: CoinCreationStep;
      }
  ),
 ) {
-  posthog.capture("asset creation failed", {
-    assetType: properties.assetType,
-    contractType: properties.contractType,
-    error: properties.error,
-    step: properties.step,
-  });
+  posthog.capture("asset creation failed", properties);
 }

 type UpsellParams = {
@@ -464,10 +563,25 @@ export function reportPaymentLinkBuyFailed(properties: {
 export function reportAssetPageview(properties: {
  assetType: "nft" | "coin";
  chainId: number;
+  is_testnet: boolean | undefined;
 }) {
  posthog.capture("asset pageview", properties);
 }

+/**
+ * ### Why do we need to report this event?
+ * - To understand which chains are being viewed the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportChainPageview(properties: {
+  chainId: number;
+  is_testnet: boolean | undefined;
+}) {
+  posthog.capture("chain pageview", properties);
+}
+
 /**
 * ### Why do we need to report this event?
 * - To track the usage of fund wallet modal
@@ -517,3 +631,59 @@ export function reportTokenUpsellClicked(params: {
 }) {
  posthog.capture("token upsell clicked", params);
 }
+
+// ----------------------------
+// CHAIN INFRASTRUCTURE CHECKOUT
+// ----------------------------
+/**
+ * ### Why do we need to report this event?
+ * - To record explicit user acknowledgement when proceeding to checkout without RPC
+ * - To measure how often customers choose to omit RPC while purchasing Insight and/or Account Abstraction
+ * - To correlate potential support issues arising from missing RPC
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ */
+export function reportChainInfraRpcOmissionAgreed(properties: {
+  chainId: number;
+  frequency: "monthly" | "annual";
+  includeInsight: boolean;
+  includeAccountAbstraction: boolean;
+}) {
+  posthog.capture("chain infra checkout rpc omission agreed", properties);
+}
+
+// ----------------------------
+// FEEDBACK
+// ----------------------------
+
+/**
+ * ### Why do we need to report this event?
+ * - To track user feedback and sentiment about the product
+ * - To identify common issues or feature requests
+ * - To measure user satisfaction and engagement
+ * - To prioritize product improvements based on user input
+ *
+ * ### Who is responsible for this event?
+ * @gisellechacon
+ */
+export function reportProductFeedback(properties: {
+  feedback: string;
+  source: "desktop" | "mobile";
+}) {
+  posthog.capture("product feedback submitted", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track conversions for the bridge page links
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportBridgePageLinkClick(params: {
+  linkType: "integrate-bridge" | "trending-tokens";
+}) {
+  posthog.capture("bridge page link clicked", params);
+}
@@ -4,6 +4,7 @@ import { unstable_cache } from "next/cache";
 import { ANALYTICS_SERVICE_URL } from "@/constants/server-envs";
 import { normalizeTime } from "@/lib/time";
 import type {
+  AIUsageStats,
  AnalyticsQueryParams,
  EcosystemWalletStats,
  EngineCloudStats,
@@ -13,9 +14,7 @@ import type {
  UniversalBridgeWalletStats,
  UserOpStats,
  WalletStats,
-  WalletUserStats,
  WebhookLatencyStats,
-  WebhookRequestStats,
  WebhookSummaryStats,
 } from "@/types/analytics";
 import { getChains } from "./chain";
@@ -147,7 +146,13 @@ const cached_getWalletConnections = unstable_cache(
    }

    const json = await res.json();
-    return json.data as WalletStats[];
+    return (json.data as WalletStats[]).filter(
+      (w) =>
+        w.walletType !== "smart" &&
+        w.walletType !== "smartWallet" &&
+        w.walletType !== "inApp" &&
+        w.walletType !== "inAppWallet",
+    );
  },
  ["getWalletConnections"],
  {
@@ -200,6 +205,41 @@ export function getInAppWalletUsage(
  return cached_getInAppWalletUsage(normalizedParams(params), authToken);
 }

+const cached_getAiUsage = unstable_cache(
+  async (
+    params: AnalyticsQueryParams,
+    authToken: string,
+  ): Promise<AIUsageStats[]> => {
+    const searchParams = buildSearchParams(params);
+    const res = await fetchAnalytics({
+      authToken,
+      url: `v2/nebula/usage?${searchParams.toString()}`,
+      init: {
+        method: "GET",
+      },
+    });
+
+    if (res?.status !== 200) {
+      const reason = await res?.text();
+      console.error(
+        `Failed to fetch AI usage, ${res?.status} - ${res.statusText} - ${reason}`,
+      );
+      return [];
+    }
+
+    const json = await res.json();
+    return json.data as AIUsageStats[];
+  },
+  ["getAiUsage"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
+
+export function getAiUsage(params: AnalyticsQueryParams, authToken: string) {
+  return cached_getAiUsage(normalizedParams(params), authToken);
+}
+
 const cached_getUserOpUsage = unstable_cache(
  async (
    params: AnalyticsQueryParams,
@@ -398,44 +438,6 @@ export function getRpcUsageByType(
  return cached_getRpcUsageByType(normalizedParams(params), authToken);
 }

-const cached_getWalletUsers = unstable_cache(
-  async (
-    params: AnalyticsQueryParams,
-    authToken: string,
-  ): Promise<WalletUserStats[]> => {
-    const searchParams = buildSearchParams(params);
-    const res = await fetchAnalytics({
-      authToken,
-      url: `v2/sdk/wallet-connects/users?${searchParams.toString()}`,
-      init: {
-        method: "GET",
-      },
-    });
-
-    if (res?.status !== 200) {
-      const reason = await res?.text();
-      console.error(
-        `Failed to fetch wallet user stats: ${res?.status} - ${res.statusText} - ${reason}`,
-      );
-      return [];
-    }
-
-    const json = await res.json();
-    return json.data as WalletUserStats[];
-  },
-  ["getWalletUsers"],
-  {
-    revalidate: 60 * 60, // 1 hour
-  },
-);
-
-export function getWalletUsers(
-  params: AnalyticsQueryParams,
-  authToken: string,
-) {
-  return cached_getWalletUsers(normalizedParams(params), authToken);
-}
-
 type ActiveStatus = {
  bundler: boolean;
  storage: boolean;
@@ -446,6 +448,7 @@ type ActiveStatus = {
  pay: boolean;
  inAppWallet: boolean;
  ecosystemWallet: boolean;
+  engineCloud: boolean;
 };

 export const isProjectActive = unstable_cache(
@@ -477,6 +480,7 @@ export const isProjectActive = unstable_cache(
        pay: false,
        rpc: false,
        sdk: false,
+        engineCloud: false,
        storage: false,
      } as ActiveStatus;
    }
@@ -486,7 +490,7 @@ export const isProjectActive = unstable_cache(
  },
  ["isProjectActive"],
  {
-    revalidate: 60 * 60, // 1 hour
+    revalidate: 30, // 30 seconds
  },
 );

@@ -590,7 +594,7 @@ const cached_getUniversalBridgeUsage = unstable_cache(
    if (res?.status !== 200) {
      const reason = await res?.text();
      console.error(
-        `Failed to fetch universal bridge stats: ${res?.status} - ${res.statusText} - ${reason}`,
+        `Failed to fetch bridge stats: ${res?.status} - ${res.statusText} - ${reason}`,
      );
      return [];
    }
@@ -634,7 +638,7 @@ const cached_getUniversalBridgeWalletUsage = unstable_cache(
    if (res?.status !== 200) {
      const reason = await res?.text();
      console.error(
-        `Failed to fetch universal bridge wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
+        `Failed to fetch bridge wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
      );
      return [];
    }
@@ -693,7 +697,7 @@ export function getEngineCloudMethodUsage(
  return cached_getEngineCloudMethodUsage(normalizedParams(params), authToken);
 }

-const cached_getWebhookSummary = unstable_cache(
+const _cached_getWebhookSummary = unstable_cache(
  async (
    params: AnalyticsQueryParams & { webhookId: string },
    authToken: string,
@@ -721,51 +725,7 @@ const cached_getWebhookSummary = unstable_cache(
  },
 );

-export function getWebhookSummary(
-  params: AnalyticsQueryParams & { webhookId: string },
-  authToken: string,
-) {
-  return cached_getWebhookSummary(normalizedParams(params), authToken);
-}
-
-const cached_getWebhookRequests = unstable_cache(
-  async (
-    params: AnalyticsQueryParams & { webhookId?: string },
-    authToken: string,
-  ): Promise<{ data: WebhookRequestStats[] } | { error: string }> => {
-    const searchParams = buildSearchParams(params);
-    if (params.webhookId) {
-      searchParams.append("webhookId", params.webhookId);
-    }
-
-    const res = await fetchAnalytics({
-      authToken,
-      url: `v2/webhook/requests?${searchParams.toString()}`,
-      init: {
-        method: "GET",
-      },
-    });
-    if (!res.ok) {
-      const reason = await res.text();
-      return { error: reason };
-    }
-
-    return (await res.json()) as { data: WebhookRequestStats[] };
-  },
-  ["getWebhookRequests"],
-  {
-    revalidate: 60 * 60, // 1 hour
-  },
-);
-
-export function getWebhookRequests(
-  params: AnalyticsQueryParams & { webhookId?: string },
-  authToken: string,
-) {
-  return cached_getWebhookRequests(normalizedParams(params), authToken);
-}
-
-const cached_getWebhookLatency = unstable_cache(
+const _cached_getWebhookLatency = unstable_cache(
  async (
    params: AnalyticsQueryParams & { webhookId?: string },
    authToken: string,
@@ -795,13 +755,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,
@@ -58,6 +58,7 @@ interface WebhookSingleResponse {
 }

 interface TestWebhookPayload {
+  webhook_id?: string;
  webhook_url: string;
  type?: "event" | "transaction";
 }
@@ -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();
-}
@@ -12,6 +12,7 @@ export type AuthOption =
  | "google"
  | "facebook"
  | "x"
+  | "tiktok"
  | "discord"
  | "farcaster"
  | "telegram"
@@ -297,38 +297,53 @@ export type PaymentsResponse = {
    totalCount: number;
  };
 };
+
+type BridgePaymentType = "buy" | "sell" | "transfer";
+type OnrampPaymentType = "onramp";
+
 export type Payment = {
+  // common
  id: string;
-  blockNumber?: bigint;
-  transactionId: string;
+  createdAt: string;
  clientId: string;
-  sender: string;
  receiver: string;
-  developerFeeRecipient: string;
-  developerFeeBps: number;
  transactions: Array<{
    chainId: number;
    transactionHash: string;
  }>;
  status: "PENDING" | "COMPLETED" | "FAILED" | "NOT_FOUND";
-  type: "buy" | "sell" | "transfer";
-  originAmount: bigint;
-  destinationAmount: bigint;
-  purchaseData: unknown;
-  originToken: {
-    address: string;
-    symbol: string;
-    decimals: number;
-    chainId: number;
-  };
+
+  destinationAmount: string;
  destinationToken: {
    address: string;
    symbol: string;
    decimals: number;
    chainId: number;
  };
-  createdAt: string;
-};
+  purchaseData: unknown;
+} & (
+  | {
+      type: BridgePaymentType;
+      transactionId: string;
+      blockNumber?: string;
+      sender: string;
+      developerFeeRecipient: string;
+      developerFeeBps: number;
+      originAmount: string;
+      originToken: {
+        address: string;
+        symbol: string;
+        decimals: number;
+        chainId: number;
+      };
+    }
+  | {
+      onrampId: string;
+      type: OnrampPaymentType;
+    }
+);
+
+export type BridgePayment = Extract<Payment, { type: BridgePaymentType }>;

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

-  const todayDate = new Date(Date.now());
+  const todayDate = new Date();
+  todayDate.setDate(todayDate.getDate() + 1); // Move to next day
+  todayDate.setHours(0, 0, 0, 0); // Set to start of next day (00:00)

  const value: Range = {
    from: subDays(todayDate, durationInfo.days),
@@ -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}
@@ -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";
@@ -0,0 +1,252 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { Chain } from "thirdweb";
+import { BuyWidget, SwapWidget } from "thirdweb/react";
+import {
+  reportAssetBuyCancelled,
+  reportAssetBuyFailed,
+  reportAssetBuySuccessful,
+  reportSwapWidgetShown,
+  reportTokenBuyCancelled,
+  reportTokenBuyFailed,
+  reportTokenBuySuccessful,
+  reportTokenSwapCancelled,
+  reportTokenSwapFailed,
+  reportTokenSwapSuccessful,
+} from "@/analytics/report";
+import { Button } from "@/components/ui/button";
+import {
+  NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID,
+  NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID,
+  NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID,
+} from "@/constants/public-envs";
+import { cn } from "@/lib/utils";
+import { parseError } from "@/utils/errorParser";
+import { getSDKTheme } from "@/utils/sdk-component-theme";
+import { getConfiguredThirdwebClient } from "../../constants/thirdweb.server";
+
+type PageType = "asset" | "bridge" | "chain";
+
+export function BuyAndSwapEmbed(props: {
+  chain: Chain;
+  tokenAddress: string | undefined;
+  buyAmount: string | undefined;
+  pageType: PageType;
+  isTestnet: boolean | undefined;
+}) {
+  const { theme } = useTheme();
+  const [tab, setTab] = useState<"buy" | "swap">("swap");
+  const themeObj = getSDKTheme(theme === "light" ? "light" : "dark");
+  const isMounted = useRef(false);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (isMounted.current) {
+      return;
+    }
+    isMounted.current = true;
+    reportSwapWidgetShown({
+      pageType: props.pageType,
+    });
+  }, [props.pageType]);
+
+  const client = useMemo(() => {
+    return getConfiguredThirdwebClient({
+      clientId:
+        props.pageType === "asset"
+          ? NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID
+          : props.pageType === "bridge"
+            ? NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID
+            : props.pageType === "chain"
+              ? NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID
+              : undefined,
+      secretKey: undefined,
+      teamId: undefined,
+    });
+  }, [props.pageType]);
+
+  return (
+    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10 shadow-xl min-w-0">
+      <div className="flex gap-2.5 p-4 border-b border-dashed">
+        <TabButton
+          label="Swap"
+          onClick={() => setTab("swap")}
+          isActive={tab === "swap"}
+        />
+        <TabButton
+          label="Buy"
+          onClick={() => setTab("buy")}
+          isActive={tab === "buy"}
+        />
+      </div>
+
+      {tab === "buy" && (
+        <BuyWidget
+          amount={props.buyAmount || "1"}
+          chain={props.chain}
+          className="!rounded-2xl !border-none"
+          title=""
+          client={client}
+          connectOptions={{
+            autoConnect: false,
+          }}
+          onError={(e, quote) => {
+            const errorMessage = parseError(e);
+
+            reportTokenBuyFailed({
+              buyTokenChainId:
+                quote?.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote?.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote?.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote?.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
+            if (props.pageType === "asset") {
+              reportAssetBuyFailed({
+                assetType: "coin",
+                chainId: props.chain.id,
+                error: errorMessage,
+                contractType: undefined,
+                is_testnet: props.isTestnet,
+              });
+            }
+          }}
+          onCancel={(quote) => {
+            reportTokenBuyCancelled({
+              buyTokenChainId:
+                quote?.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote?.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote?.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote?.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
+            if (props.pageType === "asset") {
+              reportAssetBuyCancelled({
+                assetType: "coin",
+                chainId: props.chain.id,
+                contractType: undefined,
+                is_testnet: props.isTestnet,
+              });
+            }
+          }}
+          onSuccess={(quote) => {
+            reportTokenBuySuccessful({
+              buyTokenChainId:
+                quote.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
+            if (props.pageType === "asset") {
+              reportAssetBuySuccessful({
+                assetType: "coin",
+                chainId: props.chain.id,
+                contractType: undefined,
+                is_testnet: props.isTestnet,
+              });
+            }
+          }}
+          theme={themeObj}
+          tokenAddress={props.tokenAddress as `0x${string}`}
+          paymentMethods={["card"]}
+        />
+      )}
+
+      {tab === "swap" && (
+        <SwapWidget
+          client={client}
+          theme={themeObj}
+          className="!rounded-2xl !border-none"
+          prefill={{
+            // buy this token by default
+            buyToken: {
+              chainId: props.chain.id,
+              tokenAddress: props.tokenAddress,
+            },
+            // sell the native token by default (but if buytoken is a native token, don't set)
+            sellToken: props.tokenAddress
+              ? {
+                  chainId: props.chain.id,
+                }
+              : undefined,
+          }}
+          onError={(error, quote) => {
+            const errorMessage = parseError(error);
+            reportTokenSwapFailed({
+              errorMessage: errorMessage,
+              buyTokenChainId: quote.intent.destinationChainId,
+              buyTokenAddress: quote.intent.destinationTokenAddress,
+              sellTokenChainId: quote.intent.originChainId,
+              sellTokenAddress: quote.intent.originTokenAddress,
+              pageType: props.pageType,
+            });
+          }}
+          onSuccess={(quote) => {
+            reportTokenSwapSuccessful({
+              buyTokenChainId: quote.intent.destinationChainId,
+              buyTokenAddress: quote.intent.destinationTokenAddress,
+              sellTokenChainId: quote.intent.originChainId,
+              sellTokenAddress: quote.intent.originTokenAddress,
+              pageType: props.pageType,
+            });
+          }}
+          onCancel={(quote) => {
+            reportTokenSwapCancelled({
+              buyTokenChainId: quote.intent.destinationChainId,
+              buyTokenAddress: quote.intent.destinationTokenAddress,
+              sellTokenChainId: quote.intent.originChainId,
+              sellTokenAddress: quote.intent.originTokenAddress,
+              pageType: props.pageType,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function TabButton(props: {
+  label: string;
+  onClick: () => void;
+  isActive: boolean;
+}) {
+  return (
+    <Button
+      onClick={props.onClick}
+      className={cn(
+        "rounded-full text-muted-foreground px-5 text-base bg-accent",
+        props.isActive && "text-foreground border-foreground",
+      )}
+      variant="outline"
+    >
+      {props.label}
+    </Button>
+  );
+}
@@ -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";

@@ -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: {
@@ -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";
@@ -1,7 +1,7 @@
 "use client";

 import { useCallback, useMemo } from "react";
-import type { ThirdwebClient } from "thirdweb";
+import type { Bridge, ThirdwebClient } from "thirdweb";
 import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
@@ -29,16 +29,18 @@ export function MultiNetworkSelector(props: {
  client: ThirdwebClient;
  chainIds?: number[];
 }) {
-  let { allChains, idToChain } = useAllChainsData();
-
-  if (props.chainIds && props.chainIds.length > 0) {
-    allChains = allChains.filter((chain) =>
-      props.chainIds?.includes(chain.chainId),
-    );
-  }
+  const { allChains, idToChain } = useAllChainsData();

  const options = useMemo(() => {
-    let sortedChains = allChains;
+    let chains = allChains.filter((chain) => chain.status !== "deprecated");
+
+    if (props.chainIds && props.chainIds.length > 0) {
+      chains = allChains.filter((chain) =>
+        props.chainIds?.includes(chain.chainId),
+      );
+    }
+
+    let sortedChains = chains;

    if (props.priorityChains) {
      const priorityChainsSet = new Set();
@@ -69,7 +71,13 @@ export function MultiNetworkSelector(props: {
        value: String(chain.chainId),
      };
    });
-  }, [allChains, props.priorityChains, idToChain, props.hideTestnets]);
+  }, [
+    allChains,
+    props.priorityChains,
+    idToChain,
+    props.hideTestnets,
+    props.chainIds,
+  ]);

  const searchFn = useCallback(
    (option: Option, searchValue: string) => {
@@ -155,16 +163,38 @@ export function SingleNetworkSelector(props: {
  disableDeprecated?: boolean;
  placeholder?: string;
  client: ThirdwebClient;
+  priorityChains?: number[];
 }) {
  const { allChains, idToChain } = useAllChainsData();

  const chainsToShow = useMemo(() => {
    let chains = allChains;

+    chains = chains.filter((chain) => chain.status !== "deprecated");
+
    if (props.disableTestnets) {
      chains = chains.filter((chain) => !chain.testnet);
    }

+    if (props.priorityChains) {
+      const priorityChainsSet = new Set();
+      for (const chainId of props.priorityChains || []) {
+        priorityChainsSet.add(chainId);
+      }
+
+      const priorityChains = (props.priorityChains || [])
+        .map((chainId) => {
+          return idToChain.get(chainId);
+        })
+        .filter((v) => !!v);
+
+      const otherChains = allChains.filter(
+        (chain) => !priorityChainsSet.has(chain.chainId),
+      );
+
+      chains = [...priorityChains, ...otherChains];
+    }
+
    if (props.chainIds) {
      const chainIdSet = new Set(props.chainIds);
      chains = chains.filter((chain) => chainIdSet.has(chain.chainId));
@@ -180,6 +210,8 @@ export function SingleNetworkSelector(props: {
    props.chainIds,
    props.disableTestnets,
    props.disableDeprecated,
+    props.priorityChains,
+    idToChain,
  ]);

  const options = useMemo(() => {
@@ -264,3 +296,89 @@ export function SingleNetworkSelector(props: {
    />
  );
 }
+
+type BridgeNetworkSelectorProps = {
+  chainId: number | undefined;
+  onChange: (chainId: number) => void;
+  className?: string;
+  popoverContentClassName?: string;
+  side?: "left" | "right" | "top" | "bottom";
+  align?: "center" | "start" | "end";
+  placeholder?: string;
+  client: ThirdwebClient;
+  chains: Bridge.chains.Result;
+};
+
+export function BridgeNetworkSelector(props: BridgeNetworkSelectorProps) {
+  const options = useMemo(() => {
+    return props.chains.map((chain) => {
+      return {
+        label: cleanChainName(chain.name),
+        value: String(chain.chainId),
+      };
+    });
+  }, [props.chains]);
+
+  const searchFn = useCallback(
+    (option: Option, searchValue: string) => {
+      const chain = props.chains.find(
+        (chain) => chain.chainId === Number(option.value),
+      );
+      if (!chain) {
+        return false;
+      }
+
+      if (Number.isInteger(Number.parseInt(searchValue))) {
+        return String(chain.chainId).startsWith(searchValue);
+      }
+      return chain.name.toLowerCase().includes(searchValue.toLowerCase());
+    },
+    [props.chains],
+  );
+
+  const renderOption = useCallback(
+    (option: Option) => {
+      const chain = props.chains.find(
+        (chain) => chain.chainId === Number(option.value),
+      );
+      if (!chain) {
+        return option.label;
+      }
+
+      return (
+        <div className="flex justify-between gap-4">
+          <span className="flex grow gap-2 truncate text-left">
+            <ChainIconClient
+              className="size-5"
+              client={props.client}
+              src={chain.icon}
+              loading="lazy"
+            />
+            {cleanChainName(chain.name)}
+          </span>
+        </div>
+      );
+    },
+    [props.chains, props.client],
+  );
+
+  return (
+    <SelectWithSearch
+      align={props.align}
+      className={props.className}
+      closeOnSelect={true}
+      onValueChange={(chainId) => {
+        props.onChange(Number(chainId));
+      }}
+      options={options}
+      overrideSearchFn={searchFn}
+      placeholder={props.placeholder || "Select Chain"}
+      popoverContentClassName={props.popoverContentClassName}
+      renderOption={renderOption}
+      searchPlaceholder="Search by Name or Chain ID"
+      showCheck={false}
+      side={props.side}
+      value={props.chainId?.toString()}
+    />
+  );
+}
@@ -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(
@@ -10,13 +10,14 @@ interface SignatureOption {

 interface SignatureSelectorProps {
  options: SignatureOption[];
-  value: string;
-  onChange: (val: string) => void;
+  value: string | string[];
+  onChange: (val: string | string[]) => void;
  setAbi?: (abi: string) => void;
  placeholder?: string;
  disabled?: boolean;
  secondaryTextFormatter?: (sig: SignatureOption) => string;
  className?: string;
+  multiSelect?: boolean;
 }

 export function SignatureSelector({
@@ -28,6 +29,7 @@ export function SignatureSelector({
  disabled,
  secondaryTextFormatter,
  className,
+  multiSelect = false,
 }: SignatureSelectorProps) {
  const [searchValue, setSearchValue] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);
@@ -42,38 +44,96 @@ export function SignatureSelector({
    }));
  }, [options, secondaryTextFormatter]);

-  // Check if the current value is a custom value (not in options)
-  const isCustomValue = value && !options.some((opt) => opt.value === value);
-
-  // Add the custom value as an option if needed
-  const allOptions = useMemo(() => {
-    if (isCustomValue && value) {
-      return [...formattedOptions, { label: value, value }];
+  // Handle both single and multi-select values
+  const currentValues = useMemo((): string[] => {
+    if (multiSelect) {
+      if (Array.isArray(value)) {
+        return value.filter(
+          (val): val is string =>
+            val !== undefined && val !== null && val !== "",
+        );
+      } else {
+        return value ? [value] : [];
+      }
+    } else {
+      if (Array.isArray(value)) {
+        return value.length > 0 && value[0] ? [value[0]] : [];
+      } else {
+        return value ? [value] : [];
+      }
    }
-    return formattedOptions;
-  }, [formattedOptions, isCustomValue, value]);
+  }, [value, multiSelect]);

-  // Single-select MultiSelect wrapper
+  // Check if the current values include custom values (not in options)
+  const customValues = useMemo((): string[] => {
+    return currentValues.filter(
+      (val): val is string =>
+        val !== undefined &&
+        val !== null &&
+        val !== "" &&
+        !options.some((opt) => opt.value === val),
+    );
+  }, [currentValues, options]);
+
+  // Add the custom values as options if needed
+  const allOptions = useMemo(() => {
+    const customOptions = customValues.map((val) => ({
+      label: val,
+      value: val,
+    }));
+    return [...formattedOptions, ...customOptions];
+  }, [formattedOptions, customValues]);
+
+  // Multi-select or single-select MultiSelect wrapper
  const handleSelectedValuesChange = useCallback(
    (selected: string[]) => {
-      // Always use the last selected value for single-select behavior
-      const selectedValue =
-        selected.length > 0 ? (selected[selected.length - 1] ?? "") : "";
-      onChange(selectedValue);
-      const found = options.find((opt) => opt.value === selectedValue);
-      if (setAbi) {
-        setAbi(found?.abi || "");
+      if (multiSelect) {
+        // Multi-select behavior
+        onChange(selected);
+        // For multi-select, we'll use the ABI from the first selected option that has one
+        const firstOptionWithAbi = selected.find((selectedValue) => {
+          const found = options.find((opt) => opt.value === selectedValue);
+          return found?.abi;
+        });
+        if (setAbi && firstOptionWithAbi) {
+          const found = options.find((opt) => opt.value === firstOptionWithAbi);
+          setAbi(found?.abi || "");
+        }
+      } else {
+        // Single-select behavior (maintain backward compatibility)
+        const selectedValue =
+          selected.length > 0 ? (selected[selected.length - 1] ?? "") : "";
+        onChange(selectedValue);
+        const found = options.find((opt) => opt.value === selectedValue);
+        if (setAbi) {
+          setAbi(found?.abi || "");
+        }
      }
      setSearchValue("");
    },
-    [onChange, setAbi, options],
+    [onChange, setAbi, options, multiSelect],
  );

  // Handle custom value entry
  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === "Enter" && searchValue.trim()) {
      if (!options.some((opt) => opt.value === searchValue.trim())) {
-        onChange(searchValue.trim());
+        if (multiSelect) {
+          // Add to existing values for multi-select
+          const currentArray = Array.isArray(value)
+            ? value
+            : value
+              ? [value]
+              : [];
+          const filteredArray = currentArray.filter(
+            (val): val is string => val !== undefined && val !== null,
+          );
+          const newValues = [...filteredArray, searchValue.trim()];
+          onChange(newValues);
+        } else {
+          // Replace value for single-select
+          onChange(searchValue.trim());
+        }
        if (setAbi) setAbi("");
        setSearchValue("");
        // Optionally blur input
@@ -106,7 +166,7 @@ export function SignatureSelector({
        customSearchInput={customSearchInput}
        customTrigger={null}
        disabled={disabled}
-        maxCount={1}
+        maxCount={multiSelect ? 100 : 1}
        onSelectedValuesChange={handleSelectedValuesChange}
        options={allOptions}
        overrideSearchFn={(option, searchTerm) =>
@@ -116,11 +176,13 @@ export function SignatureSelector({
        placeholder={placeholder}
        renderOption={(option) => <span>{option.label}</span>}
        searchPlaceholder={placeholder}
-        selectedValues={value ? [value] : []}
+        selectedValues={currentValues}
      />
-      {isCustomValue && (
+      {customValues.length > 0 && (
        <div className="mt-2 rounded border border-warning-200 bg-warning-50 px-2 py-1 text-warning-700 text-xs">
-          You entered a custom signature. Please provide the ABI below.
+          {multiSelect
+            ? `You entered ${customValues.length} custom signature${customValues.length > 1 ? "s" : ""}. Please provide the ABI below.`
+            : "You entered a custom signature. Please provide the ABI below."}
        </div>
      )}
    </div>
@@ -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,
@@ -5,16 +5,16 @@ import {
  type ThirdwebClient,
 } from "thirdweb";
 import { shortenAddress } from "thirdweb/utils";
-import type { TokenMetadata } from "@/api/universal-bridge/tokens";
+import type { TokenMetadata } from "@/api/universal-bridge/types";
 import { Img } from "@/components/blocks/Img";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/Spinner";
 import { fallbackChainIcon } from "@/constants/chain";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useTokensData } from "@/hooks/tokens";
 import { cn } from "@/lib/utils";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
-import { Spinner } from "../ui/Spinner/Spinner";

 type Option = { label: string; value: string };

@@ -204,7 +204,7 @@ export function TokenSelector(props: {
      searchPlaceholder="Search by name or symbol"
      showCheck={props.showCheck}
      side={props.side}
-      value={selectedValue}
+      value={tokensQuery.isPending ? undefined : selectedValue}
    />
  );
 }
@@ -30,6 +30,7 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
    description?: string;
    titleClassName?: string;
    headerClassName?: string;
+    icon?: React.ReactNode;
  };
  customHeader?: React.ReactNode;
  // chart config
@@ -70,6 +71,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
    <Card className={props.className}>
      {props.header && (
        <CardHeader className={props.header.headerClassName}>
+          {props.header.icon}
          <CardTitle className={cn("mb-2", props.header.titleClassName)}>
            {props.header.title}
          </CardTitle>
@@ -1,4 +1,5 @@
 "use client";
+
 import type React from "react";
 import { type Dispatch, type SetStateAction, useMemo } from "react";
 import { CodeClient } from "@/components/ui/code/code.client";
@@ -6,11 +7,14 @@ import { TabButtons } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";

 export type CodeEnvironment =
+  | "api"
  | "javascript"
  | "typescript"
  | "react"
  | "react-native"
-  | "unity";
+  | "dotnet"
+  | "unity"
+  | "curl";

 type SupportedEnvironment = {
  environment: CodeEnvironment;
@@ -20,6 +24,10 @@ type SupportedEnvironment = {
 type CodeSnippet = Partial<Record<CodeEnvironment, string>>;

 const Environments: SupportedEnvironment[] = [
+  {
+    environment: "api",
+    title: "API",
+  },
  {
    environment: "javascript",
    title: "JavaScript",
@@ -36,10 +44,18 @@ const Environments: SupportedEnvironment[] = [
    environment: "react-native",
    title: "React Native",
  },
+  {
+    environment: "dotnet",
+    title: ".NET",
+  },
  {
    environment: "unity",
    title: "Unity",
  },
+  {
+    environment: "curl",
+    title: "cURL",
+  },
 ];

 interface CodeSegmentProps {
@@ -122,9 +138,14 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
              : activeEnvironment === "react" ||
                  activeEnvironment === "react-native"
                ? "tsx"
-                : activeEnvironment === "unity"
+                : activeEnvironment === "unity" ||
+                    activeEnvironment === "dotnet"
                  ? "cpp"
-                  : activeEnvironment
+                  : activeEnvironment === "api"
+                    ? "javascript"
+                    : activeEnvironment === "curl"
+                      ? "bash"
+                      : activeEnvironment
          }
        />
      )}
@@ -4,9 +4,10 @@ import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { ClientOnly } from "@/components/blocks/client-only";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { Skeleton } from "../ui/skeleton";

-export function ToggleThemeButton() {
+export function ToggleThemeButton(props: { className?: string }) {
  const { setTheme, theme } = useTheme();

  return (
@@ -15,7 +16,10 @@ export function ToggleThemeButton() {
    >
      <Button
        aria-label="Toggle theme"
-        className="h-auto w-auto rounded-full border border-border bg-background p-2"
+        className={cn(
+          "h-auto w-auto rounded-full border border-border bg-background p-2",
+          props.className,
+        )}
        onClick={() => {
          setTheme(theme === "dark" ? "light" : "dark");
        }}
@@ -3,12 +3,15 @@ import { cn } from "@/lib/utils";
 export type Segment = {
  label: string;
  percent: number;
+  value: string;
  color: string;
 };

 type DistributionBarChartProps = {
  segments: Segment[];
-  title: string;
+  title?: string;
+  titleClassName?: string;
+  barClassName?: string;
 };

 export function DistributionBarChart(props: DistributionBarChartProps) {
@@ -21,24 +24,36 @@ export function DistributionBarChart(props: DistributionBarChartProps) {

  return (
    <div>
-      <div className="mb-2 flex items-center justify-between">
-        <h3 className="font-medium text-sm">{props.title}</h3>
-        <div
-          className={cn(
-            "font-medium text-muted-foreground text-sm",
-            invalidTotalPercentage && "text-red-500",
-          )}
-        >
-          Total: {totalPercentage}%
+      {props.title && (
+        <div className="mb-2 flex items-center justify-between">
+          <h3 className={cn("font-medium text-sm", props.titleClassName)}>
+            {props.title}
+          </h3>
+          <div
+            className={cn(
+              "font-medium text-muted-foreground text-sm",
+              invalidTotalPercentage && "text-red-500",
+            )}
+          >
+            Total: {totalPercentage}%
+          </div>
        </div>
-      </div>
+      )}

      {/* Bar */}
-      <div className="flex h-3 overflow-hidden rounded-lg">
+      <div
+        className={cn(
+          "flex h-3 overflow-hidden rounded-lg",
+          props.barClassName,
+        )}
+      >
        {props.segments.map((segment) => {
          return (
            <div
-              className="flex h-full items-center justify-center transition-all duration-200"
+              className={cn(
+                "flex h-full items-center justify-center transition-all duration-200",
+                segment.percent > 0 && "border-r-2 border-background",
+              )}
              key={segment.label}
              style={{
                backgroundColor: segment.color,
@@ -67,7 +82,7 @@ export function DistributionBarChart(props: DistributionBarChartProps) {
                    "text-destructive-text",
                )}
              >
-                {segment.label}: {segment.percent}%
+                {segment.label}: {segment.value}
              </p>
            </div>
          );
@@ -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;
@@ -0,0 +1,73 @@
+"use client";
+import { ChevronDownIcon } from "lucide-react";
+import { useId, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { cn } from "@/lib/utils";
+
+export function FaqSection(props: {
+  faqs: Array<{ title: string; description: string }>;
+}) {
+  return (
+    <section>
+      <h2 className="text-2xl md:text-3xl font-semibold mb-4 tracking-tight">
+        Frequently asked questions
+      </h2>
+      <div className="flex flex-col">
+        {props.faqs.map((faq, faqIndex) => (
+          <FaqItem
+            key={faq.title}
+            title={faq.title}
+            description={faq.description}
+            className={cn(faqIndex === props.faqs.length - 1 && "border-b-0")}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function FaqItem(props: {
+  title: string;
+  description: string;
+  className?: string;
+}) {
+  const [isOpen, setIsOpenn] = useState(false);
+  const contentId = useId();
+  return (
+    <DynamicHeight>
+      <div className={cn("border-b border-dashed", props.className)}>
+        <h3>
+          <Button
+            variant="ghost"
+            onClick={() => setIsOpenn(!isOpen)}
+            aria-controls={contentId}
+            aria-expanded={isOpen}
+            className={cn(
+              "w-full justify-between h-auto py-5 text-base text-muted-foreground hover:bg-transparent pl-0 text-wrap text-left gap-6",
+              isOpen && "text-foreground",
+            )}
+          >
+            {props.title}
+            <ChevronDownIcon
+              className={cn(
+                "size-4 shrink-0 transition-transform duration-200",
+                isOpen && "rotate-180",
+              )}
+            />
+          </Button>
+        </h3>
+
+        <p
+          className={cn(
+            "text-muted-foreground text-base leading-7 pb-6 max-w-4xl",
+            !isOpen && "hidden",
+          )}
+          id={contentId}
+        >
+          {props.description}
+        </p>
+      </div>
+    </DynamicHeight>
+  );
+}
@@ -3,7 +3,6 @@
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useMemo } from "react";
-import { AppFooter } from "@/components/footers/app-footer";
 import {
  Collapsible,
  CollapsibleContent,
@@ -91,7 +90,6 @@ export function FullWidthSidebarLayout(props: {
        <main className="flex min-w-0 grow flex-col max-sm:w-full">
          {children}
        </main>
-        <AppFooter containerClassName="max-w-7xl" />
      </div>
    </div>
  );
@@ -0,0 +1,23 @@
+import { GridPattern } from "@/components/ui/background-patterns";
+
+export function GridPatternEmbedContainer(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 sm:rounded-xl sm:overflow-hidden relative">
+      <GridPattern
+        width={30}
+        height={30}
+        x={-1}
+        y={-1}
+        strokeDasharray={"4 2"}
+        className="text-border dark:text-border/70 hidden lg:block"
+        style={{
+          maskImage:
+            "linear-gradient(to bottom right,white,transparent,transparent)",
+        }}
+      />
+      <div className="z-10 min-w-0">{props.children}</div>
+    </div>
+  );
+}
@@ -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";
@@ -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";
@@ -64,6 +64,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
      popoverContentClassName,
      showSelectedValuesInModal = false,
      customSearchInput,
+      customTrigger,
      ...props
    },
    ref,
@@ -144,13 +145,18 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
    // scroll to top when options change
    const popoverElRef = useRef<HTMLDivElement>(null);

+    // Filter out customTrigger from props to avoid passing it to Button
+    const buttonProps = Object.fromEntries(
+      Object.entries(props).filter(([key]) => key !== "customTrigger"),
+    ) as React.ButtonHTMLAttributes<HTMLButtonElement>;
+
    return (
      <Popover modal onOpenChange={setIsPopoverOpen} open={isPopoverOpen}>
        <PopoverTrigger asChild>
-          {props.customTrigger || (
+          {customTrigger || (
            <Button
              ref={ref}
-              {...props}
+              {...buttonProps}
              className={cn(
                "flex h-auto min-h-10 w-full items-center justify-between rounded-md border border-border bg-inherit p-3 hover:bg-inherit",
                className,
@@ -7,8 +7,8 @@ import {
  RefreshCwIcon,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { DynamicHeight } from "../../ui/DynamicHeight";
-import { Spinner } from "../../ui/Spinner/Spinner";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { Spinner } from "@/components/ui/Spinner";

 export type MultiStepState<T extends string> = {
  id: T;
@@ -34,7 +34,7 @@ export function MultiStepStatus<T extends string>(props: {
 }) {
  return (
    <DynamicHeight>
-      <div className="space-y-4">
+      <div className="space-y-4 overflow-hidden">
        {props.steps.map((step) => (
          <div className="flex items-start space-x-3 " key={step.label}>
            {step.status.type === "completed" ? (
@@ -46,7 +46,7 @@ export function MultiStepStatus<T extends string>(props: {
            ) : (
              <CircleIcon className="mt-0.5 size-5 flex-shrink-0 text-muted-foreground/70" />
            )}
-            <div className="flex-1">
+            <div className="grow">
              <p
                className={`font-medium ${
                  step.status.type === "pending"
@@ -73,7 +73,7 @@ export function MultiStepStatus<T extends string>(props: {
              {step.status.type === "error"
                ? props.renderError?.(step, step.status.message) || (
                    <div className="mt-1 space-y-2">
-                      <p className="mb-1 text-red-500 text-sm">
+                      <p className="mb-1 text-red-500 text-sm whitespace-pre-wrap break-all">
                        {step.status.message}
                      </p>
                      <Button
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,152 @@
+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" | "outline" }) {
+  const action = props.action;
+
+  return "component" in action ? (
+    action.component
+  ) : (
+    <Button
+      asChild
+      className={cn("rounded-full")}
+      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="outline" />
+              )}
+
+              {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 text-pretty">
+            {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="outline" />
+            )}
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}
@@ -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>
+  );
+}
@@ -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";

@@ -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 }) {
@@ -1,5 +1,5 @@
 "use client";
-import { CheckIcon, CopyIcon, XIcon } from "lucide-react";
+import { CheckIcon, CircleSlashIcon, CopyIcon, XIcon } from "lucide-react";
 import { useMemo } from "react";
 import { isAddress, type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { Blobbie, type SocialProfile, useSocialProfiles } from "thirdweb/react";
@@ -23,6 +23,7 @@ export function WalletAddress(props: {
  className?: string;
  iconClassName?: string;
  client: ThirdwebClient;
+  fallbackIcon?: React.ReactNode;
 }) {
  // default back to zero address if no address provided
  const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
@@ -47,7 +48,7 @@ export function WalletAddress(props: {
    return (
      <ToolTipLabel hoverable label={address}>
        <span className="flex items-center gap-2 underline-offset-4 hover:underline">
-          <div className="flex size-6 items-center justify-center rounded-full border bg-background">
+          <div className="flex size-5 items-center justify-center rounded-full border bg-background">
            <XIcon className="size-4 text-muted-foreground" />
          </div>
          Invalid Address
@@ -59,9 +60,16 @@ export function WalletAddress(props: {
  // special case for zero address
  if (address === ZERO_ADDRESS) {
    return (
-      <span className={cn("cursor-pointer font-mono", props.className)}>
-        {shortenedAddress}
-      </span>
+      <div className="flex items-center gap-2 py-2">
+        <CircleSlashIcon
+          className={cn("size-5 text-muted-foreground/70", props.iconClassName)}
+        />
+        <span
+          className={cn("cursor-pointer font-mono text-sm", props.className)}
+        >
+          {shortenedAddress}
+        </span>
+      </div>
    );
  }

@@ -82,6 +90,7 @@ export function WalletAddress(props: {
              iconClassName={props.iconClassName}
              profiles={profiles.data || []}
              thirdwebClient={props.client}
+              fallbackIcon={props.fallbackIcon}
            />
          )}
          <span className="cursor-pointer font-mono">
@@ -173,6 +182,7 @@ function WalletAvatar(props: {
  profiles: SocialProfile[];
  thirdwebClient: ThirdwebClient;
  iconClassName?: string;
+  fallbackIcon?: React.ReactNode;
 }) {
  const avatar = useMemo(() => {
    return props.profiles.find(
@@ -198,12 +208,21 @@ function WalletAvatar(props: {
        <Img
          className={cn("size-5 object-cover", props.iconClassName)}
          src={resolvedAvatarSrc}
+          fallback={
+            <Blobbie
+              address={props.address}
+              className={props.iconClassName}
+              size={20}
+            />
+          }
        />
+      ) : props.fallbackIcon ? (
+        props.fallbackIcon
      ) : (
        <Blobbie
          address={props.address}
          className={props.iconClassName}
-          size={24}
+          size={20}
        />
      )}
    </div>
@@ -87,7 +87,7 @@ export function ChatBar(props: {
                  <PopoverContent className="w-72">
                    <div>
                      <p className="mb-3 text-muted-foreground text-sm">
-                        Get access to image uploads by signing in to Nebula
+                        Get access to image uploads by signing in to thirdweb
                      </p>
                      <Button
                        className="w-full"
@@ -1,6 +1,6 @@
 "use client";

-import { MessageCircleIcon, XIcon } from "lucide-react";
+import { CircleQuestionMarkIcon, XIcon } from "lucide-react";
 import { useSelectedLayoutSegments } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import { createThirdwebClient } from "thirdweb";
@@ -16,7 +16,6 @@ const client = createThirdwebClient({
 });

 export function CustomChatButton(props: {
-  label: string;
  examplePrompts: string[];
  authToken: string;
  team: Team;
@@ -28,7 +27,10 @@ export function CustomChatButton(props: {
  const closeModal = useCallback(() => setIsOpen(false), []);
  const ref = useRef<HTMLDivElement>(null);

-  if (layoutSegments[0] === "~" && layoutSegments[1] === "support") {
+  if (
+    (layoutSegments[0] === "~" && layoutSegments[1] === "support") ||
+    layoutSegments.includes("ai")
+  ) {
    return null;
  }

@@ -36,21 +38,25 @@ export function CustomChatButton(props: {
    <>
      {/* Inline Button (not floating) */}
      <Button
-        className="gap-2 rounded-full shadow-lg"
+        className={cn(
+          "gap-2 rounded-full shadow-lg fixed right-6 bottom-6 z-50 bg-card",
+          isOpen && "opacity-0",
+        )}
+        size="sm"
        onClick={() => {
          setIsOpen(true);
          setHasBeenOpened(true);
        }}
-        variant="default"
+        variant="outline"
      >
-        <MessageCircleIcon className="size-4" />
-        {props.label}
+        <CircleQuestionMarkIcon className="size-3.5 text-muted-foreground" />
+        Need help?
      </Button>

      {/* Popup/Modal */}
      <div
        className={cn(
-          "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-50 flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-xl",
+          "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-50 flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-2xl",
          !isOpen && "hidden",
        )}
        ref={ref}
@@ -58,8 +64,7 @@ export function CustomChatButton(props: {
        {/* Header with close button */}
        <div className="flex items-center justify-between border-b px-4 py-4">
          <div className="flex items-center gap-2 font-semibold text-lg">
-            <MessageCircleIcon className="size-5 text-muted-foreground" />
-            {props.label}
+            Need help?
          </div>
          <Button
            aria-label="Close chat"
@@ -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
    />
@@ -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";
@@ -17,7 +17,7 @@ import {
  DropdownMenuContent,
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import {
  Table,
@@ -300,6 +300,7 @@ const contractTypeToAssetTypeRecord: Record<string, string | undefined> = {
  DropERC20: "Coin",
  DropERC721: "NFT Collection",
  DropERC1155: "NFT Collection",
+  ERC20Asset: "Coin",
 };

 const NetworkFilterCell = React.memo(function NetworkFilterCell({
@@ -65,6 +65,23 @@ export default function Component() {
    events: [preparedEvent]
  });
 }`,
+    unity: `using Thirdweb;
+
+// Get your contract
+var contract = await ThirdwebManager.Instance.GetContract(
+  address: "{{contract_address}}", 
+  chainId: {{chainId}},
+);
+
+// Listen to contract events
+var events = await contract.Events("{{function}}");`,
+    dotnet: `using Thirdweb;
+
+// Get your contract
+var contract = await ThirdwebContract.Create(client, "{{contract_address}}", {{chainId}});
+
+// Listen to contract events
+var events = await contract.Events("{{function}}");`,
  },
  install: {
    javascript: "npm i thirdweb",
@@ -73,6 +90,9 @@ export default function Component() {
    unity: `// Download the .unitypackage from the latest release:
 // https://github.com/thirdweb-dev/unity-sdk/releases
 // and drag it into your project`,
+    dotnet: `// Install the thirdweb SDK via NuGet:
+// dotnet add package Thirdweb
+// Or search for "Thirdweb" in your NuGet package manager`,
  },
  read: {
    javascript: `import { readContract } from "thirdweb";
@@ -100,6 +120,33 @@ export default function Component() {
    params: [{{args}}]
  });
 }`,
+    unity: `using Thirdweb;
+
+// Get your contract
+var contract = await ThirdwebManager.Instance.GetContract(
+  address: "{{contract_address}}", 
+  chainId: {{chainId}}
+);
+
+// Read from the contract
+var result = await contract.Read<T>(
+  "{{function}}",
+  {{args}}
+);`,
+    dotnet: `using Thirdweb;
+
+// Get your contract
+var contract = await ThirdwebContract.Create(
+  client,
+  "{{contract_address}}",
+  {{chainId}}
+);
+
+// Read from the contract
+var result = await contract.Read<T>(
+  "{{function}}",
+  {{args}}
+);`,
  },
  setup: {
    javascript: `import { createThirdwebClient, getContract } from "thirdweb";
@@ -165,11 +212,19 @@ function App() {
 `,
    unity: `using Thirdweb;

-// Reference the SDK
-var sdk = ThirdwebManager.Instance.SDK;
+// Get your contract
+var contract = await ThirdwebManager.Instance.GetContract(
+  address: "{{contract_address}}", 
+  chainId: {{chainId}}
+);`,
+    dotnet: `using Thirdweb;

 // Get your contract
-var contract = sdk.GetContract("{{contract_address}}");`,
+var contract = await ThirdwebContract.Create(
+  client,
+  "{{contract_address}}",
+  {{chainId}}
+);`,
  },
  write: {
    javascript: `import { prepareContractCall, sendTransaction } from "thirdweb";
@@ -213,6 +268,123 @@ export default function Component() {
    sendTransaction(transaction);
  }
 }`,
+    unity: `using Thirdweb;
+
+// Get your contract
+var contract = await ThirdwebManager.Instance.GetContract(
+  address: "{{contract_address}}", 
+  chainId: {{chainId}}
+);
+
+// Write to the contract
+var transactionReceipt = await contract.Write(
+  wallet,
+  contract,
+  "{{function}}",
+  weiValue,
+  {{args}}
+);`,
+    dotnet: `using Thirdweb;
+
+// Get your contract
+var contract = await ThirdwebContract.Create(
+  client,
+  "{{contract_address}}",
+  {{chainId}}
+);
+
+// Write to the contract
+var transactionReceipt = await contract.Write(
+  wallet,
+  contract,
+  "{{function}}",
+  weiValue,
+  {{args}}
+);`,
+  },
+  api: {
+    read: `const response = await fetch('https://api.thirdweb.com/v1/contracts/read', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'x-secret-key': '<YOUR_SECRET_KEY>'
+  },
+  body: JSON.stringify({
+    calls: [
+      {
+        contractAddress: "{{contract_address}}",
+        method: "{{function}}",
+        params: [{{args}}]
+      }
+    ],
+    chainId: {{chainId}}
+  })
+});
+
+const data = await response.json();`,
+    write: `const response = await fetch('https://api.thirdweb.com/v1/contracts/write', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'x-secret-key': '<YOUR_SECRET_KEY>'
+  },
+  body: JSON.stringify({
+    calls: [
+      {
+        contractAddress: "{{contract_address}}",
+        method: "{{function}}",
+        params: [{{args}}]
+      }
+    ],
+    chainId: {{chainId}},
+    from: "<YOUR_WALLET_ADDRESS>"
+  })
+});
+
+const data = await response.json();`,
+    events: `const response = await fetch('https://api.thirdweb.com/v1/contracts/{{chainId}}/{{contract_address}}/events?eventSignature={{function}}', {
+  method: 'GET',
+  headers: {
+    'Content-Type': 'application/json',
+    'x-secret-key': '<YOUR_SECRET_KEY>'
+  }
+});
+
+const data = await response.json();`,
+  },
+  curl: {
+    read: `curl https://api.thirdweb.com/v1/contracts/read \\
+  --request POST \\
+  --header 'Content-Type: application/json' \\
+  --header 'x-secret-key: <YOUR_SECRET_KEY>' \\
+  --data '{
+  "calls": [
+    {
+      "contractAddress": "{{contract_address}}",
+      "method": "{{function}}",
+      "params": [{{args}}]
+    }
+  ],
+  "chainId": {{chainId}}
+}'`,
+    write: `curl -X POST https://api.thirdweb.com/v1/contracts/write \\
+-H "Content-Type: application/json" \\
+-H "x-secret-key: <YOUR_SECRET_KEY>" \\
+-d '{
+  "calls": [
+    {
+      "contractAddress": "{{contract_address}}",
+      "method": "{{function}}",
+      "params": [{{args}}]
+    }
+  ],
+  "chainId": {{chainId}},
+  "from": "<YOUR_WALLET_ADDRESS>"
+}'`,
+    events: `curl https://api.thirdweb.com/v1/contracts/{{chainId}}/{{contract_address}}/events?eventSignature={{function}} \\
+  --request GET \\
+  --header 'Content-Type: application/json' \\
+  --header 'x-secret-key: <YOUR_SECRET_KEY>'`,
  },
 };

@@ -269,20 +441,17 @@ return (

 public async void ConnectWallet()
 {
-    // Reference to your Thirdweb SDK
-    var sdk = ThirdwebManager.Instance.SDK;
-
-    // Configure the connection
-    var connection = new WalletConnection(
-      provider: WalletProvider.SmartWallet,        // The wallet provider you want to connect to (Required)
-      chainId: 1,                                  // The chain you want to connect to (Required)
-      password: "myEpicPassword",                  // If using a local wallet as personal wallet (Optional)
-      email: "[email protected]",                    // If using an email wallet as personal wallet (Optional)
-      personalWallet: WalletProvider.LocalWallet   // The personal wallet you want to use with your Account (Optional)
+    var wallet = await ConnectWallet(
+        new WalletOptions(
+            provider: WalletProvider.InAppWallet,
+            chainId: {{chainId}},
+            inAppWalletOptions: new InAppWalletOptions(
+                authprovider: AuthProvider.Google,
+                executionMode: ExecutionMode.EIP7702Sponsored
+            )
+        )
    );
-
-    // Connect the wallet
-    string address = await sdk.wallet.Connect(connection);
+    string address = await wallet.GetAddress();
 }`,
    },
  },
@@ -490,6 +659,9 @@ export function formatSnippet(
                : "event",
          });
          break;
+        case "api":
+          // For API, we don't need special extension handling, just use the standard templates
+          break;
      }
    }
    // end hacks on hacks on hacks -- now just hacks on hacks from here on out
@@ -533,7 +705,7 @@ export function CodeOverview(props: {
    | undefined;

  const [environment, setEnvironment] = useState<CodeEnvironment>(
-    defaultEnvironment || "javascript",
+    defaultEnvironment || "api",
  );

  const [tab, setTab] = useState("write");
@@ -677,7 +849,13 @@ export function CodeOverview(props: {
          </div>
        )}
        <div className="flex flex-col gap-2">
-          {environment === "react-native" || environment === "unity" ? (
+          {environment === "api" || environment === "curl" ? (
+            <p className="text-sm text-muted-foreground">
+              No SDK install required for API/cURL. Call the HTTP endpoints
+              directly. Keep your secret key server-side; use client IDs in
+              frontends.
+            </p>
+          ) : environment === "react-native" || environment === "unity" ? (
            <p className="text-sm text-muted-foreground">
              Install the latest version of the SDK.{" "}
              <UnderlineLink
@@ -800,32 +978,76 @@ export function CodeOverview(props: {
            <CodeSegment
              environment={environment}
              setEnvironment={setEnvironment}
-              snippet={formatSnippet(
-                // biome-ignore lint/suspicious/noExplicitAny: FIXME
-                COMMANDS[tab as keyof typeof COMMANDS] as any,
-                {
+              snippet={(() => {
+                const selectedFn =
+                  tab === "read" ? read : tab === "write" ? write : event;
+                const commandsKey = tab as "read" | "write" | "events";
+
+                const baseSnippet = formatSnippet(COMMANDS[commandsKey], {
                  args:
                    abi
                      ?.filter(
                        (f) => f.type === "function" || f.type === "event",
                      )
-                      ?.find(
-                        (f) =>
-                          f.name ===
-                          (tab === "read"
-                            ? read?.name
-                            : tab === "write"
-                              ? write?.name
-                              : event?.name),
-                      )
+                      ?.find((f) => f.name === selectedFn?.name)
                      ?.inputs.map((i) => i.name || "") || [],

                  chainId,
                  contractAddress,
                  extensionNamespace,
-                  fn: tab === "read" ? read : tab === "write" ? write : event,
-                },
-              )}
+                  fn: selectedFn,
+                });
+
+                // Add API snippet if it exists
+                const apiSnippet = COMMANDS.api[commandsKey]
+                  ? formatSnippet(
+                      { api: COMMANDS.api[commandsKey] },
+                      {
+                        args:
+                          abi
+                            ?.filter(
+                              (f) =>
+                                f.type === "function" || f.type === "event",
+                            )
+                            ?.find((f) => f.name === selectedFn?.name)
+                            ?.inputs.map((i) => i.name || "") || [],
+
+                        chainId,
+                        contractAddress,
+                        extensionNamespace,
+                        fn: selectedFn,
+                      },
+                    )
+                  : {};
+
+                // Add cURL snippet if it exists
+                const curlSnippet = COMMANDS.curl[commandsKey]
+                  ? formatSnippet(
+                      { curl: COMMANDS.curl[commandsKey] },
+                      {
+                        args:
+                          abi
+                            ?.filter(
+                              (f) =>
+                                f.type === "function" || f.type === "event",
+                            )
+                            ?.find((f) => f.name === selectedFn?.name)
+                            ?.inputs.map((i) => i.name || "") || [],
+
+                        chainId,
+                        contractAddress,
+                        extensionNamespace,
+                        fn: selectedFn,
+                      },
+                    )
+                  : {};
+
+                return {
+                  ...baseSnippet,
+                  ...apiSnippet,
+                  ...curlSnippet,
+                };
+              })()}
            />
          </div>
        </div>
@@ -1,19 +1,20 @@
 import { moduleToBase64 } from "app/(app)/(dashboard)/published-contract/utils/module-base-64";
 import { RocketIcon, ShieldCheckIcon } from "lucide-react";
+import { unstable_cache } from "next/cache";
 import Link from "next/link";
+import { resolveAvatar } from "thirdweb/extensions/ens";
 import { fetchPublishedContractVersion } from "@/api/contract/fetch-contracts-with-versions";
-import { ClientOnly } from "@/components/blocks/client-only";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
+import { resolveEns } from "@/lib/ens";
 import { replaceDeployerAddress } from "@/lib/publisher-utils";
 import { cn } from "@/lib/utils";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
 import { ContractPublisher } from "./contract-publisher";

-interface ContractCardProps {
+type ContractCardProps = {
  publisher: string;
  contractId: string;
  titleOverride?: string;
@@ -29,7 +30,7 @@ interface ContractCardProps {
    moduleId: string;
    version?: string;
  }[];
-}
+};

 function getContractUrl(
  {
@@ -74,6 +75,72 @@ function getContractUrl(
  return replaceDeployerAddress(pathName);
 }

+const cached_fetchPublishedContractVersion = unstable_cache(
+  async (publisher: string, contractId: string, version: string = "latest") => {
+    const result = await fetchPublishedContractVersion(
+      publisher,
+      contractId,
+      serverThirdwebClient,
+      version,
+    ).catch(() => null);
+
+    if (!result) {
+      return null;
+    }
+
+    const publisherEnsAndAvatar = result.publisher
+      ? await cached_resolvePublisherEnsAndAvatar(result.publisher)
+      : undefined;
+
+    // Note: Do not return BigInt - it can't be serialized and cached by unstable_cache and will throw an error
+    return {
+      name: result.name,
+      displayName: result.displayName,
+      description: result.description,
+      publisher: {
+        address: result.publisher,
+        ensName: publisherEnsAndAvatar?.ensName,
+        ensAvatar: publisherEnsAndAvatar?.ensAvatar,
+      },
+      version: result.version,
+      audit: result.audit,
+    };
+  },
+  ["fetchPublishedContractVersion"],
+  {
+    revalidate: 3600, // 1 hour
+  },
+);
+
+const cached_resolvePublisherEnsAndAvatar = unstable_cache(
+  async (_addressOrEns: string) => {
+    const addressOrEns = replaceDeployerAddress(_addressOrEns);
+    const [ensNameInfo, ensAvatar] = await Promise.allSettled([
+      resolveEns(addressOrEns, serverThirdwebClient),
+      resolveAvatar({
+        client: serverThirdwebClient,
+        name: addressOrEns,
+      }),
+    ]);
+
+    return {
+      ensName:
+        ensNameInfo.status === "fulfilled"
+          ? ensNameInfo.value?.ensName
+          : undefined,
+      address:
+        ensNameInfo.status === "fulfilled"
+          ? ensNameInfo.value?.address
+          : undefined,
+      ensAvatar: ensAvatar.status === "fulfilled" ? ensAvatar.value : undefined,
+    };
+  },
+  ["resolvePublisherEnsAndAvatar"],
+  {
+    revalidate: 3600, // 1 hour
+  },
+);
+
 export async function ContractCard({
  publisher,
  contractId,
@@ -83,12 +150,11 @@ export async function ContractCard({
  modules = [],
  isBeta,
 }: ContractCardProps) {
-  const publishedContractResult = await fetchPublishedContractVersion(
+  const publishedContractResult = await cached_fetchPublishedContractVersion(
    publisher,
    contractId,
-    serverThirdwebClient,
    version,
-  ).catch(() => null);
+  );

  if (!publishedContractResult) {
    return null;
@@ -186,13 +252,12 @@ export async function ContractCard({
          !modules?.length && "mt-auto",
        )}
      >
-        {publishedContractResult.publisher && (
-          <ClientOnly ssr={<Skeleton className="size-5 rounded-full" />}>
-            <ContractPublisher
-              addressOrEns={publishedContractResult.publisher}
-              client={getClientThirdwebClient()}
-            />
-          </ClientOnly>
+        {publishedContractResult.publisher.address && (
+          <ContractPublisher
+            address={publishedContractResult.publisher.address}
+            ensName={publishedContractResult.publisher.ensName || undefined}
+            ensAvatar={publishedContractResult.publisher.ensAvatar || undefined}
+          />
        )}

        <div className="flex items-center justify-between">
@@ -1,53 +1,36 @@
 "use client";

 import Link from "next/link";
-import type { ThirdwebClient } from "thirdweb";
-import {
-  AccountAddress,
-  AccountAvatar,
-  AccountBlobbie,
-  AccountName,
-  AccountProvider,
-} from "thirdweb/react";
-import { Skeleton } from "@/components/ui/skeleton";
-import { replaceDeployerAddress } from "@/lib/publisher-utils";
+import { Blobbie } from "thirdweb/react";
+import { Img } from "@/components/blocks/Img";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
 import { shortenIfAddress } from "@/utils/usedapp-external";

-interface ContractPublisherProps {
-  addressOrEns: string;
-  client: ThirdwebClient;
-}
-
-export const ContractPublisher: React.FC<ContractPublisherProps> = ({
-  addressOrEns,
-  client,
-}) => {
+export function ContractPublisher(props: {
+  ensName: string | undefined;
+  address: string;
+  ensAvatar: string | undefined;
+}) {
+  const displayName = props.ensName || props.address;
  return (
-    <AccountProvider address={addressOrEns} client={client}>
-      <Link
-        className="flex shrink-0 items-center gap-1.5 hover:underline"
-        href={replaceDeployerAddress(`/${addressOrEns}`)}
-      >
-        <AccountAvatar
-          className="size-5 rounded-full object-cover"
-          fallbackComponent={<AccountBlobbie className="size-5 rounded-full" />}
-          loadingComponent={<Skeleton className="size-5 rounded-full" />}
-        />
+    <Link
+      className="flex shrink-0 items-center gap-1.5 hover:underline"
+      href={`/${displayName}`}
+      target="_blank"
+    >
+      <Img
+        className="size-5 rounded-full object-cover"
+        src={
+          resolveSchemeWithErrorHandler({
+            client: getClientThirdwebClient(),
+            uri: props.ensAvatar,
+          }) || ""
+        }
+        fallback={<Blobbie address={props.address} />}
+      />

-        <AccountName
-          className="text-xs"
-          fallbackComponent={
-            <AccountAddress
-              className="text-xs"
-              formatFn={(addr) =>
-                shortenIfAddress(replaceDeployerAddress(addr))
-              }
-            />
-          }
-          formatFn={(name) => replaceDeployerAddress(name)}
-          loadingComponent={<Skeleton className="h-4 w-40" />}
-        />
-      </Link>
-    </AccountProvider>
+      <span className="text-xs"> {shortenIfAddress(displayName)}</span>
+    </Link>
  );
-};
+}
@@ -68,7 +68,7 @@ const ContractFunction: React.FC<{

 function ContractFunctionInner(props: ContractFunctionProps) {
  const { contract, fn } = props;
-  const [environment, setEnvironment] = useState<CodeEnvironment>("javascript");
+  const [environment, setEnvironment] = useState<CodeEnvironment>("api");
  const functionSelectorQuery = useContractFunctionSelectors(contract);
  const functionSelectors = functionSelectorQuery.data || [];
  const isERC721Query = useReadContract(ERC721Ext.isERC721, { contract });
@@ -112,7 +112,7 @@ function ContractFunctionInner(props: ContractFunctionProps) {
      : "write"
    : ("events" as const);

-  const codeSnippet = formatSnippet(COMMANDS[commandsKey], {
+  const baseSnippet = formatSnippet(COMMANDS[commandsKey], {
    args: fn.inputs?.map((i) => i.name || ""),
    chainId: contract.chain.id,
    contractAddress: contract.address,
@@ -120,6 +120,40 @@ function ContractFunctionInner(props: ContractFunctionProps) {
    fn,
  });

+  // Safety check: Only include API snippet if the command exists in COMMANDS.api
+  const apiSnippet = COMMANDS.api[commandsKey]
+    ? formatSnippet(
+        { api: COMMANDS.api[commandsKey] },
+        {
+          args: fn.inputs?.map((i) => i.name || ""),
+          chainId: contract.chain.id,
+          contractAddress: contract.address,
+          extensionNamespace,
+          fn,
+        },
+      )
+    : {};
+
+  // Safety check: Only include cURL snippet if the command exists in COMMANDS.curl
+  const curlSnippet = COMMANDS.curl[commandsKey]
+    ? formatSnippet(
+        { curl: COMMANDS.curl[commandsKey] },
+        {
+          args: fn.inputs?.map((i) => i.name || ""),
+          chainId: contract.chain.id,
+          contractAddress: contract.address,
+          extensionNamespace,
+          fn,
+        },
+      )
+    : {};
+
+  const codeSnippet = {
+    ...baseSnippet,
+    ...apiSnippet,
+    ...curlSnippet,
+  };
+
  return (
    <div className="flex flex-col gap-1.5">
      <div className="flex items-center flex-wrap gap-2 border-b pb-3 mb-3">
@@ -20,7 +20,7 @@ import {
  toSerializableTransaction,
  toWei,
 } from "thirdweb";
-import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+import { useActiveAccount } from "thirdweb/react";
 import { parseAbiParams, stringify, toFunctionSelector } from "thirdweb/utils";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SolidityInput } from "@/components/solidity-inputs";
@@ -31,9 +31,10 @@ import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";

 function formatResponseData(data: unknown): {
  type: "json" | "text";
@@ -264,7 +265,7 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
    data: mutationData,
    error: mutationError,
    isPending: mutationLoading,
-  } = useSendAndConfirmTransaction();
+  } = useSendAndConfirmTx();

  const {
    mutate: readFn,
@@ -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";
@@ -231,13 +231,13 @@ function ImportForm(props: {
            </Button>
          ) : (
            <Button className="gap-2" type="submit">
-              {addContractToProject.isPending ? (
+              {form.formState.isSubmitting ? (
                <Spinner className="size-4" />
              ) : (
                <ArrowDownToLineIcon className="size-4" />
              )}

-              {addContractToProject.isPending ? "Importing" : "Import"}
+              {form.formState.isSubmitting ? "Importing" : "Import"}
            </Button>
          )}
        </div>
@@ -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,
@@ -46,7 +46,7 @@ export function AdvancedSearchInput(props: {
        value={searchType}
        onValueChange={(value) => setSearchType(value as SearchType)}
      >
-        <SelectTrigger className="w-[140px] bg-card">
+        <SelectTrigger className="w-[140px] bg-background rounded-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
@@ -61,7 +61,7 @@ export function AdvancedSearchInput(props: {
      <div className="flex flex-1">
        <div className="relative flex-1">
          <Input
-            className="bg-card pl-9 border-r-0 rounded-r-none"
+            className="bg-background pl-9 border-r-0 rounded-r-none rounded-l-full"
            placeholder={`Search by ${searchType}...`}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
@@ -86,7 +86,7 @@ export function AdvancedSearchInput(props: {
          onClick={handleSearch}
          variant="outline"
          disabled={!query.trim() || props.isLoading}
-          className="rounded-l-none gap-2 bg-card disabled:opacity-100"
+          className="rounded-l-none rounded-r-full gap-2 bg-background disabled:opacity-100"
        >
          {props.isLoading && <Spinner className="size-4" />}
          Search
@@ -2,7 +2,7 @@

 import { createColumnHelper } from "@tanstack/react-table";
 import { format } from "date-fns";
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { ArrowLeftIcon, ArrowRightIcon, UserIcon } from "lucide-react";
 import Papa from "papaparse";
 import { useCallback, useMemo, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
@@ -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,
@@ -264,11 +264,24 @@ export function InAppWalletUsersPageContent(

  return (
    <div>
-      <div className="flex flex-col gap-4">
-        {/* Top section */}
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col md:flex-row lg:items-center justify-end gap-3">
-            <div className="w-full max-w-lg">
+      <div className="overflow-hidden rounded-xl border border-border bg-card">
+        <div className="flex flex-col lg:flex-row lg:justify-between p-4 lg:px-6 py-5 lg:items-center gap-5">
+          <div>
+            <div className="flex mb-3">
+              <div className="p-2 rounded-full bg-background border border-border">
+                <UserIcon className="size-5 text-muted-foreground" />
+              </div>
+            </div>
+            <h2 className="font-semibold text-2xl tracking-tight">
+              User Wallets
+            </h2>
+            <p className="text-muted-foreground text-sm">
+              View and manage your project's users
+            </p>
+          </div>
+
+          <div className="flex flex-col items-start lg:items-end gap-2.5 border-t lg:border-t-0 pt-5 lg:pt-0 border-dashed">
+            <div className="w-full lg:w-auto lg:min-w-[320px]">
              <AdvancedSearchInput
                onSearch={handleSearch}
                onClear={handleClearSearch}
@@ -277,7 +290,7 @@ export function InAppWalletUsersPageContent(
              />
            </div>
            <Button
-              className="gap-2 bg-card"
+              className="gap-2 bg-background rounded-full"
              disabled={wallets.length === 0 || isPending}
              onClick={downloadCSV}
              variant="outline"
@@ -298,11 +311,11 @@ export function InAppWalletUsersPageContent(
                data={wallets}
                isFetched={walletsQuery.isFetched}
                isPending={walletsQuery.isPending}
-                tableContainerClassName="rounded-b-none"
+                tableContainerClassName="rounded-none border-x-0 border-b-0"
                title="in-app wallets"
              />

-              <div className="flex justify-center gap-3 rounded-b-lg border border-t-0 bg-card p-6">
+              <div className="flex justify-center gap-3 border-t bg-card p-6">
                <Button
                  className="gap-2 bg-background"
                  disabled={activePage === 1 || walletsQuery.isPending}
@@ -1,7 +1,79 @@
+import type {
+  ListUserWalletsData,
+  ListUserWalletsResponses,
+} from "@thirdweb-dev/api";
+import { configure, listUserWallets } from "@thirdweb-dev/api";
 import type { WalletUser } from "thirdweb/wallets";
-import { THIRDWEB_EWS_API_HOST } from "@/constants/urls";
+import { THIRDWEB_API_HOST } from "@/constants/urls";
 import type { SearchType } from "./types";

+// Configure the API client to use the correct base URL
+configure({
+  override: {
+    baseUrl: THIRDWEB_API_HOST,
+  },
+});
+
+// Extract types from the generated API
+type APIWallet = ListUserWalletsResponses[200]["result"]["wallets"][0];
+type APIProfile = APIWallet["profiles"][0];
+
+// Transform API response to match existing WalletUser format
+function transformToWalletUser(apiWallet: APIWallet): WalletUser {
+  return {
+    id: getProfileId(apiWallet.profiles[0]) || "",
+    linkedAccounts: apiWallet.profiles.map((profile) => {
+      // Create details object based on the profile data
+      let details:
+        | { email: string; [key: string]: string }
+        | { phone: string; [key: string]: string }
+        | { address: string; [key: string]: string }
+        | { id: string; [key: string]: string };
+
+      const profileId = getProfileId(profile);
+
+      if ("email" in profile && profile.email) {
+        details = { email: profile.email, id: profileId };
+      } else if ("phone" in profile && profile.phone) {
+        details = { phone: profile.phone, id: profileId };
+      } else if ("walletAddress" in profile && profile.walletAddress) {
+        details = { address: profile.walletAddress, id: profileId };
+      } else {
+        details = { id: profileId };
+      }
+
+      return {
+        type: profile.type,
+        details,
+      };
+    }),
+    wallets: apiWallet.address
+      ? [
+          {
+            address: apiWallet.address,
+            createdAt: apiWallet.createdAt || new Date().toISOString(),
+            type: "enclave" as const,
+          },
+        ]
+      : [],
+  };
+}
+
+// Helper function to safely get ID from any profile type
+function getProfileId(profile: APIProfile | undefined): string {
+  if (!profile) return "";
+
+  if ("id" in profile) {
+    return profile.id;
+  } else if ("credentialId" in profile) {
+    return profile.credentialId;
+  } else if ("identifier" in profile) {
+    return profile.identifier;
+  }
+
+  return "";
+}
+
 export async function searchUsers(
  authToken: string,
  clientId: string | undefined,
@@ -10,50 +82,57 @@ export async function searchUsers(
  searchType: SearchType,
  query: string,
 ): Promise<WalletUser[]> {
-  const url = new URL(`${THIRDWEB_EWS_API_HOST}/api/2024-05-05/account/list`);
+  try {
+    // Prepare query parameters
+    const queryParams: ListUserWalletsData["query"] = {
+      limit: 50,
+    };

-  // Add clientId or ecosystemSlug parameter
-  if (ecosystemSlug) {
-    url.searchParams.append("ecosystemSlug", `ecosystem.${ecosystemSlug}`);
-  } else if (clientId) {
-    url.searchParams.append("clientId", clientId);
+    // Add search parameter based on search type
+    switch (searchType) {
+      case "email":
+        queryParams.email = query;
+        break;
+      case "phone":
+        queryParams.phone = query;
+        break;
+      case "id":
+        queryParams.id = query;
+        break;
+      case "address":
+        queryParams.address = query;
+        break;
+      case "externalWallet":
+        queryParams.externalWalletAddress = query;
+        break;
+    }
+
+    // Use the generated API function with Bearer authentication
+    const response = await listUserWallets({
+      query: queryParams,
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+        "x-thirdweb-team-id": teamId,
+        ...(clientId && { "x-client-id": clientId }),
+        ...(ecosystemSlug && {
+          "x-ecosystem-id": `ecosystem.${ecosystemSlug}`,
+        }),
+      },
+    });
+
+    // Handle response
+    if (response.error || !response.data) {
+      console.error(
+        "Error searching users:",
+        response.error || "No data returned",
+      );
+      return [];
+    }
+
+    return response.data.result.wallets.map(transformToWalletUser);
+  } catch (error) {
+    console.error("Error searching users:", error);
+    return [];
  }
-
-  // Add search parameter based on search type
-  switch (searchType) {
-    case "email":
-      url.searchParams.append("email", query);
-      break;
-    case "phone":
-      url.searchParams.append("phone", query);
-      break;
-    case "id":
-      url.searchParams.append("id", query);
-      break;
-    case "address":
-      url.searchParams.append("address", query);
-      break;
-    case "externalWallet":
-      url.searchParams.append("externalWalletAddress", query);
-      break;
-  }
-
-  const response = await fetch(url.toString(), {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-      "x-thirdweb-team-id": teamId,
-      ...(clientId && { "x-client-id": clientId }),
-    },
-    method: "GET",
-  });
-
-  if (!response.ok) {
-    throw new Error(
-      `Failed to search users: ${response.status} ${response.statusText}`,
-    );
-  }
-
-  const data = await response.json();
-  return data.users as WalletUser[];
 }
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { useLocalStorage } from "@/hooks/useLocalStorage";

+// biome-ignore lint/correctness/noUnusedVariables: banner is toggled on-demand via API content changes
 function AnnouncementBannerUI(props: {
  href: string;
  label: string;
@@ -44,11 +45,12 @@ function AnnouncementBannerUI(props: {
 }

 export function AnnouncementBanner() {
-  return (
-    <AnnouncementBannerUI
-      href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
-      label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
-      trackingLabel="product-rebrand"
-    />
-  );
+  // return (
+  //   <AnnouncementBannerUI
+  //     href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
+  //     label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
+  //     trackingLabel="product-rebrand"
+  //   />
+  // );
+  return null;
 }
@@ -2,8 +2,7 @@ import { SettingsIcon } from "lucide-react";
 import type { ThirdwebClient } from "thirdweb";
 import type { UseNetworkSwitcherModalOptions } from "thirdweb/react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { OPSponsoredChains } from "@/constants/chains";
+import { Spinner } from "@/components/ui/Spinner";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { ChainIconClient } from "@/icons/ChainIcon";
 import { cn } from "@/lib/utils";
@@ -32,7 +31,6 @@ export const CustomChainRenderer = ({
  const { idToChain } = useAllChainsData();
  const storedChain = idToChain.get(chain.id);
  const isDeprecated = storedChain?.status === "deprecated";
-  const isSponsored = OPSponsoredChains.includes(chain.id);

  return (
    <div className="flex min-h-[48px] w-full cursor-pointer justify-start rounded-lg px-2 py-1 hover:bg-accent">
@@ -70,16 +68,6 @@ export const CustomChainRenderer = ({
                  Deprecated
                </div>
              )}
-              {isSponsored && (
-                <div
-                  className="flex shrink-0 cursor-not-allowed items-center overflow-hidden rounded-xl px-2 py-1 font-medium text-xs"
-                  style={{
-                    background: "linear-gradient(to right, #701953, #5454B2)",
-                  }}
-                >
-                  Sponsored
-                </div>
-              )}
            </div>
            {switching && (
              <div className="flex items-center gap-1 font-medium text-link-foreground text-xs">
@@ -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";
@@ -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<{
@@ -56,7 +56,8 @@ export function NotificationsButton(props: { accountId: string }) {
      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
      <PopoverContent
        align="end"
-        className="max-h-[90vh] min-h-[500px] w-[400px] max-w-md p-0"
+        sideOffset={8}
+        className="max-h-[90vh] min-h-[550px] w-[450px] max-w-md p-0 flex flex-col rounded-xl overflow-hidden"
      >
        <NotificationList {...manager} />
      </PopoverContent>
@@ -7,7 +7,7 @@ import {
  parseISO,
  subDays,
 } from "date-fns";
-import { ArchiveIcon } from "lucide-react";
+import { ArchiveIcon, ArrowUpRightIcon, BellIcon } from "lucide-react";
 import { useMemo } from "react";
 import type { Notification } from "@/api/notifications";
 import { Button } from "@/components/ui/button";
@@ -42,39 +42,48 @@ export function NotificationEntry({
  }, [notification.createdAt]);

  return (
-    <div className="flex flex-row py-1.5">
-      {onMarkAsRead && (
-        <div className="min-h-full w-1 shrink-0 rounded-r-lg bg-primary" />
-      )}
-      <div className="flex w-full flex-row justify-between gap-2 border-b px-4 py-2 transition-colors last:border-b-0">
+    <div className="flex items-start gap-3 p-4 border-b group hover:bg-card last:border-b-0">
+      <div className="p-2.5 rounded-full border bg-card">
+        <BellIcon className="size-4 text-muted-foreground" />
+      </div>
+      <div className="flex w-full flex-row justify-between gap-2 transition-colors">
        <div className="flex items-start gap-3">
-          <div className="flex-1 space-y-1">
+          <div className="flex-1 space-y-1.5">
            <p className="text-sm">{notification.description}</p>
            {timeAgo && (
              <p className="text-muted-foreground text-xs">{timeAgo}</p>
            )}
-            <div className="flex flex-row justify-between gap-2 pt-1">
-              <Button asChild className="px-0" size="sm" variant="link">
+            <div className="flex flex-row justify-between gap-2 pt-2">
+              <Button
+                asChild
+                size="sm"
+                variant="outline"
+                className="rounded-full bg-card gap-2"
+              >
                <a
                  href={notification.ctaUrl}
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  {notification.ctaText}
+                  <ArrowUpRightIcon className="size-4 text-muted-foreground" />
                </a>
              </Button>
            </div>
          </div>
        </div>
        {onMarkAsRead && (
-          <Button
-            className="text-muted-foreground hover:text-foreground"
-            onClick={() => onMarkAsRead(notification.id)}
-            size="icon"
-            variant="ghost"
-          >
-            <ArchiveIcon className="h-4 w-4" />
-          </Button>
+          <div className="flex items-center">
+            <Button
+              className="p-2 h-auto opacity-0 group-hover:opacity-100 rounded-full text-muted-foreground hover:text-foreground"
+              onClick={() => onMarkAsRead(notification.id)}
+              size="sm"
+              variant="ghost"
+              aria-label="Archive notification"
+            >
+              <ArchiveIcon className="size-4" />
+            </Button>
+          </div>
        )}
      </div>
    </div>
@@ -21,15 +21,15 @@ export function NotificationList(props: ReturnType<typeof useNotifications>) {
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  return (
-    <div className="flex w-full flex-1 flex-col">
+    <div className="flex flex-col overflow-hidden grow">
      <TabButtons
-        tabClassName="!text-sm hover:!bg-transparent !px-0 !py-1"
-        tabContainerClassName="space-x-6 px-4 pt-2"
+        tabClassName="hover:bg-transparent"
+        tabContainerClassName="pt-1.5 px-4"
        tabs={[
          {
            isActive: activeTab === "inbox",
            name: (
-              <div className="flex items-center gap-1">
+              <div className="flex items-center gap-2">
                Inbox
                {props.unreadNotificationsCount > 0 && (
                  <Badge variant="secondary">
@@ -49,7 +49,7 @@ export function NotificationList(props: ReturnType<typeof useNotifications>) {
      />

      <div
-        className="h-full w-full flex-1 overflow-y-auto"
+        className="flex-1 overflow-y-auto overscroll-contain flex flex-col grow"
        ref={scrollContainerRef}
      >
        {activeTab === "inbox" ? (
@@ -93,9 +93,9 @@ function InboxTab(
  },
 ) {
  return props.unreadNotifications.length === 0 ? (
-    <div className="flex h-full flex-col items-center justify-center gap-4 p-8 text-center">
-      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
-        <BellIcon className="h-4 w-4 text-muted-foreground" />
+    <div className="flex grow flex-col items-center justify-center gap-4 p-4 text-center">
+      <div className="p-2 bg-card rounded-full border">
+        <BellIcon className="size-5 text-muted-foreground" />
      </div>
      <p className="text-muted-foreground text-sm">No new notifications</p>
    </div>
@@ -131,9 +131,9 @@ function ArchiveTab(
  },
 ) {
  return props.archivedNotifications.length === 0 ? (
-    <div className="flex flex-col items-center justify-center gap-4 p-8 text-center">
-      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
-        <ArchiveIcon className="h-4 w-4 text-muted-foreground" />
+    <div className="flex grow flex-col items-center justify-center gap-4 p-4 text-center">
+      <div className="p-2 bg-card rounded-full border">
+        <ArchiveIcon className="size-5 text-muted-foreground" />
      </div>
      <p className="text-muted-foreground text-sm">No archived notifications</p>
    </div>
@@ -1,5 +1,4 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { DialogDescription } from "@radix-ui/react-dialog";
 import { useMutation } from "@tanstack/react-query";
 import type { ProjectService } from "@thirdweb-dev/service-utils";
 import { SERVICES } from "@thirdweb-dev/service-utils";
@@ -18,6 +17,7 @@ import {
  Dialog,
  DialogClose,
  DialogContent,
+  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
@@ -32,7 +32,7 @@ import {
  FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Textarea } from "@/components/ui/textarea";
 import { createProjectClient } from "@/hooks/useApi";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
@@ -64,7 +64,7 @@ const CreateProjectDialog = (props: CreateProjectDialogProps) => {
    <CreateProjectDialogUI
      createProject={async (params) => {
        const res = await createProjectClient(props.teamId, params);
-        await createVaultAccountAndAccessToken({
+        const vaultTokens = await createVaultAccountAndAccessToken({
          project: res.project,
          projectSecretKey: res.secret,
        }).catch((error) => {
@@ -74,6 +74,13 @@ const CreateProjectDialog = (props: CreateProjectDialogProps) => {
          );
          throw error;
        });
+
+        const managementAccessToken = vaultTokens.managementToken?.accessToken;
+
+        if (!managementAccessToken) {
+          throw new Error("Missing management access token for project wallet");
+        }
+
        return {
          project: res.project,
          secret: res.secret,
@@ -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";
@@ -1,7 +1,7 @@
 "use client";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useState } from "react";
-import type { ThirdwebClient } from "thirdweb/dist/types/client/client";
+import type { ThirdwebClient } from "thirdweb";
 import { analyticsServerProxy } from "@/actions/proxies";
 import {
  type SponsoredTransaction,
@@ -12,13 +12,14 @@ import { forwardRef, useCallback, useRef, useState } from "react";
 import { toast } from "sonner";
 import {
  prepareTransaction,
+  // eslint-disable-next-line no-restricted-imports
  sendTransaction,
  type ThirdwebClient,
  toWei,
 } from "thirdweb";
 import { type Chain, type ChainMetadata, localhost } from "thirdweb/chains";
 import {
-  PayEmbed,
+  BuyWidget,
  useActiveAccount,
  useActiveWallet,
  useActiveWalletChain,
@@ -29,7 +30,6 @@ import {
 import { privateKeyToAccount, type Wallet } from "thirdweb/wallets";
 import { apiServerProxy } from "@/actions/proxies";
 import { Button } from "@/components/ui/button";
-import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import {
  Dialog,
  DialogContent,
@@ -42,7 +42,7 @@ import {
  PopoverContent,
  PopoverTrigger,
 } from "@/components/ui/popover";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { LOCAL_NODE_PKEY } from "@/constants/misc";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
@@ -251,39 +251,32 @@ export const MismatchButton = forwardRef<
      >
        <DialogContent
          className={cn(
-            "gap-0 p-0",
-            dialog === "no-funds" && "md:!max-w-[480px]",
-            dialog === "pay" && "md:!max-w-[360px] border-none bg-transparent",
+            "gap-0 p-0 md:!max-w-[480px]",
+            dialog === "pay" && "border-none bg-transparent",
          )}
          dialogCloseClassName="focus:ring-0"
        >
-          <DynamicHeight>
-            {dialog === "no-funds" && (
-              <NoFundsDialogContent
-                chain={txChain}
-                client={props.client}
-                isLoggedIn={props.isLoggedIn}
-                onCloseModal={() => setDialog(undefined)}
-                openPayModal={() => {
-                  setDialog("pay");
-                }}
-              />
-            )}
+          {dialog === "no-funds" && (
+            <NoFundsDialogContent
+              chain={txChain}
+              client={props.client}
+              isLoggedIn={props.isLoggedIn}
+              onCloseModal={() => setDialog(undefined)}
+              openPayModal={() => {
+                setDialog("pay");
+              }}
+            />
+          )}

-            {dialog === "pay" && (
-              <PayEmbed
-                className="!w-auto"
-                client={props.client}
-                payOptions={{
-                  prefillBuy: {
-                    amount: "0.01",
-                    chain: txChain,
-                  },
-                }}
-                theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
-              />
-            )}
-          </DynamicHeight>
+          {dialog === "pay" && (
+            <BuyWidget
+              className="!w-full"
+              client={props.client}
+              chain={txChain}
+              amount="0.01"
+              theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
+            />
+          )}
        </DialogContent>
      </Dialog>
    </>
@@ -362,11 +355,7 @@ function NoFundsDialogContent(props: {
                (x) => x.enabled && x.service === "pay",
              ) ? (
              // pay case
-              <Button
-                className="w-full"
-                onClick={props.openPayModal}
-                variant="primary"
-              >
+              <Button className="w-full" onClick={props.openPayModal}>
                Buy Funds
              </Button>
            ) : // no funds options available
@@ -25,6 +25,7 @@ export function CopyAddressButton(props: {
      copyIconPosition={props.copyIconPosition}
      textToCopy={props.address}
      textToShow={shortenedAddress}
+      iconClassName={props.iconClassName}
      tooltip={props.tooltip || "Copy Address"}
      variant={props.variant}
    />
@@ -17,9 +17,7 @@ export function DynamicHeight(props: {
        boxSizing: "border-box",
        height: height ? `${height}px` : "auto",
        overflow: "hidden",
-        transition:
-          props.transition ||
-          "height 210ms cubic-bezier(0.175, 0.885, 0.32, 1.1)",
+        transition: props.transition || "height 220ms ease",
      }}
    >
      <div
@@ -0,0 +1,3 @@
+"use client";
+
+export { ScrollShadow } from "@workspace/ui/components/scroll-shadow";
@@ -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);
-}
@@ -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>
-  );
-}
@@ -0,0 +1 @@
+export { Spinner } from "@workspace/ui/components/spinner";
@@ -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;
-  }
-}
@@ -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>
-  );
-}
@@ -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";
@@ -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";
@@ -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";
@@ -1,83 +1,3 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    defaultVariants: {
-      size: "default",
-      variant: "default",
-    },
-    variants: {
-      size: {
-        default: "h-10 px-4 py-2",
-        icon: "h-10 w-10",
-        lg: "h-11 rounded-md px-8",
-        sm: "h-9 rounded-md px-3",
-      },
-      variant: {
-        default: "bg-foreground text-background hover:bg-foreground/90",
-        destructive:
-          "bg-destructive hover:bg-destructive/90 text-destructive-foreground ",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-        primary: "bg-primary hover:bg-primary/90 text-primary-foreground ",
-        secondary:
-          "bg-secondary hover:bg-secondary/80 text-secondary-foreground ",
-        upsell:
-          "bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
-      },
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, disabled, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-
-    // "button" elements automatically handle the `disabled` attribute.
-    // For non-button elements rendered via `asChild` (e.g. <a>), we still want
-    // to visually convey the disabled state and prevent user interaction.
-    // We do that by conditionally adding the same utility classes that the
-    // `disabled:` pseudo-variant would normally apply and by setting
-    // `aria-disabled` for accessibility.
-    const disabledClass = disabled ? "pointer-events-none opacity-50" : "";
-
-    const btnOnlyProps =
-      Comp === "button"
-        ? {
-            type:
-              (props as React.ButtonHTMLAttributes<HTMLButtonElement>).type ||
-              ("button" as const),
-          }
-        : undefined;
-
-    return (
-      <Comp
-        aria-disabled={disabled ? true : undefined}
-        className={cn(
-          buttonVariants({ className, size, variant }),
-          disabledClass,
-        )}
-        disabled={disabled}
-        ref={ref}
-        {...props}
-        {...btnOnlyProps}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
+"use client";
+export type { ButtonProps } from "@workspace/ui/components/button";
+export { Button, buttonVariants } from "@workspace/ui/components/button";
@@ -1,7 +1,7 @@
 "use client";

 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import * as React from "react";

 import { cn } from "@/lib/utils";
@@ -21,7 +21,11 @@ const Checkbox = React.forwardRef<
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
-      <CheckIcon className="size-4" />
+      {props.checked === "indeterminate" ? (
+        <MinusIcon className="size-3" />
+      ) : (
+        <CheckIcon className="size-4" />
+      )}
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
 ));
@@ -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";
@@ -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";
@@ -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";
@@ -0,0 +1,45 @@
+"use client";
+
+import type React from "react";
+import { useRef } from "react";
+import { Button } from "@/components/ui/button";
+
+interface ImageUploadProps {
+  value: File | undefined;
+  onChange?: (files: File[]) => void;
+  children?: React.ReactNode;
+  variant?: React.ComponentProps<typeof Button>["variant"];
+  className?: string;
+  multiple?: boolean;
+  accept: string;
+}
+
+export function ImageUploadButton(props: ImageUploadProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    props.onChange?.(files);
+  };
+
+  return (
+    <div>
+      <Button
+        className={props.className}
+        onClick={() => fileInputRef.current?.click()}
+        variant={props.variant}
+      >
+        {props.children}
+      </Button>
+      <input
+        accept={props.accept}
+        aria-label="Upload image"
+        className="hidden"
+        multiple={props.multiple}
+        onChange={handleFileChange}
+        ref={fileInputRef}
+        type="file"
+      />
+    </div>
+  );
+}
@@ -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";
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default } from "@workspace/ui/postcss.config";`
				`@@ -0,0 +1 @@`
				`export { Spinner } from "@workspace/ui/components/spinner";`