Version Packages (#7943)

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

apps/dashboard/.env.example

@@ -1,29 +1,22 @@
-#
 # Public (client)
-#
-
-# API authorized domain
-# not required to build, defaults to prod
-NEXT_PUBLIC_THIRDWEB_DOMAIN="localhost:3000"
+# ------------------------------------------------------------------------
 
 # API host. For local development, please use "https://api.thirdweb-dev.com"
 # otherwise: "https://api.thirdweb.com"
+# local host - http://127.0.0.1:3005
 NEXT_PUBLIC_THIRDWEB_API_HOST="https://api.thirdweb-dev.com"
 
 # Bridge API. For local development, please use "https://bridge.thirdweb-dev.com"
 # otherwise: "https://bridge.thirdweb.com"
 NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST="https://bridge.thirdweb-dev.com"
 
-# Paper API host
+# in-app wallet host
 NEXT_PUBLIC_THIRDWEB_EWS_API_HOST="https://ews.thirdweb-dev.com"
 
-# thirdweb local api host
-# NEXT_PUBLIC_THIRDWEB_API_HOST="http://127.0.0.1:3005"
-
-# Client ID
-# Get the client id from https://thirdweb.com/create-api-key and set it here,
+# Client ID - Required
+# Get the client id from https://thirdweb.com/create-api-key and set it here, and also set DASHBOARD_SECRET_KEY below
 # make sure to allow localhost:3000 in the allowed origins
-NEXT_PUBLIC_DASHBOARD_CLIENT_ID="<replace_me_with_your_client_id>"
+NEXT_PUBLIC_DASHBOARD_CLIENT_ID=""
 
 # IPFS gateway url
 NEXT_PUBLIC_IPFS_GATEWAY_URL="https://{clientId}.thirdwebstorage-dev.com/ipfs/{cid}/{path}"
@@ -39,62 +32,35 @@ NEXT_PUBLIC_TYPESENSE_CONTRACT_API_KEY=
 # - not required for prod/staging
 NEXT_PUBLIC_POSTHOG_KEY=""
 
-# Stripe Customer portal
-NEXT_PUBLIC_STRIPE_KEY=
+# required for server wallet management
+NEXT_PUBLIC_THIRDWEB_VAULT_URL=""
+NEXT_PUBLIC_ENGINE_CLOUD_URL=""
+
+
+# Demo Engine - required for showing demo engine page
+NEXT_PUBLIC_DEMO_ENGINE_URL=""
 
-NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID=
 
-#
 # Private (server)
-#
-# Get the secret key from https://thirdweb.com/create-api-key and set it here, Make sure to allow localhost:3000 in the allowed origins
+# ------------------------------------------------------------------------
+
+# Get the secret key from https://thirdweb.com/create-api-key and set it here and also set NEXT_PUBLIC_DASHBOARD_CLIENT_ID above,
+# Make sure to allow localhost:3000 in the allowed origins
 DASHBOARD_SECRET_KEY="<replace_me_with_your_secret_key>"
 
-# Client id for api routes
+# Client id for api routes - required for contract OG image generation
 API_ROUTES_CLIENT_ID=
 
-# <moralis.io API key (used for api routes for token balances and wallet NFTs)
-# - not required to build (unless using wallet NFTs and token balances)>
-MORALIS_API_KEY=
-
-# alchemy.com API key (used for wallet NFTS)
-# - cannot be restricted to IP/domain because vercel has no stable IPs and it happens during build & runtime api route call
-# - not required to build (unless testing wallet NFTs)>
-SSR_ALCHEMY_KEY=
-
-
-# Hubspot Access Token (used for contact us form)
-# - not required to build (unless testing contact us form)>
-HUBSPOT_ACCESS_TOKEN=
-
-# Upload server url
-NEXT_PUBLIC_DASHBOARD_UPLOAD_SERVER="https://storage.thirdweb-preview.com"
-
-# Unthread variables - only required for submitting the support form in /support
-UNTHREAD_API_KEY=""
-UNTHREAD_TRIAGE_CHANNEL_ID=""
-UNTHREAD_EMAIL_INBOX_ID=""
-UNTHREAD_FREE_TIER_ID=""
-UNTHREAD_GROWTH_TIER_ID=""
-UNTHREAD_PRO_TIER_ID=""
-
-# Demo Engine
-NEXT_PUBLIC_DEMO_ENGINE_URL=""
-
 # API server secret (required for thirdweb.com SIWE login). Copy from Vercel.
 API_SERVER_SECRET=""
 
-# Used for the Faucet page (/<chain_id>)
+# Used in faucet on chain page (/<chain-id>) and login page (/login) - turnstile is disabled in localhost development
 NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
 TURNSTILE_SECRET_KEY=""
+
 REDIS_URL=""
 
 ANALYTICS_SERVICE_URL=""
 
-
 # required for billing parts of the dashboard (team -> settings -> billing / invoices)
 STRIPE_SECRET_KEY=""
-
-# required for server wallet management
-NEXT_PUBLIC_THIRDWEB_VAULT_URL=""
-NEXT_PUBLIC_ENGINE_CLOUD_URL=""

apps/dashboard/.eslintrc.js

@@ -96,6 +96,12 @@ module.exports = {
             name: "posthog-js",
           },
         ],
