Version Packages (#6972 )

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
[SDK] Fix hex value handling for smart wallet execution (#6974 )
2025-05-07 16:03:49 -07:00 · 2025-05-07 15:56:47 -07:00 · 2025-05-07 14:25:21 -07:00 · 2025-05-07 23:03:59 +02:00 · 2025-05-07 23:03:11 +02:00 · 2025-05-08 06:53:10 +12:00
1458 changed files with 86100 additions and 9707 deletions
@@ -0,0 +1,103 @@
+---
+description: Rules for writing features in apps/dashboard
+globs: dashboard
+alwaysApply: false
+---
+
+# Reusable Core UI Components
+
+- Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
+- Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
+- Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
+- Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
+- For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
+- Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
+- Group related components in their own folder and expose a single barrel `index.ts` where necessary.
+- Keep components pure; fetch data outside (server component or hook) and pass it down via props.
+
+# Styling
+
+- Tailwind CSS is **the** styling system – avoid inline styles or CSS modules.
+- Merge class names with `cn` from `@/lib/utils` to keep conditional logic readable.
+- Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
+- Use the `container` class with a `max-w-7xl` cap for page width consistency.
+- Spacing utilities (`px-*`, `py-*`, `gap-*`) are preferred over custom margins.
+- Responsive helpers follow mobile-first (`max-sm`, `md`, `lg`, `xl`).
+- Never hard-code colors – always go through Tailwind variables.
+- Add `className` to the root element of every component for external overrides.
+
+# Creating a new Component
+
+- Place the file close to its feature: `feature/components/MyComponent.tsx`.
+- Name files after the component in **PascalCase**; append `.client.tsx` when interactive.
+- Client components must start with `'use client';` before imports.
+- Accept a typed `props` object and export a **named** function (`export function MyComponent()`).
+- Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
+- Combine class names via `cn`, expose `className` prop if useful.
+- Local state or effects live inside; data fetching happens in hooks.
+- Provide a Storybook story (`MyComponent.stories.tsx`) or unit test alongside the component.
+
+# When to use Server Side Rendering (Server Components)
+
+- Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).
+- Accessing server-only environment variables or secrets.
+- Heavy data fetching that should not ship to the client (e.g. analytics, billing).
+- Redirect logic using `redirect()` from `next/navigation`.
+- Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
+- Export default async functions without `'use client';` – they run on the Node edge.
+- Co-locate data helpers under `@/api/**` and mark them with `"server-only"`.
+
+# When to use Client Side Rendering (Client Components)
+
+- Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
+- Components that listen to user events, animations or live updates.
+- When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
+- Pages requiring fast transitions where data is prefetched on the client.
+- Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
+
+# Fetching Authenticated Data – Server
+
+```ts
+import "server-only";
+import { API_SERVER_URL } from "@/constants/env";
+import { getAuthToken } from "@/app/(app)/api/lib/getAuthToken";
+
+export async function getProjects(teamSlug: string) {
+  const token = await getAuthToken();
+  if (!token) return [];
+  const res = await fetch(`${API_SERVER_URL}/v1/teams/${teamSlug}/projects`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  return res.ok ? (await res.json()).result : [];
+}
+```
+
+Guidelines:
+
+- Always call `getAuthToken()` to get the JWT from cookies.
+- Prefix files with `import "server-only";` so they never end up in the client bundle.
+- Pass the token in the `Authorization: Bearer` header – never embed it in the URL.
+- Return typed results (`Project[]`, `User[]`, …) – avoid `any`.
+
+# Fetching Authenticated Data – Client
+
+```ts
+import { useQuery } from "@tanstack/react-query";
+import { fetchJson } from "@/lib/fetch-json";
+
+export function useProjects(teamSlug: string) {
+  return useQuery({
+    queryKey: ["projects", teamSlug],
+    queryFn: () => fetchJson(`/api/projects?team=${teamSlug}`), // internal API route handles token
+    staleTime: 60_000,
+  });
+}
+```
+
+Guidelines:
+
+- Use **React Query** (`@tanstack/react-query`) for all client data fetching.
+- Create light wrappers (e.g. `fetchJson`) that automatically attach the JWT from cookies/session when calling internal API routes.
+- Keep `queryKey` stable and descriptive for cache hits.
+- Prefer API routes or server actions to keep tokens secret; the browser only sees relative paths.
+- Configure `staleTime` / `cacheTime` according to freshness requirements.
@@ -81,7 +81,7 @@ jobs:
        uses: ./.github/composite-actions/install

      - name: Set up foundry
-        uses: foundry-rs/foundry-toolchain@de808b1eea699e761c404bda44ba8f21aba30b2c # v1.3.1
+        uses: foundry-rs/foundry-toolchain@82dee4ba654bd2146511f85f0d013af94670c4de # v1.4.0
        with:
          cache: false
          version: nightly-c4a984fbf2c48b793c8cd53af84f56009dd1070c
@@ -89,7 +89,7 @@ jobs:
      - run: pnpm test

      - name: Code Coverage
-        uses: codecov/codecov-action@0565863a31f2c772f9f0395002a31e3f06189574 # v5.4.0
+        uses: codecov/codecov-action@ad3126e916f78f00edff4ed0317cf185271ccc2d # v5.4.2
        with:
          directory: packages/
          flags: packages
@@ -46,7 +46,7 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
+        uses: github/codeql-action/init@28deaeda66b76a05916b6923827895f2b14ab387 # v3.28.16
        with:
          languages: ${{ matrix.language }}
          # If you wish to specify custom queries, you can do so here or in a config file.
@@ -59,7 +59,7 @@ jobs:
      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
+        uses: github/codeql-action/autobuild@28deaeda66b76a05916b6923827895f2b14ab387 # v3.28.16

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -72,4 +72,4 @@ jobs:
      #   ./location_of_script_within_repo/buildscript.sh

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
+        uses: github/codeql-action/analyze@28deaeda66b76a05916b6923827895f2b14ab387 # v3.28.16
@@ -30,4 +30,5 @@ packages/*/typedoc/*
 storybook-static
 .aider*

-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+.cursor
@@ -9,6 +9,12 @@
  "typescript.preferences.autoImportFileExcludePatterns": [
    "./packages/thirdweb/src/exports"
  ],
+  "typescript.preferences.autoImportSpecifierExcludeRegexes": [
+    "@radix-ui",
+    "next/router",
+    "next/dist",
+    "^lucide-react/dist/lucide-react.suffixed$"
+  ],
  "typescript.tsdk": "node_modules/typescript/lib",
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
@@ -104,4 +104,8 @@ ANALYTICS_SERVICE_URL=""
 NEXT_PUBLIC_NEBULA_URL=""

 # required for billing parts of the dashboard (team -> settings -> billing / invoices)
-STRIPE_SECRET_KEY=""
+STRIPE_SECRET_KEY=""
+
+# required for server wallet management
+NEXT_PUBLIC_THIRDWEB_VAULT_URL=""
+NEXT_PUBLIC_ENGINE_CLOUD_URL=""
@@ -12,6 +12,7 @@
  "ignoreDependencies": [
    "@storybook/blocks",
    "@thirdweb-dev/service-utils",
+    "@thirdweb-dev/vault-sdk",
    "@types/color",
    "fast-xml-parser"
  ]
@@ -0,0 +1,3 @@
+declare module "lucide-react" {
+  export * from "lucide-react/dist/lucide-react.suffixed";
+}
@@ -111,6 +111,9 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
  automaticVercelMonitors: false,
 };

+// add additional languages to the framer rewrite paths here (english is already included by default)
+const FRAMER_ADDITIONAL_LANGUAGES = ["es"];
+
 const baseNextConfig: NextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
@@ -155,10 +158,18 @@ const baseNextConfig: NextConfig = {
        source: "/home",
        destination: "https://landing.thirdweb.com",
      },
-      ...FRAMER_PATHS.map((path) => ({
-        source: path,
-        destination: `https://landing.thirdweb.com${path}`,
-      })),
+      // flatmap the framer paths for the default language and the additional languages
+      ...FRAMER_PATHS.flatMap((path) => [
+        {
+          source: path,
+          destination: `https://landing.thirdweb.com${path}`,
+        },
+        // this is for additional languages
+        ...FRAMER_ADDITIONAL_LANGUAGES.map((lang) => ({
+          source: `/${lang}${path}`,
+          destination: `https://landing.thirdweb.com/${lang}${path}`,
+        })),
+      ]),
    ];
  },
  images: {
@@ -29,27 +29,29 @@
    "@emotion/styled": "11.14.0",
    "@hookform/resolvers": "^3.9.1",
    "@marsidev/react-turnstile": "^1.1.0",
-    "@radix-ui/react-accordion": "^1.2.4",
-    "@radix-ui/react-alert-dialog": "^1.1.7",
-    "@radix-ui/react-avatar": "^1.1.4",
-    "@radix-ui/react-checkbox": "^1.1.5",
-    "@radix-ui/react-dialog": "1.1.7",
-    "@radix-ui/react-dropdown-menu": "^2.1.7",
-    "@radix-ui/react-hover-card": "^1.1.7",
-    "@radix-ui/react-label": "^2.1.3",
-    "@radix-ui/react-popover": "^1.1.7",
-    "@radix-ui/react-progress": "^1.1.3",
-    "@radix-ui/react-radio-group": "^1.2.4",
-    "@radix-ui/react-select": "^2.1.7",
-    "@radix-ui/react-separator": "^1.1.3",
+    "@radix-ui/react-accordion": "^1.2.7",
+    "@radix-ui/react-alert-dialog": "^1.1.10",
+    "@radix-ui/react-avatar": "^1.1.6",
+    "@radix-ui/react-checkbox": "^1.2.2",
+    "@radix-ui/react-dialog": "1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.11",
+    "@radix-ui/react-hover-card": "^1.1.10",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-popover": "^1.1.10",
+    "@radix-ui/react-progress": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.3.3",
+    "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-separator": "^1.1.4",
    "@radix-ui/react-slot": "^1.2.0",
-    "@radix-ui/react-switch": "^1.1.4",
-    "@radix-ui/react-tooltip": "1.2.0",
-    "@sentry/nextjs": "9.12.0",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tooltip": "1.2.3",
+    "@scalar/api-reference-react": "^0.6.19",
+    "@sentry/nextjs": "9.13.0",
    "@shazow/whatsabi": "0.21.0",
-    "@tanstack/react-query": "5.72.1",
-    "@tanstack/react-table": "^8.21.2",
+    "@tanstack/react-query": "5.74.4",
+    "@tanstack/react-table": "^8.21.3",
    "@thirdweb-dev/service-utils": "workspace:*",
+    "@thirdweb-dev/vault-sdk": "workspace:*",
    "@vercel/functions": "2.0.0",
    "@vercel/og": "^0.6.8",
    "abitype": "1.0.8",
@@ -59,21 +61,21 @@
    "color": "5.0.0",
    "compare-versions": "^6.1.0",
    "date-fns": "4.1.0",
-    "fast-xml-parser": "^5.2.0",
+    "fast-xml-parser": "^5.2.1",
    "fetch-event-stream": "0.1.5",
    "flat": "^6.0.1",
-    "framer-motion": "12.5.0",
+    "framer-motion": "12.9.2",
    "fuse.js": "7.1.0",
    "idb-keyval": "^6.2.1",
    "input-otp": "^1.4.1",
-    "ioredis": "^5.6.0",
+    "ioredis": "^5.6.1",
    "ipaddr.js": "^2.2.0",
-    "lucide-react": "0.487.0",
-    "next": "15.2.4",
+    "lucide-react": "0.503.0",
+    "next": "15.3.1",
    "next-plausible": "^3.12.4",
    "next-themes": "^0.4.6",
    "nextjs-toploader": "^1.6.12",
-    "nuqs": "^2.4.1",
+    "nuqs": "^2.4.3",
    "p-limit": "^6.2.0",
    "papaparse": "^5.5.2",
    "pluralize": "^8.0.0",
@@ -89,7 +91,7 @@
    "react-hook-form": "7.55.0",
    "react-markdown": "^9.0.1",
    "react-table": "^7.8.0",
-    "recharts": "2.15.2",
+    "recharts": "2.15.3",
    "remark-gfm": "4.0.1",
    "responsive-rsc": "0.0.7",
    "server-only": "^0.0.1",
@@ -97,20 +99,20 @@
    "sonner": "2.0.3",
    "spdx-correct": "^3.2.0",
    "stripe": "17.7.0",
-    "swagger-ui-react": "^5.20.7",
+    "swagger-ui-react": "^5.21.0",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "thirdweb": "workspace:*",
    "tiny-invariant": "^1.3.3",
    "use-debounce": "^10.0.4",
-    "zod": "3.24.2"
+    "zod": "3.24.3"
  },
  "devDependencies": {
    "@chakra-ui/cli": "^2.4.1",
    "@chromatic-com/storybook": "3.2.6",
-    "@next/bundle-analyzer": "15.2.4",
-    "@next/eslint-plugin-next": "15.2.4",
-    "@playwright/test": "1.51.1",
+    "@next/bundle-analyzer": "15.3.1",
+    "@next/eslint-plugin-next": "15.3.1",
+    "@playwright/test": "1.52.0",
    "@storybook/addon-essentials": "8.6.12",
    "@storybook/addon-interactions": "8.6.12",
    "@storybook/addon-links": "8.6.12",
@@ -121,15 +123,15 @@
    "@storybook/react": "8.6.12",
    "@storybook/test": "8.6.12",
    "@types/color": "4.2.0",
-    "@types/node": "22.14.0",
+    "@types/node": "22.14.1",
    "@types/papaparse": "^5.3.15",
    "@types/pluralize": "^0.0.33",
    "@types/qrcode": "^1.5.5",
-    "@types/react": "19.1.0",
+    "@types/react": "19.1.2",
    "@types/react-dom": "19.1.2",
    "@types/react-table": "^7.7.20",
    "@types/spdx-correct": "^3.1.3",
-    "@types/swagger-ui-react": "^4.19.0",
+    "@types/swagger-ui-react": "^5.18.0",
    "@typescript-eslint/eslint-plugin": "7.14.1",
    "@typescript-eslint/parser": "7.14.1",
    "autoprefixer": "^10.4.21",
@@ -138,7 +140,7 @@
    "eslint-config-biome": "1.9.4",
    "eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
    "eslint-plugin-storybook": "0.12.0",
-    "knip": "5.47.0",
+    "knip": "5.50.5",
    "next-sitemap": "^4.2.3",
    "postcss": "8.5.3",
    "storybook": "8.6.12",
@@ -1,6 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Check Circle Icon">
-<path id="Vector" d="M8.5 16.5C12.9184 16.5 16.5 12.9184 16.5 8.5C16.5 4.0816 12.9184 0.5 8.5 0.5C4.0816 0.5 0.5 4.0816 0.5 8.5C0.5 12.9184 4.0816 16.5 8.5 16.5Z" fill="white"/>
-<path id="Check" d="M4.87939 9.01716L6.9482 11.086L12.1202 5.91394" stroke="#000001" stroke-width="1.23077" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
@@ -100,11 +100,6 @@ async function redirects() {
      destination: "/auth",
      permanent: false,
    },
-    {
-      source: "/checkout",
-      destination: "/connect",
-      permanent: false,
-    },
    {
      source: "/extensions",
      destination: "/build",
@@ -88,7 +88,7 @@ function main(params: { assetsFolder: string; srcFolder: string }) {
  // remove the files for which its name can be found in the content of the file
  folderVisitor(params.srcFolder, (content) => {
    for (const assetFileName of assetFileNames) {
-      if (content.includes(assetFileName.name)) {
+      if (content.includes(`/${assetFileName.name}`)) {
        unusedFileNames.delete(assetFileName);
      }
    }
@@ -1,6 +1,6 @@
 "use server";

-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
 import { API_SERVER_URL } from "../constants/env";

 export async function acceptInvite(options: {
@@ -1,82 +1,11 @@
 "use server";
-import "server-only";

-import { API_SERVER_URL } from "@/constants/env";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import type { ProductSKU } from "../lib/billing";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";

-export type GetBillingCheckoutUrlOptions = {
-  teamSlug: string;
-  sku: ProductSKU;
-  redirectUrl: string;
-  metadata?: Record<string, string>;
-};
-
-export async function getBillingCheckoutUrl(
-  options: GetBillingCheckoutUrlOptions,
-): Promise<{ status: number; url?: string }> {
-  if (!options.teamSlug) {
-    return {
-      status: 400,
-    };
-  }
-  const token = await getAuthToken();
-
-  if (!token) {
-    return {
-      status: 401,
-    };
-  }
-
-  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${options.teamSlug}/checkout/create-link`,
-    {
-      method: "POST",
-      body: JSON.stringify({
-        sku: options.sku,
-        redirectTo: options.redirectUrl,
-        metadata: options.metadata || {},
-      }),
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  );
-  if (!res.ok) {
-    return {
-      status: res.status,
-    };
-  }
-
-  const json = await res.json();
-  if (!json.result) {
-    return {
-      status: 500,
-    };
-  }
-
-  return {
-    status: 200,
-    url: json.result as string,
-  };
-}
-
-export type GetBillingCheckoutUrlAction = typeof getBillingCheckoutUrl;
-
-export type GetBillingPortalUrlOptions = {
-  teamSlug: string | undefined;
-  redirectUrl: string;
-};
-
-export async function getBillingPortalUrl(
-  options: GetBillingPortalUrlOptions,
-): Promise<{ status: number; url?: string }> {
-  if (!options.teamSlug) {
-    return {
-      status: 400,
-    };
-  }
+export async function reSubscribePlan(options: {
+  teamId: string;
+}): Promise<{ status: number }> {
  const token = await getAuthToken();
  if (!token) {
    return {
@@ -85,16 +14,14 @@ export async function getBillingPortalUrl(
  }

  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${options.teamSlug}/checkout/create-session-link`,
+    `${API_SERVER_URL}/v1/teams/${options.teamId}/checkout/resubscribe-plan`,
    {
-      method: "POST",
-      body: JSON.stringify({
-        redirectTo: options.redirectUrl,
-      }),
+      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
+      body: JSON.stringify({}),
    },
  );

@@ -104,18 +31,7 @@ export async function getBillingPortalUrl(
    };
  }

-  const json = await res.json();
-
-  if (!json.result) {
-    return {
-      status: 500,
-    };
-  }
-
  return {
    status: 200,
-    url: json.result as string,
  };
 }
-
-export type GetBillingPortalUrlAction = typeof getBillingPortalUrl;
@@ -1,6 +1,6 @@
 "use server";

-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
 import { API_SERVER_URL } from "../constants/env";

 export async function confirmEmailWithOTP(otp: string) {
@@ -1,6 +1,6 @@
 "use server";

-import { getRawAccount } from "../../app/account/settings/getAccount";
+import { getRawAccount } from "../../app/(app)/account/settings/getAccount";

 export async function getRawAccountAction() {
  return getRawAccount();
@@ -1,9 +1,8 @@
 "use server";
-
-import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { defineDashboardChain } from "lib/defineDashboardChain";
 import { ZERO_ADDRESS, isAddress, toTokens } from "thirdweb";
 import { getWalletBalance } from "thirdweb/wallets";
+import { getUserThirdwebClient } from "../../app/(app)/api/lib/getAuthToken";

 type BalanceQueryResponse = Array<{
  balance: string;
@@ -24,6 +23,7 @@ export async function getTokenBalancesFromMoralis(params: {
      error: string;
    }
 > {
+  const client = await getUserThirdwebClient();
  const { contractAddress, chainId } = params;

  if (!isAddress(contractAddress)) {
@@ -39,7 +39,7 @@ export async function getTokenBalancesFromMoralis(params: {
    const balance = await getWalletBalance({
      address: contractAddress,
      chain,
-      client: getThirdwebClient(),
+      client,
    });
    return [
      {
@@ -2,16 +2,16 @@

 import {
  generateAlchemyUrl,
-  isAlchemySupported,
  transformAlchemyResponseToNFT,
 } from "lib/wallet/nfts/alchemy";
 import {
  generateMoralisUrl,
-  isMoralisSupported,
  transformMoralisResponseToNFT,
 } from "lib/wallet/nfts/moralis";
 import type { WalletNFT } from "lib/wallet/nfts/types";
 import { getVercelEnv } from "../../lib/vercel-utils";
+import { isAlchemySupported } from "../../lib/wallet/nfts/isAlchemySupported";
+import { isMoralisSupported } from "../../lib/wallet/nfts/isMoralisSupported";
 import { DASHBOARD_THIRDWEB_CLIENT_ID } from "../constants/env";

 type WalletNFTApiReturn =
@@ -1,7 +1,7 @@
 "use server";

-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { API_SERVER_URL, THIRDWEB_ENGINE_CLOUD_URL } from "../constants/env";

 type ProxyActionParams = {
  pathname: string;
@@ -79,6 +79,10 @@ export async function apiServerProxy<T>(params: ProxyActionParams) {
  return proxy<T>(API_SERVER_URL, params);
 }

+export async function engineCloudProxy<T>(params: ProxyActionParams) {
+  return proxy<T>(THIRDWEB_ENGINE_CLOUD_URL, params);
+}
+
 export async function payServerProxy<T>(params: ProxyActionParams) {
  return proxy<T>(
    process.env.NEXT_PUBLIC_PAY_URL
@@ -1,6 +1,6 @@
 "use server";

-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
 import { API_SERVER_URL } from "../constants/env";

 export async function sendTeamInvites(options: {
@@ -1,5 +1,5 @@
 "use server";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
 import { API_SERVER_URL } from "../constants/env";

 export async function updateAccount(values: {
@@ -1,48 +0,0 @@
-"use server";
-
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { cookies } from "next/headers";
-import { getAddress } from "thirdweb";
-import { COOKIE_PREFIX_TOKEN } from "../constants/cookie";
-import { API_SERVER_URL } from "../constants/env";
-
-/**
- * Check that the connected wallet is valid for the current active account
- */
-export async function isWalletValidForActiveAccount(params: {
-  address: string;
-  account: Account;
-  authToken: string;
-}) {
-  const cookieStore = await cookies();
-  const authCookieNameForAddress =
-    COOKIE_PREFIX_TOKEN + getAddress(params.address);
-
-  // authToken for this wallet address should be present
-  const authTokenForAddress = cookieStore.get(authCookieNameForAddress)?.value;
-  if (!authTokenForAddress) {
-    return false;
-  }
-
-  // this authToken should be same as current active authToken
-  if (authTokenForAddress !== params.authToken) {
-    return false;
-  }
-
-  // authToken should be valid
-  const accountRes = await fetch(`${API_SERVER_URL}/v1/account/me`, {
-    method: "GET",
-    headers: {
-      Authorization: `Bearer ${authTokenForAddress}`,
-    },
-  });
-
-  if (accountRes.status !== 200) {
-    return false;
-  }
-
-  const account = (await accountRes.json()).data as Account;
-
-  // the current account should match the account fetched for the authToken
-  return account.id === params.account.id;
-}
@@ -10,7 +10,7 @@ import type {
  WalletStats,
  WalletUserStats,
 } from "types/analytics";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
 import { getChains } from "./chain";

 async function fetchAnalytics(
@@ -1,6 +1,6 @@
 import "server-only";
 import type { ChainMetadata } from "thirdweb/chains";
-import type { ChainService } from "../../app/(dashboard)/(chain)/types/chain";
+import type { ChainService } from "../../app/(app)/(dashboard)/(chain)/types/chain";
 import { API_SERVER_URL, THIRDWEB_API_SECRET } from "../constants/env";

 export async function getGasSponsoredChains() {
@@ -1,4 +1,4 @@
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
 import { API_SERVER_URL } from "../constants/env";

 export type LinkedWallet = {
@@ -1,7 +1,7 @@
 import "server-only";
 import { API_SERVER_URL } from "@/constants/env";
 import type { ProjectResponse } from "@thirdweb-dev/service-utils";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";

 export type Project = ProjectResponse;

@@ -1,4 +1,4 @@
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
 import { API_SERVER_URL } from "../constants/env";

 export type TeamInvite = {
@@ -1,6 +1,6 @@
 import "server-only";
 import { API_SERVER_URL } from "@/constants/env";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";

 const TeamAccountRole = {
  OWNER: "OWNER",
@@ -1,4 +1,4 @@
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
 import { API_SERVER_URL } from "../constants/env";
 import type { ProductSKU } from "../lib/billing";

@@ -1,7 +1,9 @@
 import "server-only";
 import { API_SERVER_URL, THIRDWEB_API_SECRET } from "@/constants/env";
 import type { TeamResponse } from "@thirdweb-dev/service-utils";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { cookies } from "next/headers";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { LAST_USED_TEAM_ID } from "../../constants/cookies";

 export type Team = TeamResponse & { stripeCustomerId: string | null };

@@ -74,3 +76,22 @@ export async function getDefaultTeam() {
  }
  return null;
 }
+
+export async function getLastVisitedTeamOrDefaultTeam() {
+  const token = await getAuthToken();
+  if (!token) {
+    return null;
+  }
+
+  const cookiesStore = await cookies();
+  const lastVisitedTeamId = cookiesStore.get(LAST_USED_TEAM_ID)?.value;
+
+  if (lastVisitedTeamId) {
+    const team = await getTeamById(lastVisitedTeamId);
+    if (team) {
+      return team;
+    }
+  }
+
+  return getDefaultTeam();
+}
@@ -0,0 +1,152 @@
+"use server";
+import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+
+const UB_BASE_URL = process.env.NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST;
+
+type Webhook = {
+  url: string;
+  label: string;
+  active: boolean;
+  createdAt: string;
+  id: string;
+  secret: string;
+  version?: number; // TODO (UB) make this mandatory after migration
+};
+
+export async function getWebhooks(props: {
+  clientId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id-override": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Array<Webhook>;
+}
+
+export async function createWebhook(props: {
+  clientId: string;
+  version?: number;
+  url: string;
+  label: string;
+  secret?: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
+    method: "POST",
+    body: JSON.stringify({
+      url: props.url,
+      label: props.label,
+      version: props.version,
+      secret: props.secret,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id-override": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
+
+export async function deleteWebhook(props: {
+  clientId: string;
+  webhookId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(
+    `${UB_BASE_URL}/v1/developer/webhooks/${props.webhookId}`,
+    {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        "x-client-id-override": props.clientId,
+        Authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
+
+export type Fee = {
+  feeRecipient: string;
+  feeBps: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export async function getFees(props: {
+  clientId: string;
+  teamId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-team-id": props.teamId,
+      "x-client-id-override": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Fee;
+}
+
+export async function updateFee(props: {
+  clientId: string;
+  teamId: string;
+  feeRecipient: string;
+  feeBps: number;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id-override": props.clientId,
+      "x-team-id": props.teamId,
+      Authorization: `Bearer ${authToken}`,
+    },
+    body: JSON.stringify({
+      feeRecipient: props.feeRecipient,
+      feeBps: props.feeBps,
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
@@ -0,0 +1,94 @@
+"use server";
+import "server-only";
+
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+export type VerifiedDomainResponse =
+  | {
+      status: "pending";
+      domain: string;
+      dnsSublabel: string;
+      dnsValue: string;
+    }
+  | {
+      status: "verified";
+      domain: string;
+      verifiedAt: Date;
+    };
+
+export async function checkDomainVerification(
+  teamIdOrSlug: string,
+): Promise<VerifiedDomainResponse | null> {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return null;
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${teamIdOrSlug}/verified-domain`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (res.ok) {
+    return (await res.json())?.result as VerifiedDomainResponse;
+  }
+
+  return null;
+}
+
+export async function createDomainVerification(
+  teamIdOrSlug: string,
+  domain: string,
+): Promise<VerifiedDomainResponse | { error: string }> {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      error: "Unauthorized",
+    };
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${teamIdOrSlug}/verified-domain`,
+    {
+      method: "POST",
+      body: JSON.stringify({ domain }),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  if (res.ok) {
+    return (await res.json())?.result as VerifiedDomainResponse;
+  }
+
+  const resJson = (await res.json()) as {
+    error: {
+      code: string;
+      message: string;
+      statusCode: number;
+    };
+  };
+
+  switch (resJson?.error?.statusCode) {
+    case 400:
+      return {
+        error: "The domain you provided is not valid.",
+      };
+    case 409:
+      return {
+        error: "This domain is already verified by another team.",
+      };
+    default:
+      return {
+        error: resJson?.error?.message ?? "Failed to verify domain",
+      };
+  }
+}
@@ -1,89 +1,51 @@
 "use client";
-
-import { useMutation } from "@tanstack/react-query";
 import { AlertTriangleIcon } from "lucide-react";
 import Link from "next/link";
-import { toast } from "sonner";
-import type {
-  GetBillingCheckoutUrlAction,
-  GetBillingCheckoutUrlOptions,
-  GetBillingPortalUrlAction,
-  GetBillingPortalUrlOptions,
-} from "../actions/billing";
+import {
+  buildBillingPortalUrl,
+  buildCheckoutUrl,
+} from "../../app/(app)/(stripe)/utils/build-url";
 import type { Team } from "../api/team";
+import type { ProductSKU } from "../lib/billing";
 import { cn } from "../lib/utils";
-import { Spinner } from "./ui/Spinner/Spinner";
 import { Button, type ButtonProps } from "./ui/button";

-type CheckoutButtonProps = Omit<GetBillingCheckoutUrlOptions, "redirectUrl"> & {
-  getBillingCheckoutUrl: GetBillingCheckoutUrlAction;
+export function CheckoutButton(props: {
  buttonProps?: Omit<ButtonProps, "children">;
  children: React.ReactNode;
  billingStatus: Team["billingStatus"];
-};
-
-export function CheckoutButton({
-  teamSlug,
-  sku,
-  metadata,
-  getBillingCheckoutUrl,
-  children,
-  buttonProps,
-  billingStatus,
-}: CheckoutButtonProps) {
-  const getUrlMutation = useMutation({
-    mutationFn: async () => {
-      return getBillingCheckoutUrl({
-        teamSlug,
-        sku,
-        metadata,
-        redirectUrl: getAbsoluteUrl("/stripe-redirect"),
-      });
-    },
-  });
-
-  const errorMessage = "Failed to open checkout page";
-
+  teamSlug: string;
+  sku: Exclude<ProductSKU, null>;
+}) {
  return (
    <div className="flex w-full flex-col items-center gap-2">
      {/* show warning if the team has an invalid payment method */}
-      {billingStatus === "invalidPayment" && (
-        <BillingWarning teamSlug={teamSlug} />
+      {props.billingStatus === "invalidPayment" && (
+        <BillingWarning teamSlug={props.teamSlug} />
      )}
      <Button
-        {...buttonProps}
-        className={cn(buttonProps?.className, "w-full gap-2")}
+        {...props.buttonProps}
+        asChild
+        className={cn(props.buttonProps?.className, "w-full gap-2")}
        disabled={
          // disable button if the team has an invalid payment method
          // api will return 402 error if the team has an invalid payment method
-          billingStatus === "invalidPayment" ||
-          getUrlMutation.isPending ||
-          buttonProps?.disabled
+          props.billingStatus === "invalidPayment" ||
+          props.buttonProps?.disabled
        }
        onClick={async (e) => {
-          buttonProps?.onClick?.(e);
-          getUrlMutation.mutate(undefined, {
-            onSuccess: (res) => {
-              if (!res.url) {
-                toast.error(errorMessage);
-                return;
-              }
-
-              const tab = window.open(res.url, "_blank");
-
-              if (!tab) {
-                toast.error(errorMessage);
-                return;
-              }
-            },
-            onError: () => {
-              toast.error(errorMessage);
-            },
-          });
+          props.buttonProps?.onClick?.(e);
        }}
      >
-        {getUrlMutation.isPending && <Spinner className="size-4" />}
-        {children}
+        <Link
+          target="_blank"
+          href={buildCheckoutUrl({
+            teamSlug: props.teamSlug,
+            sku: props.sku,
+          })}
+        >
+          {props.children}
+        </Link>
      </Button>
    </div>
  );
@@ -107,66 +69,27 @@ function BillingWarning({ teamSlug }: { teamSlug: string }) {
  );
 }

-type BillingPortalButtonProps = Omit<
-  GetBillingPortalUrlOptions,
-  "redirectUrl"
-> & {
-  getBillingPortalUrl: GetBillingPortalUrlAction;
+export function BillingPortalButton(props: {
+  teamSlug: string;
  buttonProps?: Omit<ButtonProps, "children">;
  children: React.ReactNode;
-};
-
-export function BillingPortalButton({
-  teamSlug,
-  children,
-  getBillingPortalUrl,
-  buttonProps,
-}: BillingPortalButtonProps) {
-  const getUrlMutation = useMutation({
-    mutationFn: async () => {
-      return getBillingPortalUrl({
-        teamSlug,
-        redirectUrl: getAbsoluteUrl("/stripe-redirect"),
-      });
-    },
-  });
-
-  const errorMessage = "Failed to open billing portal";
-
+}) {
  return (
    <Button
-      {...buttonProps}
-      className={cn(buttonProps?.className, "gap-2")}
-      disabled={getUrlMutation.isPending || buttonProps?.disabled}
+      {...props.buttonProps}
+      className={cn(props.buttonProps?.className, "gap-2")}
+      disabled={props.buttonProps?.disabled}
+      asChild
      onClick={async (e) => {
-        buttonProps?.onClick?.(e);
-        getUrlMutation.mutate(undefined, {
-          onSuccess(res) {
-            if (!res.url) {
-              toast.error(errorMessage);
-              return;
-            }
-
-            const tab = window.open(res.url, "_blank");
-            if (!tab) {
-              toast.error(errorMessage);
-              return;
-            }
-          },
-          onError: () => {
-            toast.error(errorMessage);
-          },
-        });
+        props.buttonProps?.onClick?.(e);
      }}
    >
-      {getUrlMutation.isPending && <Spinner className="size-4" />}
-      {children}
+      <Link
+        href={buildBillingPortalUrl({ teamSlug: props.teamSlug })}
+        target="_blank"
+      >
+        {props.children}
+      </Link>
    </Button>
  );
 }
-
-function getAbsoluteUrl(path: string) {
-  const url = new URL(window.location.origin);
-  url.pathname = path;
-  return url.toString();
-}
@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../../stories/utils";
-import { getThirdwebClient } from "../../../constants/thirdweb.server";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../../stories/utils";
 import { Button } from "../../ui/button";
 import { GradientAvatar } from "./GradientAvatar";

@@ -17,8 +19,6 @@ export const Variants: Story = {
  args: {},
 };

-const client = getThirdwebClient();
-
 function Story() {
  return (
    <div className="container flex max-w-6xl flex-col gap-10 py-10">
@@ -29,7 +29,7 @@ function Story() {
          id={undefined}
          src={undefined}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -38,7 +38,7 @@ function Story() {
          id={"foo"}
          src={undefined}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -47,7 +47,7 @@ function Story() {
          id={"foo"}
          src={""}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -56,7 +56,7 @@ function Story() {
          id={"bar"}
          src={""}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -65,7 +65,7 @@ function Story() {
          src="invalid-src"
          id={undefined}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -74,7 +74,7 @@ function Story() {
          src="https://picsum.photos/200/300"
          id={undefined}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -83,7 +83,7 @@ function Story() {
          src="ipfs://QmZbeJYEs7kCJHyQxjxU2SJUtjSAr4m87wzJFJUyWomKdj/Smily.svg"
          id={undefined}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -123,7 +123,7 @@ function ToggleTest() {
          src={data?.src}
          id={data?.id}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -132,7 +132,7 @@ function ToggleTest() {
          className="size-20"
          src={data ? "invalid-src" : undefined}
          id={undefined}
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>
    </div>
@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../../stories/utils";
-import { getThirdwebClient } from "../../../constants/thirdweb.server";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../../stories/utils";
 import { Button } from "../../ui/button";
 import { ProjectAvatar } from "./ProjectAvatar";

@@ -18,19 +20,25 @@ export const Variants: Story = {
  args: {},
 };

-const client = getThirdwebClient();
-
 function Story() {
  return (
    <div className="container flex max-w-6xl flex-col gap-10 py-10">
      <p> All images below are set with size-6 className </p>

      <BadgeContainer label="No Src - Skeleton">
-        <ProjectAvatar src={undefined} className="size-6" client={client} />
+        <ProjectAvatar
+          src={undefined}
+          className="size-6"
+          client={storybookThirdwebClient}
+        />
      </BadgeContainer>

      <BadgeContainer label="Invalid/Empty Src - BoxIcon Fallback">
-        <ProjectAvatar src={""} className="size-6" client={client} />
+        <ProjectAvatar
+          src={""}
+          className="size-6"
+          client={storybookThirdwebClient}
+        />
      </BadgeContainer>

      <ToggleTest />
@@ -65,14 +73,18 @@ function ToggleTest() {
      <p> Src+Name is: {data ? "set" : "not set"} </p>

      <BadgeContainer label="Valid Src">
-        <ProjectAvatar src={data?.src} className="size-6" client={client} />
+        <ProjectAvatar
+          src={data?.src}
+          className="size-6"
+          client={storybookThirdwebClient}
+        />
      </BadgeContainer>

      <BadgeContainer label="invalid Src">
        <ProjectAvatar
          src={data ? "invalid-src" : undefined}
          className="size-6"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>
    </div>
@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../stories/utils";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../stories/utils";
 import { MultiNetworkSelector } from "./NetworkSelectors";

 const meta = {
@@ -41,6 +44,7 @@ function Variant(props: {
    <BadgeContainer label={props.label}>
      <MultiNetworkSelector
        selectedChainIds={chainIds}
+        client={storybookThirdwebClient}
        onChange={setChainIds}
      />
    </BadgeContainer>
@@ -4,6 +4,7 @@ import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
 import { useCallback, useMemo } from "react";
+import type { ThirdwebClient } from "thirdweb";
 import { ChainIconClient } from "../../../components/icons/ChainIcon";
 import { useAllChainsData } from "../../../hooks/chains/allChains";

@@ -20,6 +21,12 @@ export function MultiNetworkSelector(props: {
  className?: string;
  priorityChains?: number[];
  hideTestnets?: boolean;
+  popoverContentClassName?: string;
+  customTrigger?: React.ReactNode;
+  align?: "center" | "start" | "end";
+  side?: "left" | "right" | "top" | "bottom";
+  showSelectedValuesInModal?: boolean;
+  client: ThirdwebClient;
 }) {
  const { allChains, idToChain } = useAllChainsData();

@@ -84,8 +91,9 @@ export function MultiNetworkSelector(props: {
          <span className="flex grow gap-2 truncate text-left">
            <ChainIconClient
              className="size-5"
-              ipfsSrc={chain.icon?.url}
              loading="lazy"
+              src={chain.icon?.url}
+              client={props.client}
            />
            {cleanChainName(chain.name)}
          </span>
@@ -99,14 +107,19 @@ export function MultiNetworkSelector(props: {
        </div>
      );
    },
-    [idToChain, props.disableChainId],
+    [idToChain, props.disableChainId, props.client],
  );

  return (
    <MultiSelect
      searchPlaceholder="Search by Name or Chain Id"
      selectedValues={props.selectedChainIds.map(String)}
+      popoverContentClassName={props.popoverContentClassName}
+      customTrigger={props.customTrigger}
      options={options}
+      align={props.align}
+      side={props.side}
+      showSelectedValuesInModal={props.showSelectedValuesInModal}
      onSelectedValuesChange={(chainIds) => {
        props.onChange(chainIds.map(Number));
      }}
@@ -132,6 +145,7 @@ export function SingleNetworkSelector(props: {
  disableChainId?: boolean;
  align?: "center" | "start" | "end";
  placeholder?: string;
+  client: ThirdwebClient;
 }) {
  const { allChains, idToChain } = useAllChainsData();

@@ -179,7 +193,8 @@ export function SingleNetworkSelector(props: {
          <span className="flex grow gap-2 truncate text-left">
            <ChainIconClient
              className="size-5"
-              ipfsSrc={chain.icon?.url}
+              src={chain.icon?.url}
+              client={props.client}
              loading="lazy"
            />
            {cleanChainName(chain.name)}
@@ -194,7 +209,7 @@ export function SingleNetworkSelector(props: {
        </div>
      );
    },
-    [idToChain, props.disableChainId],
+    [idToChain, props.disableChainId, props.client],
  );

  const isLoadingChains = allChains.length === 0;
@@ -95,7 +95,7 @@ export function FullWidthSidebarLayout(props: {
          links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
        />

-        <main className="z-0 flex min-w-0 grow flex-col max-sm:w-full">
+        <main className="flex min-w-0 grow flex-col max-sm:w-full">
          {children}
        </main>
        <AppFooter containerClassName="max-w-7xl" />
@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../stories/utils";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../stories/utils";
 import { SingleNetworkSelector } from "./NetworkSelectors";

 const meta = {
@@ -43,6 +46,7 @@ function Variant(props: {
  return (
    <BadgeContainer label={props.label}>
      <SingleNetworkSelector
+        client={storybookThirdwebClient}
        chainId={chainId}
        onChange={setChainId}
        chainIds={props.chainIds}
@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
+import { ThirdwebMiniLogo } from "app/(app)/components/ThirdwebMiniLogo";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { InstagramIcon } from "components/icons/brand-icons/InstagramIcon";
 import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/select";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../stories/utils";
+import { BadgeContainer } from "stories/utils";
 import { type CodeEnvironment, CodeSegment } from "./code-segment.client";

 const meta = {
@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
-import { CheckIcon, ChevronDown, SearchIcon, XIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, SearchIcon, XIcon } from "lucide-react";
 import {
  forwardRef,
  useCallback,
@@ -47,7 +47,12 @@ interface MultiSelectProps
    searchTerm: string,
  ) => boolean;

+  popoverContentClassName?: string;
+  customTrigger?: React.ReactNode;
  renderOption?: (option: { value: string; label: string }) => React.ReactNode;
+  align?: "center" | "start" | "end";
+  side?: "left" | "right" | "top" | "bottom";
+  showSelectedValuesInModal?: boolean;
 }

 export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
@@ -62,6 +67,8 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
      overrideSearchFn,
      renderOption,
      searchPlaceholder,
+      popoverContentClassName,
+      showSelectedValuesInModal = false,
      ...props
    },
    ref,
@@ -155,111 +162,102 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
    return (
      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal>
        <PopoverTrigger asChild>
-          <Button
-            ref={ref}
-            {...props}
-            onClick={handleTogglePopover}
-            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,
-            )}
-          >
-            {selectedValues.length > 0 ? (
-              <div className="flex w-full justify-between">
-                {/* badges */}
-                <div className="flex flex-wrap items-center gap-1.5">
-                  {selectedValues.slice(0, maxCount).map((value) => {
-                    const option = options.find((o) => o.value === value);
-                    if (!option) {
-                      return null;
-                    }
-
-                    return (
-                      <ClosableBadge
-                        key={value}
-                        label={option.label}
-                        onClose={() => toggleOption(value)}
-                      />
-                    );
-                  })}
-
-                  {/* +X more */}
-                  {selectedValues.length > maxCount && (
-                    <ClosableBadge
-                      label={`+ ${selectedValues.length - maxCount} more`}
-                      onClose={clearExtraOptions}
-                    />
-                  )}
-                </div>
-
-                <div className="flex items-center justify-between gap-2">
-                  {/* Clear All */}
-                  {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
-                  {/* biome-ignore lint/a11y/useFocusableInteractive: <explanation> */}
-                  <div
-                    role="button"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      handleClear();
-                    }}
-                    className="rounded p-1 hover:bg-accent"
-                  >
-                    <XIcon className="h-4 cursor-pointer text-muted-foreground" />
-                  </div>
-
-                  <Separator
-                    orientation="vertical"
-                    className="flex h-full min-h-6"
+          {props.customTrigger || (
+            <Button
+              ref={ref}
+              {...props}
+              onClick={handleTogglePopover}
+              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,
+              )}
+            >
+              {selectedValues.length > 0 ? (
+                <div className="flex w-full items-center justify-between">
+                  <SelectedChainsBadges
+                    selectedValues={selectedValues}
+                    options={options}
+                    maxCount={maxCount}
+                    onClose={handleClear}
+                    toggleOption={toggleOption}
+                    clearExtraOptions={clearExtraOptions}
                  />
-                  <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                  <div className="flex items-center justify-between gap-2">
+                    {/* Clear All */}
+                    {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+                    {/* biome-ignore lint/a11y/useFocusableInteractive: <explanation> */}
+                    <div
+                      role="button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        handleClear();
+                      }}
+                      className="rounded p-1 hover:bg-accent"
+                    >
+                      <XIcon className="h-4 cursor-pointer text-muted-foreground" />
+                    </div>
+
+                    <Separator
+                      orientation="vertical"
+                      className="flex h-full min-h-6"
+                    />
+                    <ChevronDownIcon className="h-4 cursor-pointer text-muted-foreground" />
+                  </div>
                </div>
-              </div>
-            ) : (
-              <div className="flex w-full items-center justify-between">
-                <span className="text-muted-foreground text-sm">
-                  {placeholder}
-                </span>
-                <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
-              </div>
-            )}
-          </Button>
+              ) : (
+                <div className="flex w-full items-center justify-between">
+                  <span className="text-muted-foreground text-sm">
+                    {placeholder}
+                  </span>
+                  <ChevronDownIcon className="h-4 cursor-pointer text-muted-foreground" />
+                </div>
+              )}
+            </Button>
+          )}
        </PopoverTrigger>
        <PopoverContent
-          className="p-0"
-          align="center"
+          className={cn(
+            "flex max-h-[500px] flex-col p-0",
+            popoverContentClassName,
+          )}
+          align={props.align}
+          side={props.side}
          sideOffset={10}
          onEscapeKeyDown={() => setIsPopoverOpen(false)}
          style={{
            width: "var(--radix-popover-trigger-width)",
-            maxHeight: "var(--radix-popover-content-available-height)",
+            height:
+              "calc(var(--radix-popover-content-available-height) - 40px)",
          }}
          ref={popoverElRef}
        >
-          <div>
-            {/* Search */}
-            <div className="relative">
-              <Input
-                placeholder={searchPlaceholder || "Search"}
-                value={searchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
-                className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
-                onKeyDown={handleInputKeyDown}
-              />
-              <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
-            </div>
+          {/* Search */}
+          <div className="relative">
+            <Input
+              placeholder={searchPlaceholder || "Search"}
+              value={searchValue}
+              // do not focus on the input when the popover opens to avoid opening the keyboard
+              tabIndex={-1}
+              onChange={(e) => setSearchValue(e.target.value)}
+              className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
+              onKeyDown={handleInputKeyDown}
+            />
+            <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
+          </div>

+          {optionsToShow.length === 0 && (
+            <div className="flex flex-1 flex-col items-center justify-center py-10 text-sm">
+              No results found
+            </div>
+          )}
+
+          {optionsToShow.length > 0 && (
            <ScrollShadow
-              scrollableClassName="max-h-[min(calc(var(--radix-popover-content-available-height)-60px),350px)] p-1"
-              className="rounded"
+              scrollableClassName="p-1 h-full"
+              className="flex-1 rounded"
            >
              {/* List */}
              <div>
-                {optionsToShow.length === 0 && (
-                  <div className="flex justify-center py-10">
-                    No results found
-                  </div>
-                )}
-
                {optionsToShow.map((option, i) => {
                  const isSelected = selectedValues.includes(option.value);
                  return (
@@ -293,7 +291,20 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                })}
              </div>
            </ScrollShadow>
-          </div>
+          )}
+
+          {showSelectedValuesInModal && selectedValues.length > 0 && (
+            <div className="border-t px-3 py-3">
+              <SelectedChainsBadges
+                selectedValues={selectedValues}
+                options={options}
+                maxCount={maxCount}
+                onClose={handleClear}
+                toggleOption={toggleOption}
+                clearExtraOptions={clearExtraOptions}
+              />
+            </div>
+          )}
        </PopoverContent>
      </Popover>
    );
@@ -319,3 +330,44 @@ function ClosableBadge(props: {
 }

 MultiSelect.displayName = "MultiSelect";
+
+function SelectedChainsBadges(props: {
+  selectedValues: string[];
+  options: {
+    label: string;
+    value: string;
+  }[];
+  maxCount: number;
+  onClose: () => void;
+  toggleOption: (value: string) => void;
+  clearExtraOptions: () => void;
+}) {
+  const { selectedValues, options, maxCount, toggleOption, clearExtraOptions } =
+    props;
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {selectedValues.slice(0, maxCount).map((value) => {
+        const option = options.find((o) => o.value === value);
+        if (!option) {
+          return null;
+        }
+
+        return (
+          <ClosableBadge
+            key={value}
+            label={option.label}
+            onClose={() => toggleOption(value)}
+          />
+        );
+      })}
+
+      {/* +X more */}
+      {selectedValues.length > maxCount && (
+        <ClosableBadge
+          label={`+ ${selectedValues.length - maxCount} more`}
+          onClose={clearExtraOptions}
+        />
+      )}
+    </div>
+  );
+}
@@ -8,28 +8,35 @@ import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
 import { TEAM_PLANS } from "utils/pricing";
+import { RenewSubscriptionButton } from "../../../components/settings/Account/Billing/renew-subscription/renew-subscription-button";
 import { useTrack } from "../../../hooks/analytics/useTrack";
 import { remainingDays } from "../../../utils/date-utils";
-import type { GetBillingCheckoutUrlAction } from "../../actions/billing";
 import type { ProductSKU } from "../../lib/billing";
 import { CheckoutButton } from "../billing";

 type PricingCardCta = {
  hint?: string;
-  title: string;
+
  onClick?: () => void;
 } & (
  | {
      type: "link";
      href: string;
+      label: string;
    }
  | {
      type: "checkout";
+      label: string;
+    }
+  | {
+      type: "renew";
    }
 );

 type PricingCardProps = {
+  getTeam: () => Promise<Team>;
  teamSlug: string;
+  teamId: string;
  billingStatus: Team["billingStatus"];
  billingPlan: keyof typeof TEAM_PLANS;
  cta?: PricingCardCta;
@@ -37,18 +44,18 @@ type PricingCardProps = {
  highlighted?: boolean;
  current?: boolean;
  activeTrialEndsAt?: string;
-  getBillingCheckoutUrl: GetBillingCheckoutUrlAction;
 };

 export const PricingCard: React.FC<PricingCardProps> = ({
+  getTeam,
  teamSlug,
+  teamId,
  billingStatus,
  billingPlan,
  cta,
  highlighted = false,
  current = false,
  activeTrialEndsAt,
-  getBillingCheckoutUrl,
 }) => {
  const plan = TEAM_PLANS[billingPlan];
  const isCustomPrice = typeof plan.price === "string";
@@ -131,6 +138,9 @@ export const PricingCard: React.FC<PricingCardProps> = ({

      {cta && (
        <div className="flex flex-col gap-3">
+          {cta.type === "renew" && (
+            <RenewSubscriptionButton teamId={teamId} getTeam={getTeam} />
+          )}
          {billingPlanToSkuMap[billingPlan] && cta.type === "checkout" && (
            <CheckoutButton
              billingStatus={billingStatus}
@@ -141,9 +151,8 @@ export const PricingCard: React.FC<PricingCardProps> = ({
              }}
              teamSlug={teamSlug}
              sku={billingPlanToSkuMap[billingPlan]}
-              getBillingCheckoutUrl={getBillingCheckoutUrl}
            >
-              {cta.title}
+              {cta.label}
            </CheckoutButton>
          )}

@@ -154,7 +163,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
              asChild
            >
              <Link href={cta.href} target="_blank" onClick={handleCTAClick}>
-                {cta.title}
+                {cta.label}
              </Link>
            </Button>
          )}
@@ -8,7 +8,7 @@ import {
  PopoverTrigger,
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
-import { CheckIcon, ChevronDown, SearchIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
 import React, { useRef, useMemo, useEffect } from "react";
 import { useShowMore } from "../../lib/useShowMore";
 import { ScrollShadow } from "../ui/ScrollShadow/ScrollShadow";
@@ -129,9 +129,11 @@ export const SelectWithSearch = React.forwardRef<
                  selectedOption && "text-foreground",
                )}
              >
-                {selectedOption?.label || placeholder}
+                {renderOption && selectedOption
+                  ? renderOption(selectedOption)
+                  : selectedOption?.label || placeholder}
              </span>
-              <ChevronDown className="size-4 cursor-pointer text-muted-foreground" />
+              <ChevronDownIcon className="size-4 cursor-pointer text-muted-foreground" />
            </div>
          </Button>
        </PopoverTrigger>
@@ -8,7 +8,7 @@ import {
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useClipboard } from "hooks/useClipboard";
-import { Check, Copy, XIcon } from "lucide-react";
+import { CheckIcon, CopyIcon, XIcon } from "lucide-react";
 import { useMemo } from "react";
 import { type ThirdwebClient, isAddress } from "thirdweb";
 import { ZERO_ADDRESS } from "thirdweb";
@@ -104,9 +104,9 @@ export function WalletAddress(props: {
              className="flex items-center gap-2"
            >
              {hasCopied ? (
-                <Check className="h-4 w-4" />
+                <CheckIcon className="h-4 w-4" />
              ) : (
-                <Copy className="h-4 w-4" />
+                <CopyIcon className="h-4 w-4" />
              )}
              {hasCopied ? "Copied!" : "Copy"}
            </Button>
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../stories/utils";
+import { BadgeContainer } from "stories/utils";
 import { PaginationButtons } from "./pagination-buttons";

 const meta = {
@@ -9,11 +9,7 @@ import {
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { format, isBefore } from "date-fns";
-import {
-  Calendar as CalendarIcon,
-  CalendarX2Icon,
-  ChevronDownIcon,
-} from "lucide-react";
+import { CalendarIcon, CalendarX2Icon, ChevronDownIcon } from "lucide-react";
 import React from "react";
 import { DynamicHeight } from "./DynamicHeight";
 import { TabButtons } from "./tabs";
@@ -1,7 +1,7 @@
 "use client";

 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
+import { ChevronDownIcon } from "lucide-react";
 import * as React from "react";

 import { cn } from "@/lib/utils";
@@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef<
      {...props}
    >
      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDownIcon className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
 ));
@@ -1,5 +1,5 @@
 import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import * as React from "react";

 import { cn } from "@/lib/utils";
@@ -84,7 +84,7 @@ const BreadcrumbSeparator = ({
    className={cn("[&>svg]:size-3.5", className)}
    {...props}
  >
-    {children ?? <ChevronRight />}
+    {children ?? <ChevronRightIcon />}
  </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -102,7 +102,7 @@ const BreadcrumbEllipsis = ({
    )}
    {...props}
  >
-    <MoreHorizontal className="h-4 w-4" />
+    <MoreHorizontalIcon className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
 );
@@ -20,8 +20,9 @@ const buttonVariants = cva(
          "bg-secondary hover:bg-secondary/80 text-semibold text-secondary-foreground ",
        ghost: "hover:bg-accent text-semibold hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline text-semibold",
+        pink: "border border-nebula-pink-foreground !text-nebula-pink-foreground bg-[hsl(var(--nebula-pink-foreground)/5%)] hover:bg-nebula-pink-foreground/10 dark:!text-foreground dark:bg-nebula-pink-foreground/10 dark:hover:bg-nebula-pink-foreground/20",
        upsell:
-          "bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
+          "bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
      },
      size: {
        default: "h-10 px-4 py-2",
@@ -1,6 +1,6 @@
 "use client";

-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import type * as React from "react";
 import { DayPicker } from "react-day-picker";

@@ -54,8 +54,8 @@ function Calendar({
        ...classNames,
      }}
      components={{
-        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
-        IconRight: () => <ChevronRight className="h-4 w-4" />,
+        IconLeft: () => <ChevronLeftIcon className="size-4" />,
+        IconRight: () => <ChevronRightIcon className="size-4" />,
      }}
      {...props}
    />
@@ -1,7 +1,7 @@
 "use client";

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

 import { cn } from "@/lib/utils";
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
-      <Check className="h-4 w-4" />
+      <CheckIcon className="size-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
 ));
@@ -1,7 +1,7 @@
 "use client";

 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { XIcon } from "lucide-react";
 import * as React from "react";

 import { cn } from "@/lib/utils";
@@ -65,7 +65,7 @@ const DialogContent = React.forwardRef<
            dialogCloseClassName,
          )}
        >
-          <X className="h-4 w-4" />
+          <XIcon className="size-4" />
          <span className="sr-only">Close</span>
        </DialogPrimitive.Close>
      </DialogPrimitive.Content>
@@ -1,7 +1,7 @@
 "use client";

 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import * as React from "react";

 import { cn } from "@/lib/utils";
@@ -34,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
    {...props}
  >
    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto size-4" />
  </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -107,7 +107,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <CheckIcon className="size-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
@@ -130,7 +130,7 @@ const DropdownMenuRadioItem = React.forwardRef<
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <CircleIcon className="size-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
@@ -1,7 +1,7 @@
 "use client";

 import { OTPInput, OTPInputContext } from "input-otp";
-import { Dot } from "lucide-react";
+import { DotIcon } from "lucide-react";
 import * as React from "react";

 import { cn } from "@/lib/utils";
@@ -65,7 +65,7 @@ const InputOTPSeparator = React.forwardRef<
 >(({ ...props }, ref) => (
  // biome-ignore lint/a11y/useFocusableInteractive: pure shadcn component - it works
  <div ref={ref} role="separator" {...props}>
-    <Dot />
+    <DotIcon />
  </div>
 ));
 InputOTPSeparator.displayName = "InputOTPSeparator";
--- a/Show More
+++ b/Show More