+        patterns: [
+          {
+            group: ["**/../@/**"],
+            message: "Use absolute imports instead. Example: '@/foo/bar..'",
+          },
+        ],
       },
     ],
     "no-restricted-syntax": [

apps/dashboard/.storybook/preview.tsx

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

apps/dashboard/framer-rewrites.js

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

apps/dashboard/knip.json

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

apps/dashboard/next.config.ts

@@ -9,10 +9,10 @@ const ContentSecurityPolicy = `
   img-src * data: blob:;
   media-src * data: blob:;
   object-src 'none';
-  style-src 'self' 'unsafe-inline' vercel.live;
+  style-src 'self' 'unsafe-inline' vercel.live us.posthog.com;
   font-src 'self' vercel.live assets.vercel.com framerusercontent.com fonts.gstatic.com;
   frame-src * data:;
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com challenges.cloudflare.com googletagmanager.com us-assets.i.posthog.com edit.framer.com;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com challenges.cloudflare.com googletagmanager.com us-assets.i.posthog.com edit.framer.com framer.com googletagmanager.com;
   connect-src * data: blob:;
   worker-src 'self' blob:;
   block-all-mixed-content;
@@ -115,6 +115,7 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
 const FRAMER_ADDITIONAL_LANGUAGES = ["es"];
 
 const baseNextConfig: NextConfig = {
+  transpilePackages: ["@workspace/ui"],
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -196,7 +197,6 @@ const baseNextConfig: NextConfig = {
       ]),
     ];
   },
-  serverExternalPackages: ["pino-pretty"],
 };
 
 function getConfig(): NextConfig {

apps/dashboard/package.json

@@ -19,7 +19,6 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tooltip": "1.2.7",
-    "@scalar/api-reference-react": "0.7.25",
     "@sentry/nextjs": "9.34.0",
     "@shazow/whatsabi": "0.22.2",
     "@tanstack/react-query": "5.81.5",
@@ -28,6 +27,7 @@
     "@thirdweb-dev/vault-sdk": "workspace:*",
     "@vercel/functions": "2.2.2",
     "@vercel/og": "^0.6.8",
+    "@workspace/ui": "workspace:*",
     "abitype": "1.0.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -43,11 +43,9 @@
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
     "nuqs": "^2.4.3",
-    "p-limit": "^6.2.0",
     "papaparse": "^5.5.3",
     "pluralize": "^8.0.0",
     "posthog-js": "1.256.1",
-    "posthog-node": "^5.4.0",
     "prettier": "3.6.2",
     "react": "19.1.0",
     "react-children-utilities": "^2.10.0",
@@ -57,13 +55,12 @@
     "react-error-boundary": "6.0.0",
     "react-hook-form": "7.55.0",
     "react-markdown": "10.1.0",
-    "react-qrcode-logo": "^3.0.0",
     "react-table": "^7.8.0",
     "recharts": "2.15.3",
     "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",
@@ -130,4 +127,4 @@
     "update-checkly": "npx checkly deploy"
   },
   "version": "3.0.0"
-}
+}

apps/dashboard/postcss.config.js

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

apps/dashboard/postcss.config.mjs

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

apps/dashboard/redirects.js

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

apps/dashboard/src/@/actions/account/getAccount.ts

@@ -1,6 +1,6 @@
 "use server";
 
-import { getRawAccount } from "../../app/(app)/account/settings/getAccount";
+import { getRawAccount } from "@/api/account/get-account";
 
 export async function getRawAccountAction() {
   return getRawAccount();

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

@@ -1,89 +0,0 @@
-"use server";
-import { isAddress, toTokens, ZERO_ADDRESS } from "thirdweb";
-import { getWalletBalance } from "thirdweb/wallets";
-import { MORALIS_API_KEY } from "@/constants/server-envs";
-import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { defineDashboardChain } from "@/lib/defineDashboardChain";
-
-type BalanceQueryResponse = Array<{
-  balance: string;
-  decimals: number;
-  name?: string;
-  symbol: string;
-  token_address: string;
-  display_balance: string;
-}>;
-
-export async function getTokenBalancesFromMoralis(params: {
-  contractAddress: string;
-  chainId: number;
-}): Promise<
-  | { data: BalanceQueryResponse; error: undefined }
-  | {
-      data: undefined;
-      error: string;
-    }
-> {
-  const { contractAddress, chainId } = params;
-
-  if (!isAddress(contractAddress)) {
-    return {
-      data: undefined,
-      error: "invalid address",
-    };
-  }
-
-  const getNativeBalance = async (): Promise<BalanceQueryResponse> => {
-    // eslint-disable-next-line no-restricted-syntax
-    const chain = defineDashboardChain(chainId, undefined);
-    const balance = await getWalletBalance({
-      address: contractAddress,
-      chain,
-      client: serverThirdwebClient,
-    });
-    return [
-      {
-        balance: balance.value.toString(),
-        decimals: balance.decimals,
-        display_balance: toTokens(balance.value, balance.decimals),
-        name: "Native Token",
-        symbol: balance.symbol,
-        token_address: ZERO_ADDRESS,
-      },
-    ];
-  };
-
-  const getTokenBalances = async (): Promise<BalanceQueryResponse> => {
-    const _chain = encodeURIComponent(`0x${chainId?.toString(16)}`);
-    const _address = encodeURIComponent(contractAddress);
-    const tokenBalanceEndpoint = `https://deep-index.moralis.io/api/v2/${_address}/erc20?chain=${_chain}`;
-
-    const resp = await fetch(tokenBalanceEndpoint, {
-      headers: {
-        "x-api-key": MORALIS_API_KEY,
-      },
-      method: "GET",
-    });
-
-    if (!resp.ok) {
-      resp.body?.cancel();
-      return [];
-    }
-    const json = await resp.json();
-    // biome-ignore lint/suspicious/noExplicitAny: FIXME
-    return json.map((balance: any) => ({
-      ...balance,
-      display_balance: toTokens(BigInt(balance.balance), balance.decimals),
-    }));
-  };
-
-  const [nativeBalance, tokenBalances] = await Promise.all([
-    getNativeBalance(),
-    getTokenBalances(),
-  ]);
-
-  return {
-    data: [...nativeBalance, ...tokenBalances],
-    error: undefined,
-  };
-}

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

@@ -1,210 +0,0 @@
-"use server";
-
-import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
-import { MORALIS_API_KEY } from "@/constants/server-envs";
-import {
-  generateAlchemyUrl,
-  transformAlchemyResponseToNFT,
-} from "@/lib/wallet/nfts/alchemy";
-import {
-  generateMoralisUrl,
-  transformMoralisResponseToNFT,
-} from "@/lib/wallet/nfts/moralis";
-import type { WalletNFT } from "@/lib/wallet/nfts/types";
-import { getVercelEnv } from "@/utils/vercel";
-import { isAlchemySupported } from "../lib/wallet/nfts/isAlchemySupported";
-import { isMoralisSupported } from "../lib/wallet/nfts/isMoralisSupported";
-
-type WalletNFTApiReturn =
-  | { result: WalletNFT[]; error?: undefined }
-  | { result?: undefined; error: string };
-
-export async function getWalletNFTs(params: {
-  chainId: number;
-  owner: string;
-  isInsightSupported: boolean;
-}): Promise<WalletNFTApiReturn> {
-  const { chainId, owner } = params;
-
-  if (params.isInsightSupported) {
-    const response = await getWalletNFTsFromInsight({ chainId, owner });
-
-    if (!response.ok) {
-      return {
-        error: response.error,
-      };
-    }
-
-    return { result: response.data };
-  }
-
-  if (isAlchemySupported(chainId)) {
-    const url = generateAlchemyUrl({ chainId, owner });
-
-    const response = await fetch(url, {
-      next: {
-        revalidate: 10, // cache for 10 seconds
-      },
-    });
-    if (response.status >= 400) {
-      return { error: response.statusText };
-    }
-    try {
-      const parsedResponse = await response.json();
-      const result = await transformAlchemyResponseToNFT(parsedResponse, owner);
-
-      return { error: undefined, result };
-    } catch (err) {
-      console.error("Error fetching NFTs", err);
-      return { error: "error parsing response" };
-    }
-  }
-
-  if (isMoralisSupported(chainId) && MORALIS_API_KEY) {
-    const url = generateMoralisUrl({ chainId, owner });
-
-    const response = await fetch(url, {
-      headers: {
-        "X-API-Key": MORALIS_API_KEY,
-      },
-      method: "GET",
-      next: {
-        revalidate: 10, // cache for 10 seconds
-      },
-    });
-
-    if (response.status >= 400) {
-      return { error: response.statusText };
-    }
-
-    try {
-      const parsedResponse = await response.json();
-      const result = await transformMoralisResponseToNFT(
-        await parsedResponse,
-        owner,
-        chainId,
-      );
-
-      return { result };
-    } catch (err) {
-      console.error("Error fetching NFTs", err);
-      return { error: "error parsing response" };
-    }
-  }
-
-  return { error: "unsupported chain" };
-}
-
-type OwnedNFTInsightResponse = {
-  name: string;
-  description: string;
-  image_url?: string;
-  background_color: string;
-  external_url: string;
-  metadata_url: string;
-  extra_metadata: {
-    customImage?: string;
-    customAnimationUrl?: string;
-    animation_original_url?: string;
-    image_original_url?: string;
-  };
-  collection: {
-    name: string;
-    description: string;
-    extra_metadata: Record<string, string>;
-  };
-  contract: {
-    chain_id: number;
-    address: string;
-    type: "erc1155" | "erc721";
-    name: string;
-  };
-  owner_addresses: string[];
-  token_id: string;
-  balance: string;
-  token_type: "erc1155" | "erc721";
-};
-
-async function getWalletNFTsFromInsight(params: {
-  chainId: number;
-  owner: string;
-}): Promise<
-  | {
-      data: WalletNFT[];
-      ok: true;
-    }
-  | {
-      ok: false;
-      error: string;
-    }
-> {
-  const { chainId, owner } = params;
-
-  const thirdwebDomain =
-    getVercelEnv() === "production" ? "thirdweb" : "thirdweb-dev";
-  const url = new URL(`https://insight.${thirdwebDomain}.com/v1/nfts`);
-  url.searchParams.append("chain", chainId.toString());
-  url.searchParams.append("limit", "10");
-  url.searchParams.append("owner_address", owner);
-
-  const response = await fetch(url, {
-    headers: {
-      "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
-    },
-  });
-
-  if (!response.ok) {
-    const errorMessage = await response.text();
-    return {
-      error: errorMessage,
-      ok: false,
-    };
-  }
-
-  const nftsResponse = (await response.json()) as {
-    data: OwnedNFTInsightResponse[];
-  };
-
-  const isDev = getVercelEnv() !== "production";
-
-  // NOTE: ipfscdn.io/ to thirdwebstorage-dev.com/ replacement is temporary
-  // This should be fixed in the insight dev endpoint
-
-  const walletNFTs = nftsResponse.data.map((nft) => {
-    const walletNFT: WalletNFT = {
-      chainId: nft.contract.chain_id,
-      contractAddress: nft.contract.address,
-      id: nft.token_id,
-      metadata: {
-        animation_url: isDev
-          ? nft.extra_metadata.animation_original_url?.replace(
-              "ipfscdn.io/",
-              "thirdwebstorage-dev.com/",
-            )
-          : nft.extra_metadata.animation_original_url,
-        background_color: nft.background_color,
-        description: nft.description,
-        external_url: nft.external_url,
-        image: isDev
-          ? nft.image_url?.replace("ipfscdn.io/", "thirdwebstorage-dev.com/")
-          : nft.image_url,
-        name: nft.name,
-        uri: isDev
-          ? nft.metadata_url.replace("ipfscdn.io/", "thirdwebstorage-dev.com/")
-          : nft.metadata_url,
-      },
-      owner: params.owner,
-      supply: nft.balance,
-      tokenAddress: nft.contract.address,
-      tokenURI: nft.metadata_url,
-      type: nft.token_type === "erc721" ? "ERC721" : "ERC1155",
-    };
-
-    return walletNFT;
-  });
-
-  return {
-    data: walletNFTs,
-    ok: true,
-  };
-}

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

@@ -1,7 +1,7 @@
 import "server-only";
 
 import Stripe from "stripe";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { STRIPE_SECRET_KEY } from "@/constants/server-envs";
 
 let existingStripe: Stripe | undefined;

apps/dashboard/src/@/actions/team/createTeam.ts

@@ -5,7 +5,7 @@ import "server-only";
 import { randomBytes } from "crypto";
 import { format } from "date-fns";
 import { getAuthToken } from "@/api/auth-token";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 
 export async function createTeam(options?: { name?: string; slug?: string }) {

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

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

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

@@ -1,6 +1,7 @@
+"use client";
 import posthog from "posthog-js";
 
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import type { ProductSKU } from "../types/billing";
 
 // ----------------------------
@@ -223,7 +224,11 @@ export function reportChainConfigurationAdded(properties: {
 // ASSETS
 // ----------------------------
 
-type AssetContractType = "DropERC20" | "DropERC1155" | "DropERC721";
+type AssetContractType =
+  | "DropERC20"
+  | "DropERC1155"
+  | "DropERC721"
+  | "ERC20Asset";
 
 /**
  * ### Why do we need to report this event?
@@ -269,22 +274,6 @@ export function reportAssetBuyFailed(properties: {
 
 // Assets Landing Page ----------------------------
 
-/**
- * ### Why do we need to report this event?
- * - To track number of asset creation started from the assets page
- * - To track which asset types are being created the most
- *
- * ### Who is responsible for this event?
- * @MananTank
- */
-export function reportAssetCreationStarted(properties: {
-  assetType: "nft" | "coin";
-}) {
-  posthog.capture("asset creation started", {
-    assetType: properties.assetType,
-  });
-}
-
 /**
  * ### Why do we need to report this event?
  * - To track number of assets imported successfully from the assets page
@@ -349,6 +338,15 @@ export function reportAssetCreationSuccessful(properties: {
   });
 }
 
+type CoinCreationStep =
+  | "erc20-asset:deploy-contract"
+  | "erc20-asset:airdrop-tokens"
+  | "erc20-asset:approve-airdrop-tokens"
+  | "drop-erc20:deploy-contract"
+  | "drop-erc20:set-claim-conditions"
+  | "drop-erc20:mint-tokens"
+  | "drop-erc20:airdrop-tokens";
+
 /**
  * ### Why do we need to report this event?
  * - To track number of failed asset creations
@@ -370,11 +368,7 @@ export function reportAssetCreationFailed(
       }
     | {
         assetType: "coin";
-        step:
-          | "deploy-contract"
-          | "set-claim-conditions"
-          | "mint-tokens"
-          | "airdrop-tokens";
+        step: CoinCreationStep;
       }
   ),
 ) {
@@ -428,3 +422,128 @@ export function reportUpsellClicked(properties: UpsellParams) {
 export function reportPaymentCardClick(properties: { id: string }) {
   posthog.capture("payment card clicked", properties);
 }
+
+/**
+ * ### Why do we need to report this event?
+ * - To create a funnel "create payment link pageview" -> "payment link created" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @greg
+ */
+export function reportPaymentLinkCreated(properties: {
+  linkId: string;
+  clientId: string;
+}) {
+  posthog.capture("payment link created", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track funnel "payment link pageview" -> "payment link buy successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @greg
+ */
+export function reportPaymentLinkBuySuccessful() {
+  posthog.capture("payment link buy successful");
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of failed payment link buys
+ * - To track what errors users encounter when trying to buy from a payment link
+ *
+ * ### Who is responsible for this event?
+ * @greg
+ */
+export function reportPaymentLinkBuyFailed(properties: {
+  errorMessage: string;
+}) {
+  posthog.capture("payment link buy failed", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To create a funnel for "asset pageview" -> "asset purchase successful" to understand the conversion rate
+ * - To understand which asset types are being viewed the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportAssetPageview(properties: {
+  assetType: "nft" | "coin";
+  chainId: number;
+}) {
+  posthog.capture("asset pageview", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the usage of fund wallet modal
+ * - To create a funnel "fund wallet modal opened" -> "fund wallet buy successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletOpened() {
+  posthog.capture("fund wallet opened");
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of successful fund wallet buys
+ * - To create a funnel "fund wallet modal opened" -> "fund wallet buy successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletSuccessful() {
+  posthog.capture("fund wallet successful");
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of failed fund wallet buys
+ * - To track the errors that users encounter when trying to buy from a fund wallet modal
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletFailed(params: { errorMessage: string }) {
+  posthog.capture("fund wallet failed", params);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the conversion rate of the users choosing to create a token from new flow instead of the old flow
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenUpsellClicked(params: {
+  assetType: "nft" | "coin";
+  pageType: "explore" | "deploy-contract";
+}) {
+  posthog.capture("token upsell clicked", params);
+}
+
+// ----------------------------
+// CHAIN INFRASTRUCTURE CHECKOUT
+// ----------------------------
+/**
+ * ### Why do we need to report this event?
+ * - To record explicit user acknowledgement when proceeding to checkout without RPC
+ * - To measure how often customers choose to omit RPC while purchasing Insight and/or Account Abstraction
+ * - To correlate potential support issues arising from missing RPC
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ */
+export function reportChainInfraRpcOmissionAgreed(properties: {
+  chainId: number;
+  frequency: "monthly" | "annual";
+  includeInsight: boolean;
+  includeAccountAbstraction: boolean;
+}) {
+  posthog.capture("chain infra checkout rpc omission agreed", properties);
+}

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

@@ -1,8 +1,8 @@
 import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import type { Account } from "@/hooks/useApi";
+import { isAccountOnboardingComplete } from "@/utils/account-onboarding";
 import { loginRedirect } from "@/utils/redirects";
-import { isAccountOnboardingComplete } from "../../../login/onboarding/isOnboardingRequired";
 
 /**
  * Just get the account object without enforcing onboarding.

apps/dashboard/src/@/api/account/linked-wallets.ts

@@ -1,5 +1,5 @@
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";
 
 export type LinkedWallet = {
   createdAt: string;

apps/dashboard/src/@/api/auth-token.ts

@@ -1,6 +1,9 @@
 import { cookies } from "next/headers";
-import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
-import { LAST_USED_TEAM_ID } from "@/constants/cookies";
+import {
+  COOKIE_ACTIVE_ACCOUNT,
+  COOKIE_PREFIX_TOKEN,
+  LAST_USED_TEAM_ID,
+} from "@/constants/cookie";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 
 export async function getAuthToken() {

apps/dashboard/src/@/api/contract/fetchDeployMetadata.ts

@@ -1,7 +1,7 @@
 import type { ThirdwebClient } from "thirdweb";
 import { fetchDeployMetadata as sdkFetchDeployMetadata } from "thirdweb/contract";
 import { removeUndefinedFromObjectDeep } from "@/utils/object";
-import type { ContractId } from "./types";
+import type { ContractId } from "../../components/contract-components/types";
 
 // metadata PRE publish, only has the compiler output info (from CLI)
 

apps/dashboard/src/@/api/contract/verify-contract.ts

@@ -0,0 +1,27 @@
+import type { ThirdwebContract } from "thirdweb";
+
+export async function verifyContract(contract: ThirdwebContract) {
+  try {
+    const response = await fetch(
+      "https://contract.thirdweb.com/verify/contract",
+      {
+        body: JSON.stringify({
+          chainId: contract.chain.id,
+          contractAddress: contract.address,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      },
+    );
+
+    if (!response.ok) {
+      console.error(`Error verifying contract: ${response.statusText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error(`Error verifying contract: ${error}`);
+  }
+}

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

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

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

@@ -1,7 +1,7 @@
 import {
   getProjectContracts,
   type ProjectContract,
-} from "@/api/getProjectContracts";
+} from "@/api/project/getProjectContracts";
 import { fetchChainWithLocalOverrides } from "@/utils/fetchChainWithLocalOverrides";
 
 export async function getSortedDeployedContracts(params: {

apps/dashboard/src/@/api/project/projects.ts

@@ -1,7 +1,7 @@
 import "server-only";
 import type { ProjectResponse } from "@thirdweb-dev/service-utils";
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";
 
 export type Project = ProjectResponse;
 

apps/dashboard/src/@/api/team/audit-log.ts

@@ -1,8 +1,8 @@
 "use server";
 
 import "server-only";
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";
 
 export type AuditLogEntry = {
   who: {

apps/dashboard/src/@/api/team/dedicated-support.ts

@@ -1,8 +1,8 @@
 "use server";
 import "server-only";
 
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";
 
 export async function createDedicatedSupportChannel(
   teamIdOrSlug: string,

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

@@ -1,7 +1,7 @@
 import "server-only";
 
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";
 
 export type AuthOption =
   | "email"
@@ -12,6 +12,7 @@ export type AuthOption =
   | "google"
   | "facebook"
   | "x"
+  | "tiktok"
   | "discord"
   | "farcaster"
   | "telegram"

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

@@ -1,11 +1,11 @@
 import "server-only";
 import type { TeamResponse } from "@thirdweb-dev/service-utils";
 import { cookies } from "next/headers";
-import { LAST_USED_TEAM_ID } from "@/constants/cookies";
+import { getValidAccount } from "@/api/account/get-account";
+import { getAuthToken } from "@/api/auth-token";
+import { LAST_USED_TEAM_ID } from "@/constants/cookie";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import { API_SERVER_SECRET } from "@/constants/server-envs";
-import { getValidAccount } from "../../app/(app)/account/settings/getAccount";
-import { getAuthToken } from "./auth-token";
 import { getMemberByAccountId } from "./team-members";
 
 export type Team = TeamResponse & { stripeCustomerId: string | null };

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

@@ -1,5 +1,5 @@
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";
 
 export type TeamInvite = {
   id: string;

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

@@ -1,6 +1,6 @@
 import "server-only";
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";
 
 const TeamAccountRole = {
   MEMBER: "MEMBER",

apps/dashboard/src/@/api/team/verified-domain.ts

@@ -1,8 +1,8 @@
 "use server";
 import "server-only";
 
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";
 
 export type VerifiedDomainResponse =
   | {

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

@@ -200,7 +200,11 @@ export async function createPaymentLink(props: {
     throw new Error(text);
   }
 
-  return;
+  const response = (await res.json()) as {
+    data: PaymentLink;
+  };
+
+  return response.data;
 }
 
 export async function deletePaymentLink(props: {

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

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

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

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

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

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

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

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

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

@@ -18,6 +18,7 @@ export function DateRangeSelector(props: {
 }) {
   const { range, setRange } = props;
   const daysDiff = differenceInCalendarDays(range.to, range.from);
+
   const matchingRange =
     normalizeTime(range.to).getTime() === normalizeTime(new Date()).getTime()
       ? durationPresets.find((preset) => preset.days === daysDiff)
@@ -85,7 +86,9 @@ export function getLastNDaysRange(id: DurationId) {
     throw new Error(`Invalid duration id: ${id}`);
   }
 
-  const todayDate = new Date(Date.now() + 1000 * 60 * 60 * 24); // add 1 day to avoid timezone issues
+  const todayDate = new Date();
+  todayDate.setDate(todayDate.getDate() + 1); // Move to next day
+  todayDate.setHours(0, 0, 0, 0); // Set to start of next day (00:00)
 
   const value: Range = {
     from: subDays(todayDate, durationInfo.days),

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

@@ -1,104 +0,0 @@
-"use client";
-import { useQuery } from "@tanstack/react-query";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useState } from "react";
-import type {
-  DurationId,
-  Range,
-} from "@/components/analytics/date-range-selector";
-import {
-  DateRangeSelector,
-  getLastNDaysRange,
-} from "@/components/analytics/date-range-selector";
-import { IntervalSelector } from "@/components/analytics/interval-selector";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-export function RangeSelector({
-  range,
-  interval,
-}: {
-  range?: Range;
-  interval: "day" | "week";
-}) {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const router = useDashboardRouter();
-  const [localRange, setRange] = useState<Range>(
-    range || getLastNDaysRange("last-120"),
-  );
-  const [localInterval, setInterval] = useState<"day" | "week">(interval);
-
-  useQuery({
-    queryFn: async () => {
-      if (range) {
-        setRange(range);
-        return range;
-      }
-      if (searchParams) {
-        const fromStringified = searchParams.get("from");
-        const from = fromStringified
-          ? new Date(fromStringified)
-          : getLastNDaysRange("last-120").from;
-        const toStringified = searchParams.get("to");
-        const to = toStringified ? new Date(toStringified) : new Date();
-        const type = (searchParams.get("type") as DurationId) || "last-120";
-        setRange({ from, to, type });
-        setInterval(interval);
-        return { from, to, type } satisfies Range;
-      }
-      return getLastNDaysRange("last-120");
-    },
-    queryKey: ["analytics-range", searchParams?.toString(), range],
-  });
-
-  // prefetch for each interval and default range
-  useQuery({
-    queryFn: async () => {
-      const newSearchParams = new URLSearchParams(searchParams || {});
-      for (const interval of ["day", "week"] as const) {
-        newSearchParams.set("interval", interval);
-        for (const type of [
-          "last-120",
-          "last-60",
-          "last-30",
-          "last-7",
-        ] as const) {
-          const newRange = getLastNDaysRange(type);
-          newSearchParams.set("from", newRange.from.toISOString());
-          newSearchParams.set("to", newRange.to.toISOString());
-          newSearchParams.set("type", newRange.type);
-          router.prefetch(`${pathname}?${newSearchParams.toString()}`);
-        }
-      }
-      return true;
-    },
-    queryKey: ["analytics-range", searchParams?.toString()],
-  });
-
-  return (
-    <div className="flex justify-end gap-3 flex-col lg:flex-row">
-      <DateRangeSelector
-        className="rounded-full"
-        range={localRange}
-        setRange={(newRange) => {
-          setRange(newRange);
-          const newSearchParams = new URLSearchParams(searchParams || {});
-          newSearchParams.set("from", newRange.from.toISOString());
-          newSearchParams.set("to", newRange.to.toISOString());
-          newSearchParams.set("type", newRange.type);
-          router.push(`${pathname}?${newSearchParams.toString()}`);
-        }}
-      />
-      <IntervalSelector
-        className="bg-card rounded-full"
-        intervalType={localInterval}
-        setIntervalType={(newInterval) => {
-          setInterval(newInterval);
-          const newSearchParams = new URLSearchParams(searchParams || {});
-          newSearchParams.set("interval", newInterval);
-          router.push(`${pathname}?${newSearchParams.toString()}`);
-        }}
-      />
-    </div>
-  );
-}

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

@@ -0,0 +1,55 @@
+"use client";
+
+import {
+  useResponsiveSearchParams,
+  useSetResponsiveSearchParams,
+} from "responsive-rsc";
+import {
+  DateRangeSelector,
+  type DurationId,
+} from "@/components/analytics/date-range-selector";
+import { IntervalSelector } from "@/components/analytics/interval-selector";
+import { getFiltersFromSearchParams, normalizeTimeISOString } from "@/lib/time";
+
+export function ResponsiveTimeFilters(props: { defaultRange: DurationId }) {
+  const responsiveSearchParams = useResponsiveSearchParams();
+  const setResponsiveSearchParams = useSetResponsiveSearchParams();
+  const { range, interval } = getFiltersFromSearchParams({
+    defaultRange: props.defaultRange,
+    from: responsiveSearchParams.from,
+    interval: responsiveSearchParams.interval,
+    to: responsiveSearchParams.to,
+  });
+
+  return (
+    <div className="flex gap-3 flex-row">
+      <DateRangeSelector
+        className="rounded-full"
+        range={range}
+        setRange={(newRange) => {
+          setResponsiveSearchParams((v) => {
+            const newParams = {
+              ...v,
+              from: normalizeTimeISOString(newRange.from),
+              to: normalizeTimeISOString(newRange.to),
+            };
+            return newParams;
+          });
+        }}
+      />
+      <IntervalSelector
+        className="bg-card rounded-full"
+        intervalType={interval}
+        setIntervalType={(newInterval) => {
+          setResponsiveSearchParams((v) => {
+            const newParams = {
+              ...v,
+              interval: newInterval,
+            };
+            return newParams;
+          });
+        }}
+      />
+    </div>
+  );
+}

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

@@ -1,7 +1,7 @@
 "use client";
 import { AlertTriangleIcon } from "lucide-react";
 import Link from "next/link";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { ProductSKU } from "@/types/billing";

apps/dashboard/src/@/components/billing/pricing-card.tsx

@@ -2,9 +2,9 @@
 import { CheckIcon, DollarSignIcon } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { CheckoutButton } from "@/components/billing/billing";
-import { RenewSubscriptionButton } from "@/components/billing/renew-subscription/renew-subscription-button";
+import { RenewSubscriptionButton } from "@/components/billing/renew-subscription-button";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";

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

@@ -5,12 +5,12 @@ import { RefreshCwIcon } from "lucide-react";
 import { useState, useTransition } from "react";
 import { toast } from "sonner";
 import { reSubscribePlan } from "@/actions/billing";
-import type { Team } from "@/api/team";
+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";
+import { pollWithTimeout } from "@/utils/pollWithTimeout";
+import { tryCatch } from "@/utils/try-catch";
 
 export function RenewSubscriptionButton(props: {
   teamId: string;

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

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

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

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

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Label } from "@/components/ui/label";
 import {
   Select,

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

@@ -1,6 +1,6 @@
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { ToolTipLabel } from "@/components/ui/tooltip";

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

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

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

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

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

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

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

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

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

@@ -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>

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

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

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

@@ -1,6 +1,6 @@
 "use client";
 
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Badge, type BadgeProps } from "@/components/ui/badge";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";

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

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

apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx

@@ -95,7 +95,6 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
       {!hideTabs && (
         <TabButtons
           hideBottomLine={!!onlyTabs}
-          tabClassName="text-sm gap-2 !text-sm"
           tabContainerClassName="px-3 pt-1.5 gap-0.5"
           tabIconClassName="size-4"
           tabs={environments.map((env) => ({

apps/dashboard/src/@/components/blocks/dismissible-alert.tsx

@@ -1,12 +1,39 @@
 "use client";
 
 import { XIcon } from "lucide-react";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 
-export function DismissibleAlert(props: {
+export function DismissibleAlert(
+  props: {
+    title: React.ReactNode;
+    header?: React.ReactNode;
+    className?: string;
+    description: React.ReactNode;
+    children?: React.ReactNode;
+  } & (
+    | {
+        preserveState: true;
+        localStorageId: string;
+      }
+    | {
+        preserveState: false;
+      }
+  ),
+) {
+  if (props.preserveState) {
+    return <DismissibleAlertWithLocalStorage {...props} />;
+  }
+
+  return <DismissibleAlertWithoutLocalStorage {...props} />;
+}
+
+function DismissibleAlertWithLocalStorage(props: {
   title: React.ReactNode;
+  header?: React.ReactNode;
   description: React.ReactNode;
+  children?: React.ReactNode;
   localStorageId: string;
 }) {
   const [isVisible, setIsVisible] = useLocalStorage(
@@ -17,19 +44,48 @@ export function DismissibleAlert(props: {
 
   if (!isVisible) return null;
 
+  return <AlertUI {...props} onClose={() => setIsVisible(false)} />;
+}
+
+function DismissibleAlertWithoutLocalStorage(props: {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return <AlertUI {...props} onClose={() => setIsVisible(false)} />;
+}
+
+function AlertUI(props: {
+  title: React.ReactNode;
+  header?: React.ReactNode;
+  description: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+  onClose: () => void;
+}) {
   return (
-    <div className="relative rounded-lg border border-border bg-card p-4">
-      <Button
-        aria-label="Close alert"
-        className="absolute top-4 right-4 h-auto w-auto p-1 text-muted-foreground"
-        onClick={() => setIsVisible(false)}
-        variant="ghost"
-      >
-        <XIcon className="size-5" />
-      </Button>
-      <div>
-        <h2 className="mb-0.5 font-semibold">{props.title} </h2>
-        <div className="text-muted-foreground text-sm">{props.description}</div>
+    <div className={props.className}>
+      <div className="relative rounded-lg border border-border bg-card p-4 lg:p-6 overflow-hidden">
+        <Button
+          aria-label="Close alert"
+          className="absolute top-4 right-4 h-auto w-auto p-1 text-muted-foreground"
+          onClick={props.onClose}
+          variant="ghost"
+        >
+          <XIcon className="size-5" />
+        </Button>
+        <div>
+          {props.header}
+          <h2 className="mb-0.5 font-semibold">{props.title} </h2>
+          <div className="text-muted-foreground text-sm">
+            {props.description}
+          </div>
+          {props.children}
+        </div>
       </div>
     </div>
   );

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

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

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

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

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

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

apps/dashboard/src/@/components/blocks/fund-wallets-modal/fund-wallets-modal.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { useState } from "react";
+import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
+import { Button } from "@/components/ui/button";
+import { storybookThirdwebClient } from "@/storybook/utils";
+import { FundWalletModal } from "./index";
+
+const meta: Meta<typeof FundWalletModal> = {
+  title: "Blocks/FundWalletModal",
+  component: Variant,
+  decorators: [
+    (Story) => (
+      <ThirdwebProvider>
+        <div className="p-10">
+          <ConnectButton client={storybookThirdwebClient} />
+          <div className="h-4" />
+          <Story />
+        </div>
+      </ThirdwebProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Test: Story = {
+  args: {},
+};
+function Variant() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div>
+      <Button type="button" onClick={() => setIsOpen(true)}>
+        Open
+      </Button>
+
+      <FundWalletModal
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        title="This is a title"
+        description="This is a description"
+        recipientAddress="0x83Dd93fA5D8343094f850f90B3fb90088C1bB425"
+        client={storybookThirdwebClient}
+      />
+    </div>
+  );
+}

apps/dashboard/src/@/components/blocks/fund-wallets-modal/index.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import type { ThirdwebClient } from "thirdweb";
+import { defineChain } from "thirdweb/chains";
+import { CheckoutWidget, useActiveWalletChain } from "thirdweb/react";
+import { z } from "zod";
+import {
+  reportFundWalletFailed,
+  reportFundWalletSuccessful,
+} from "@/analytics/report";
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { TokenSelector } from "@/components/blocks/TokenSelector";
+import { Button } from "@/components/ui/button";
+import { DecimalInput } from "@/components/ui/decimal-input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { getSDKTheme } from "@/utils/sdk-component-theme";
+import { WalletAddress } from "../wallet-address";
+
+const formSchema = z.object({
+  chainId: z.number({
+    required_error: "Chain is required",
+  }),
+  token: z.object(
+    {
+      chainId: z.number(),
+      address: z.string(),
+      symbol: z.string(),
+      name: z.string(),
+      decimals: z.number(),
+    },
+    {
+      required_error: "Token is required",
+    },
+  ),
+  amount: z
+    .string()
+    .min(1, "Amount is required")
+    .refine((value) => {
+      const num = Number(value);
+      return !Number.isNaN(num) && num > 0;
+    }, "Amount must be greater than 0"),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+type FundWalletModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  recipientAddress: string;
+  client: ThirdwebClient;
+  defaultChainId?: number;
+  checkoutWidgetTitle?: string;
+};
+
+export function FundWalletModal(props: FundWalletModalProps) {
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent className="p-0 gap-0 !w-full !max-w-md">
+        <FundWalletModalContent
+          open={props.open}
+          onOpenChange={props.onOpenChange}
+          title={props.title}
+          description={props.description}
+          recipientAddress={props.recipientAddress}
+          client={props.client}
+          defaultChainId={props.defaultChainId}
+          checkoutWidgetTitle={props.checkoutWidgetTitle}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function FundWalletModalContent(props: FundWalletModalProps) {
+  const [step, setStep] = useState<"form" | "checkout">("form");
+  const activeChain = useActiveWalletChain();
+  const { theme } = useTheme();
+
+  const form = useForm<FormData>({
+    defaultValues: {
+      chainId: props.defaultChainId || activeChain?.id || 1,
+      token: undefined,
+      amount: "0.1",
+    },
+    mode: "onChange",
+    resolver: zodResolver(formSchema),
+  });
+
+  const selectedChainId = form.watch("chainId");
+
+  return (
+    <div>
+      {step === "form" ? (
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(() => {
+              setStep("checkout");
+            })}
+          >
+            <DialogHeader className="p-4 lg:p-6">
+              <DialogTitle>{props.title}</DialogTitle>
+              <DialogDescription>{props.description}</DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4 px-4 lg:px-6 pb-8">
+              <div>
+                <h3 className="text-sm font-medium"> Recipient</h3>
+                <WalletAddress
+                  address={props.recipientAddress}
+                  client={props.client}
+                  className="py-1 h-auto"
+                  iconClassName="size-4"
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="chainId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Chain</FormLabel>
+                    <FormControl>
+                      <SingleNetworkSelector
+                        className="bg-card"
+                        chainId={field.value}
+                        onChange={(token) => {
+                          field.onChange(token);
+                          form.resetField("token", {
+                            defaultValue: undefined,
+                          });
+                        }}
+                        client={props.client}
+                        placeholder="Select a chain"
+                        disableDeprecated
+                        disableTestnets
+                        disableChainId
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="token"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormLabel>Token</FormLabel>
+                      <FormControl>
+                        <TokenSelector
+                          className="bg-card"
+                          disableAddress
+                          selectedToken={
+                            field.value
+                              ? {
+                                  chainId: field.value.chainId,
+                                  address: field.value.address,
+                                }
+                              : undefined
+                          }
+                          onChange={field.onChange}
+                          chainId={selectedChainId}
+                          client={props.client}
+                          placeholder="Select a token"
+                          enabled={!!selectedChainId}
+                          addNativeTokenIfMissing={true}
+                          showCheck={true}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+
+              <FormField
+                control={form.control}
+                name="amount"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Amount</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <DecimalInput
+                          className="bg-card !text-xl h-auto font-semibold"
+                          value={field.value}
+                          onChange={field.onChange}
+                          placeholder="0.1"
+                        />
+                        {form.watch("token") && (
+                          <div className="absolute right-4 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
+                            {form.watch("token").symbol}
+                          </div>
+                        )}
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="flex justify-end gap-3 p-4 lg:p-6 bg-card border-t rounded-b-lg">
+              <Button
+                variant="outline"
+                onClick={() => props.onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" className="gap-2">
+                Next
+                <ArrowRightIcon className="w-4 h-4" />
+              </Button>
+            </div>
+          </form>
+        </Form>
+      ) : (
+        <div>
+          <DialogHeader className="sr-only">
+            <DialogTitle>{props.title}</DialogTitle>
+            <DialogDescription>{props.description}</DialogDescription>
+          </DialogHeader>
+
+          <div>
+            <CheckoutWidget
+              client={props.client}
+              // eslint-disable-next-line no-restricted-syntax
+              chain={defineChain(form.getValues("chainId"))}
+              tokenAddress={form.getValues("token").address as `0x${string}`}
+              amount={form.getValues("amount")}
+              seller={props.recipientAddress as `0x${string}`}
+              showThirdwebBranding={false}
+              className="!w-full !max-w-full !min-w-0 !rounded-b-none !border-none"
+              theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
+              name={props.checkoutWidgetTitle}
+              onSuccess={() => {
+                reportFundWalletSuccessful();
+              }}
+              onError={(error) => {
+                reportFundWalletFailed({
+                  errorMessage: error.message,
+                });
+              }}
+            />
+          </div>
+
+          <div className="flex justify-end gap-3 p-4 lg:p-6 bg-card border-t rounded-b-lg">
+            <Button
+              variant="outline"
+              onClick={() => setStep("form")}
+              className="gap-2"
+            >
+              <ArrowLeftIcon className="size-4 text-muted-foreground" />
+              Back
+            </Button>
+
+            <Button
+              className="gap-2"
+              variant="outline"
+              onClick={() => props.onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,7 +3,7 @@
 import { CrownIcon, LockIcon } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { TeamPlanBadge } from "@/components/blocks/TeamPlanBadge";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";

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

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

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

@@ -4,7 +4,7 @@ import { MessageCircleIcon, XIcon } from "lucide-react";
 import { useSelectedLayoutSegments } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import { createThirdwebClient } from "thirdweb";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
 import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
 import { cn } from "@/lib/utils";

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

@@ -2,7 +2,7 @@
 import { useCallback, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveWalletConnectionStatus } from "thirdweb/react";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
 import { ThirdwebMiniLogo } from "../../../app/(app)/components/ThirdwebMiniLogo";
 import { ChatBar } from "./ChatBar";

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

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

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

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

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { useFavoriteChainIds } from "@app/(dashboard)/(chain)/components/client/star-button";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -20,6 +19,7 @@ import { LazyConfigureNetworkModal } from "@/components/misc/configure-networks/
 import { Button } from "@/components/ui/button";
 import { popularChains } from "@/constants/popularChains";
 import { useAllChainsData } from "@/hooks/chains/allChains";
+import { useFavoriteChainIds } from "@/hooks/favorite-chains";
 import { useStore } from "@/lib/reactive";
 import {
   addRecentlyUsedChainId,

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { ThirdwebProvider } from "thirdweb/react";
-import type { ProjectContract } from "@/api/getProjectContracts";
+import type { ProjectContract } from "@/api/project/getProjectContracts";
 import { BadgeContainer, storybookThirdwebClient } from "@/storybook/utils";
 import { ContractTableUI } from "./contract-table";
 

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

@@ -6,7 +6,7 @@ import Link from "next/link";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
-import type { ProjectContract } from "@/api/getProjectContracts";
+import type { ProjectContract } from "@/api/project/getProjectContracts";
 import { PaginationButtons } from "@/components/blocks/pagination-buttons";
 import { NetworkSelectDropdown } from "@/components/contract-components/tables/NetworkSelectDropdown";
 import { Badge } from "@/components/ui/badge";
@@ -17,7 +17,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import {
   Table,
@@ -300,6 +300,7 @@ const contractTypeToAssetTypeRecord: Record<string, string | undefined> = {
   DropERC20: "Coin",
   DropERC721: "NFT Collection",
   DropERC1155: "NFT Collection",
+  ERC20Asset: "Coin",
 };
 
 const NetworkFilterCell = React.memo(function NetworkFilterCell({

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

@@ -14,11 +14,11 @@ import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import * as ERC4337Ext from "thirdweb/extensions/erc4337";
 import { useActiveAccount } from "thirdweb/react";
 import { toFunctionSelector } from "thirdweb/utils";
+import { getContractFunctionsFromAbi } from "@/api/contract/getContractFunctionsFromAbi";
 import {
   type CodeEnvironment,
   CodeSegment,
 } from "@/components/blocks/code/code-segment.client";
-import { getContractFunctionsFromAbi } from "@/components/contract-components/getContractFunctionsFromAbi";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { TabButtons } from "@/components/ui/tabs";
@@ -743,7 +743,6 @@ export function CodeOverview(props: {
                   <div className="bg-background">
                     <TabButtons
                       tabs={tabList}
-                      tabClassName="!text-sm"
                       tabContainerClassName="px-3 pt-2"
                     />
                   </div>

apps/dashboard/src/@/components/contracts/contract-card/contract-card.tsx

@@ -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 { ClientOnly } from "@/components/blocks/client-only";
-import { fetchPublishedContractVersion } from "@/components/contract-components/fetch-contracts-with-versions";
+import { resolveAvatar } from "thirdweb/extensions/ens";
+import { fetchPublishedContractVersion } from "@/api/contract/fetch-contracts-with-versions";
 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 "../../../../app/(app)/(dashboard)/explore/components/publisher";
+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">

apps/dashboard/src/@/components/contracts/contract-card/contract-publisher.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import Link from "next/link";
+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";
+
+export function ContractPublisher(props: {
+  ensName: string | undefined;
+  address: string;
+  ensAvatar: string | undefined;
+}) {
+  const displayName = props.ensName || props.address;
+  return (
+    <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} />}
+      />
+
+      <span className="text-xs"> {shortenIfAddress(displayName)}</span>
+    </Link>
+  );
+}

apps/dashboard/src/@/components/contracts/contract-table/index.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { fetchDeployMetadata } from "@/components/contract-components/fetchDeployMetadata";
+import { fetchDeployMetadata } from "@/api/contract/fetchDeployMetadata";
 import { ContractIdImage } from "@/components/contract-components/shared/contract-id-image";
 import {
   Table,

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

@@ -332,7 +332,6 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
           <div className="flex flex-col h-full relative">
             <TabButtons
               tabContainerClassName="px-3 pt-2"
-              tabClassName="!text-sm"
               tabs={[
                 ...(viewFunctions.length > 0
                   ? [

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

@@ -30,9 +30,8 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
-import { InlineCode } from "@/components/ui/inline-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";
 
@@ -414,14 +413,13 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
           )}
 
           {error ? (
-            <>
-              <h3 className="text-sm font-medium">Error</h3>
-              <InlineCode
-                className="relative w-full whitespace-pre-wrap rounded-md border border-border p-4 text-red-500"
-                //  biome-ignore lint/suspicious/noExplicitAny: FIXME
-                code={formatError(error as any)}
+            <div>
+              <h3 className="text-sm font-medium mb-2">Error</h3>
+              <PlainTextCodeBlock
+                className="text-red-500 bg-background"
+                code={formatError(error)}
               />
-            </>
+            </div>
           ) : readLoading ? (
             <Skeleton className="h-20 w-full rounded-lg" />
           ) : formattedResponseData ? (

apps/dashboard/src/@/components/contracts/import-contract/add-to-project-selector.tsx

@@ -1,14 +1,10 @@
 "use client";
 
-import { CircleAlertIcon, ExternalLinkIcon } from "lucide-react";
 import { useId } from "react";
 import type { ThirdwebClient } from "thirdweb";
-import type { Project } from "@/api/projects";
-import type { Team } from "@/api/team";
+
 import { GradientAvatar } from "@/components/blocks/avatar/gradient-avatar";
 import { ProjectAvatar } from "@/components/blocks/avatar/project-avatar";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -17,98 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
-import { Fieldset } from "./common";
-
-export type MinimalTeam = Pick<Team, "id" | "name" | "image" | "slug">;
-export type MinimalProject = Pick<Project, "id" | "name" | "image" | "slug">;
-
-export type TeamAndProjectSelection = {
-  team: MinimalTeam | undefined;
-  project: MinimalProject | undefined;
-};
-
-export type MinimalTeamsAndProjects = Array<{
-  team: MinimalTeam;
-  projects: MinimalProject[];
-}>;
-
-type TeamAndProjectSelectorProps = {
-  teamsAndProjects: MinimalTeamsAndProjects;
-  selection: TeamAndProjectSelection;
-  enabled: boolean;
-  onSelectionChange: (selection: TeamAndProjectSelection) => void;
-  client: ThirdwebClient;
-  onSetEnabled: (enabled: boolean) => void;
-};
-
-export function AddToProjectCardUI(props: TeamAndProjectSelectorProps) {
-  const selectedTeam = props.teamsAndProjects.find(
-    (t) => t.team.id === props.selection.team?.id,
-  );
-
-  const isProjectSelected = props.selection.project && props.enabled;
-
-  return (
-    <Fieldset
-      description="Save the deployed contract in a project's contract list on thirdweb dashboard"
-      headerChildren={
-        <div className="absolute top-4 right-4 lg:top-6 lg:right-6">
-          <Checkbox
-            checked={props.enabled}
-            className="size-5"
-            onCheckedChange={(checked) => {
-              props.onSetEnabled(!!checked);
-            }}
-          />
-        </div>
-      }
-      headerClassName="pr-14"
-      legend="Add To Project"
-    >
-      <div className="flex flex-col gap-5">
-        {/* Team & Project selectors */}
-        {props.enabled && (
-          <AddToProjectSelector
-            client={props.client}
-            onSelectionChange={props.onSelectionChange}
-            selection={props.selection}
-            teamsAndProjects={props.teamsAndProjects}
-          />
-        )}
-
-        {/* No projects alert */}
-        {selectedTeam?.projects.length === 0 && (
-          <Alert variant="info">
-            <CircleAlertIcon className="size-5" />
-            <AlertTitle> Selected team has no projects </AlertTitle>
-            <AlertDescription>
-              <UnderlineLink
-                className="inline-flex items-center gap-2"
-                href={`/team/${selectedTeam.team.slug}`}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                Create Project <ExternalLinkIcon className="size-3.5" />
-              </UnderlineLink>
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {/* No project selected alert */}
-        {!isProjectSelected && (
-          <Alert variant="warning">
-            <CircleAlertIcon className="size-5" />
-            <AlertTitle>No Project Selected</AlertTitle>
-            <AlertDescription>
-              Deployed contract will not be saved in thirdweb dashboard
-            </AlertDescription>
-          </Alert>
-        )}
-      </div>
-    </Fieldset>
-  );
-}
+import type { MinimalTeamsAndProjects, TeamAndProjectSelection } from "./types";
 
 function SlashSeparator() {
   return <div className="mx-2 h-5 w-[2px] rotate-[25deg] bg-foreground/20" />;