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
555 changed files with 17686 additions and 3073 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.
@@ -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";
+}
@@ -45,11 +45,13 @@
    "@radix-ui/react-slot": "^1.2.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.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",
@@ -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,7 +1,7 @@
 "use server";

 import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+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,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 { 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();
+}
@@ -100,12 +100,14 @@ export type Fee = {

 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}`,
    },
@@ -122,6 +124,7 @@ export async function getFees(props: {

 export async function updateFee(props: {
  clientId: string;
+  teamId: string;
  feeRecipient: string;
  feeBps: number;
 }) {
@@ -131,6 +134,7 @@ export async function updateFee(props: {
    headers: {
      "Content-Type": "application/json",
      "x-client-id-override": props.clientId,
+      "x-team-id": props.teamId,
      Authorization: `Bearer ${authToken}`,
    },
    body: JSON.stringify({
@@ -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" />
@@ -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,
@@ -201,7 +201,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                      orientation="vertical"
                      className="flex h-full min-h-6"
                    />
-                    <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                    <ChevronDownIcon className="h-4 cursor-pointer text-muted-foreground" />
                  </div>
                </div>
              ) : (
@@ -209,7 +209,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                  <span className="text-muted-foreground text-sm">
                    {placeholder}
                  </span>
-                  <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                  <ChevronDownIcon className="h-4 cursor-pointer text-muted-foreground" />
                </div>
              )}
            </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>
@@ -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>
 );
@@ -22,7 +22,7 @@ const buttonVariants = cva(
        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";
@@ -1,4 +1,8 @@
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
 import * as React from "react";

 import { Button, type ButtonProps } from "@/components/ui/button";
@@ -66,7 +70,7 @@ const PaginationPrevious = ({
    className={cn("h-10 gap-1 pl-2.5", className)}
    {...props}
  >
-    <ChevronLeft className="h-4 w-4" />
+    <ChevronLeftIcon className="size-4" />
    <span className="max-sm:hidden">Previous</span>
  </PaginationLink>
 );
@@ -83,7 +87,7 @@ const PaginationNext = ({
    {...props}
  >
    <span className="max-sm:hidden">Next</span>
-    <ChevronRight className="h-4 w-4" />
+    <ChevronRightIcon className="size-4" />
  </PaginationLink>
 );
 PaginationNext.displayName = "PaginationNext";
@@ -100,7 +104,7 @@ const PaginationEllipsis = ({
    )}
    {...props}
  >
-    <MoreHorizontal className="h-4 w-4" />
+    <MoreHorizontalIcon className="size-4" />
    <span className="sr-only">More pages</span>
  </span>
 );
@@ -1,7 +1,7 @@
 "use client";

 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
+import { CircleIcon } from "lucide-react";
 import * as React from "react";

 import { cn } from "@/lib/utils";
@@ -35,7 +35,7 @@ const RadioGroupItem = React.forwardRef<
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+        <CircleIcon className="size-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  );
@@ -59,11 +59,11 @@ const RadioGroupItemButton = React.forwardRef<
      <div className="flex aspect-square h-4 w-4 items-center justify-center rounded-full border text-inverted ring-offset-background transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 group-hover:border-foreground/25 group-data-[state=checked]:border-inverted">
        {/* Show on checked */}
        <RadioGroupPrimitive.Indicator className="flex items-center justify-center rounded-full transition-all">
-          <Circle className="h-2 w-2 fill-current text-current" />
+          <CircleIcon className="size-2 fill-current text-current" />
        </RadioGroupPrimitive.Indicator>
        {/* Show on hover */}
        <div className="hidden items-center justify-center rounded-full text-foreground/25 transition-all group-hover:flex group-data-[state=checked]:hidden">
-          <Circle className="h-2 w-2 fill-current text-current" />
+          <CircleIcon className="size-2 fill-current text-current" />
        </div>
      </div>
      <Label className="cursor-pointer">{props.children}</Label>
@@ -1,7 +1,7 @@
 "use client";

 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import * as React from "react";

 import { cn } from "@/lib/utils";
@@ -28,7 +28,7 @@ const SelectTrigger = React.forwardRef<
  >
    {children}
    <SelectPrimitive.Icon asChild>
-      <ChevronDown className={cn("h-4 w-4 opacity-50", chevronClassName)} />
+      <ChevronDownIcon className={cn("h-4 w-4 opacity-50", chevronClassName)} />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
 ));
@@ -127,7 +127,7 @@ const SelectItem = React.forwardRef<
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <CheckIcon className="size-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

@@ -2,7 +2,7 @@

 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { type VariantProps, cva } from "class-variance-authority";
-import { X } from "lucide-react";
+import { XIcon } from "lucide-react";
 import * as React from "react";

 import { cn } from "@/lib/utils";
@@ -66,7 +66,7 @@ const SheetContent = React.forwardRef<
    >
      {children}
      <SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm border-border opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
+        <XIcon className="size-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
@@ -21,7 +21,7 @@ import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
+import { PanelLeftIcon } from "lucide-react";
 import * as React from "react";

 const SIDEBAR_COOKIE_NAME = "sidebar_state";
@@ -288,7 +288,7 @@ const SidebarTrigger = React.forwardRef<
      }}
      {...props}
    >
-      <PanelLeft />
+      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  );
@@ -10,7 +10,7 @@ import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";

 export type TabLink = {
-  name: string;
+  name: React.ReactNode;
  href: string;
  isActive: boolean;
  isDisabled?: boolean;
@@ -43,7 +43,7 @@ export function TabLinks(props: {
            return (
              <Button
                asChild
-                key={tab.name}
+                key={tab.href}
                disabled={tab.isDisabled}
                variant="ghost"
              >
@@ -206,7 +206,7 @@ function useUnderline<El extends HTMLElement>() {

 export function TabPathLinks(props: {
  links: {
-    name: string;
+    name: React.ReactNode;
    path: string;
    exactMatch?: boolean;
    isDisabled?: boolean;
@@ -0,0 +1,23 @@
+import { cn } from "../../lib/utils";
+
+export function TextShimmer(props: {
+  text: string;
+  className?: string;
+}) {
+  return (
+    <div className="flex">
+      <p
+        className={cn(
+          "animate-text-shimmer bg-[length:200%_50%] bg-clip-text text-transparent will-change-auto",
+          props.className,
+        )}
+        style={{
+          backgroundImage:
+            "linear-gradient(70deg, hsl(var(--muted-foreground)/50%) 50%, hsl(var(--foreground)) 70%, hsl(var(--muted-foreground)/50%) 100%)",
+        }}
+      >
+        {props.text}
+      </p>
+    </div>
+  );
+}
@@ -9,6 +9,12 @@ export const NEXT_PUBLIC_NEBULA_APP_CLIENT_ID =

 export const NEBULA_APP_SECRET_KEY = process.env.NEBULA_APP_SECRET_KEY || "";

+export const THIRDWEB_VAULT_URL =
+  process.env.NEXT_PUBLIC_THIRDWEB_VAULT_URL || "";
+
+export const THIRDWEB_ENGINE_CLOUD_URL =
+  process.env.NEXT_PUBLIC_ENGINE_CLOUD_URL || "";
+
 export const THIRDWEB_API_SECRET = process.env.API_SERVER_SECRET || "";

 export const IPFS_GATEWAY_URL =
@@ -0,0 +1,55 @@
+import { differenceInCalendarDays } from "date-fns";
+import {
+  type DurationId,
+  type Range,
+  getLastNDaysRange,
+} from "../../components/analytics/date-range-selector";
+
+export function normalizeTime(date: Date) {
+  const newDate = new Date(date);
+  newDate.setHours(1, 0, 0, 0);
+  return newDate;
+}
+
+export function normalizeTimeISOString(date: Date) {
+  return normalizeTime(date).toISOString();
+}
+
+export function getFiltersFromSearchParams(params: {
+  from: string | undefined | string[];
+  to: string | undefined | string[];
+  interval: string | undefined | string[];
+  defaultRange: DurationId;
+}) {
+  const fromStr = params.from;
+  const toStr = params.to;
+  const defaultRange = getLastNDaysRange(params.defaultRange);
+
+  const range: Range =
+    fromStr && toStr && typeof fromStr === "string" && typeof toStr === "string"
+      ? {
+          from: normalizeTime(new Date(fromStr)),
+          to: normalizeTime(new Date(toStr)),
+          type: "custom",
+        }
+      : {
+          from: normalizeTime(defaultRange.from),
+          to: normalizeTime(defaultRange.to),
+          type: defaultRange.type,
+        };
+
+  const defaultInterval =
+    differenceInCalendarDays(range.to, range.from) > 30
+      ? "week"
+      : ("day" as const);
+
+  return {
+    range,
+    interval:
+      params.interval === "day"
+        ? ("day" as const)
+        : params.interval === "week"
+          ? ("week" as const)
+          : defaultInterval,
+  };
+}
@@ -7,12 +7,12 @@ import {
  useQuery,
  useQueryClient,
 } from "@tanstack/react-query";
-import type { ResultItem } from "app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes";
 import type { EngineBackendWalletType } from "lib/engine";
 import { useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import type { EngineStatus } from "../../../app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table";
+import type { ResultItem } from "../../../app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/StatusCodes";
+import type { EngineStatus } from "../../../app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table";
 import { engineKeys } from "../cache-keys";

 // Engine instances
@@ -1641,7 +1641,11 @@ interface EngineResourceMetrics {
  };
 }

-export function useEngineSystemMetrics(engineId: string, teamIdOrSlug: string) {
+export function useEngineSystemMetrics(
+  engineId: string,
+  teamIdOrSlug: string,
+  projectSlug: string,
+) {
  const [enabled, setEnabled] = useState(true);

  return useQuery({
@@ -1649,7 +1653,7 @@ export function useEngineSystemMetrics(engineId: string, teamIdOrSlug: string) {
    queryFn: async () => {
      const res = await apiServerProxy({
        method: "GET",
-        pathname: `/v1/teams/${teamIdOrSlug}/engine/${engineId}/metrics`,
+        pathname: `/v1/teams/${teamIdOrSlug}/${projectSlug}/engine/dedicated/${engineId}/metrics`,
      });

      if (!res.ok) {
@@ -1,6 +1,6 @@
 "use client";
 import { useTrack } from "hooks/analytics/useTrack";
-import { FileText } from "lucide-react";
+import { FileTextIcon } from "lucide-react";
 import Link from "next/link";
 import type { ChainMetadata } from "thirdweb/chains";
 import { SectionTitle } from "../server/SectionTitle";
@@ -14,7 +14,7 @@ export default function NextSteps(props: { chain: ChainMetadata }) {
      <SectionTitle title="Next Steps" />
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
        <div className="relative flex gap-3 rounded-lg border bg-card p-4 pr-8 transition-colors hover:border-active-border">
-          <FileText className="mt-0.5 size-5 shrink-0" />
+          <FileTextIcon className="mt-0.5 size-5 shrink-0" />
          <div>
            <h3 className="mb-1.5 font-medium">
              <Link
@@ -5,7 +5,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { DASHBOARD_THIRDWEB_CLIENT_ID, isProd } from "@/constants/env";
 import { useQuery } from "@tanstack/react-query";
-import { CircleCheck, XIcon } from "lucide-react";
+import { CircleCheckIcon, XIcon } from "lucide-react";
 import { hostnameEndsWith } from "utils/url";
 import { PrimaryInfoItem } from "../server/primary-info-item";

@@ -67,7 +67,7 @@ export function ChainLiveStats(props: { rpc: string }) {
        titleIcon={
          stats.isSuccess ? (
            <ToolTipLabel label="Working">
-              <CircleCheck className="size-4 text-success-text" />
+              <CircleCheckIcon className="size-4 text-success-text" />
            </ToolTipLabel>
          ) : stats.isError ? (
            <ToolTipLabel label="Not Working">
@@ -13,11 +13,11 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { ChevronDownIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { getThirdwebClient } from "../../../../../../@/constants/thirdweb.server";
 import { mapV4ChainToV5Chain } from "../../../../../../contexts/map-chains";
 import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
 import {
@@ -100,10 +100,10 @@ The following is the user's message:
  return (
    <>
      <NebulaChatButton
+        isLoggedIn={!!authToken}
        networks={chain.testnet ? "testnet" : "mainnet"}
        isFloating={true}
        pageType="chain"
-        authToken={authToken ?? undefined}
        label="Ask AI about this chain"
        client={client}
        nebulaParams={{
@@ -345,7 +345,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
            const promise = sendAndConfirmTx.mutateAsync(approveTx);
            toast.promise(promise, {
              loading: "Approving NFT for listing",
-              success: "NFT approved succesfully",
+              success: "NFT approved successfully",
              error: "Failed to approve NFT",
            });
            await promise;
@@ -1,11 +1,9 @@
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { cookies } from "next/headers";
-import { TW_LOCAL_CHAIN_STORE } from "stores/storageKeys";
 import { getAddress, getContract, isAddress } from "thirdweb";
-import type { ChainMetadata } from "thirdweb/chains";
-import { fetchChain } from "utils/fetchChain";
 import { LAST_USED_TEAM_ID } from "../../../../../../../constants/cookies";
+import { fetchChainWithLocalOverrides } from "../../../../../../../utils/fetchChainWithLocalOverrides";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";

 export async function getContractPageParamsInfo(params: {
@@ -14,29 +12,7 @@ export async function getContractPageParamsInfo(params: {
 }) {
  const contractAddress = getCheckSummedAddress(params.contractAddress);
  const chainSlugOrId = params.chain_id;
-  let chainMetadata = await fetchChain(chainSlugOrId).catch(() => null);
-
-  const cookieStore = await cookies();
-  const localChainStoreValue = cookieStore.get(TW_LOCAL_CHAIN_STORE)?.value;
-
-  if (localChainStoreValue) {
-    try {
-      const chains = JSON.parse(decodeURIComponent(localChainStoreValue));
-      if (typeof chains === "object" && Array.isArray(chains)) {
-        const chainOverrides = chains as ChainMetadata[];
-        const chain = chainOverrides.find(
-          (c) =>
-            c.slug === chainSlugOrId ||
-            c.chainId === Number.parseInt(chainSlugOrId),
-        );
-        if (chain) {
-          chainMetadata = chain;
-        }
-      }
-    } catch {
-      // noop
-    }
-  }
+  const chainMetadata = await fetchChainWithLocalOverrides(chainSlugOrId);

  if (!chainMetadata) {
    return undefined;
@@ -10,7 +10,6 @@ import { isAddress, isContractDeployed } from "thirdweb/utils";
 import { shortenIfAddress } from "utils/usedapp-external";
 import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
 import {
-  getAuthToken,
  getAuthTokenWalletAddress,
  getUserThirdwebClient,
 } from "../../../../api/lib/getAuthToken";
@@ -47,10 +46,7 @@ export default async function Layout(props: {
    notFound();
  }

-  const [authToken, accountAddress] = await Promise.all([
-    getAuthToken(),
-    getAuthTokenWalletAddress(),
-  ]);
+  const accountAddress = await getAuthTokenWalletAddress();

  const client = await getUserThirdwebClient();
  const teamsAndProjects = await getTeamsAndProjectsIfLoggedIn();
@@ -115,10 +111,10 @@ The following is the user's message:`;
      client={client}
    >
      <NebulaChatButton
+        isLoggedIn={!!accountAddress}
        networks={info.chainMetadata.testnet ? "testnet" : "mainnet"}
        isFloating={true}
        pageType="contract"
-        authToken={authToken ?? undefined}
        label="Ask AI about this contract"
        client={client}
        nebulaParams={{
@@ -2,7 +2,7 @@

 import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Alert, AlertTitle } from "@/components/ui/alert";
-import { CircleSlash } from "lucide-react";
+import { CircleSlashIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb/contract";
 import type { Account } from "thirdweb/wallets";
 import { ModuleCard } from "./module-card";
@@ -37,7 +37,7 @@ export const InstalledModulesTable = (props: {
        {sectionTitle}
        <Alert variant="destructive">
          <div className="flex items-center gap-3">
-            <CircleSlash className="size-6 text-red-400" />
+            <CircleSlashIcon className="size-6 text-red-400" />
            <AlertTitle className="mb-0">No modules installed</AlertTitle>
          </div>
        </Alert>
@@ -3,7 +3,7 @@
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { CircleCheck, Upload } from "lucide-react";
+import { CircleCheckIcon, UploadIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction, useState } from "react";
 import { useForm } from "react-hook-form";
 import type { ThirdwebContract } from "thirdweb";
@@ -108,13 +108,13 @@ export const TokenAirdropForm: React.FC<TokenAirdropFormProps> = ({
                  colorScheme="primary"
                  borderRadius="md"
                  onClick={() => setAirdropFormOpen(true)}
-                  rightIcon={<Upload size={16} />}
+                  rightIcon={<UploadIcon className="size-4" />}
                >
                  Upload addresses
                </Button>
                {addresses.length > 0 && (
                  <div className="flex flex-row items-center justify-center gap-2 text-green-500">
-                    <CircleCheck className="text-green-500" size={16} />
+                    <CircleCheckIcon className="text-green-500" size={16} />
                    <Text size="body.sm" color="inherit">
                      <strong>{addresses.length} addresses</strong> ready to be
                      airdropped
@@ -12,7 +12,7 @@ import {
 import { FormControl, Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
-import { Flame } from "lucide-react";
+import { FlameIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -66,7 +66,7 @@ export const TokenBurnButton: React.FC<TokenBurnButtonProps> = ({
          disabled={!hasBalance}
          className="gap-2"
        >
-          <Flame size={16} /> Burn
+          <FlameIcon className="size-4" /> Burn
        </Button>
      </SheetTrigger>
      <SheetContent>
@@ -11,7 +11,7 @@ import {
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Separator } from "@/components/ui/separator";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { ChevronDownIcon, Filter, XIcon } from "lucide-react";
+import { ChevronDownIcon, FilterIcon, XIcon } from "lucide-react";
 import { usePathname, useSearchParams } from "next/navigation";
 import type React from "react";
 import { type PropsWithChildren, useCallback, useMemo } from "react";
@@ -32,7 +32,7 @@ export function AllFilters(props: { hideChainType?: boolean }) {
          variant="outline"
          className="h-10 w-auto gap-2 p-2 lg:h-10 lg:border-0 lg:px-4 lg:py-2"
        >
-          <Filter strokeWidth={1} className="lg:size-4" />
+          <FilterIcon strokeWidth={1} className="lg:size-4" />
          <span className="hidden lg:inline">All Filters</span>
        </Button>
      </PopoverTrigger>
@@ -6,7 +6,7 @@ import { Button, type ButtonProps } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Star } from "lucide-react";
+import { StarIcon } from "lucide-react";
 import { useActiveAccount } from "thirdweb/react";

 async function favoriteChains() {
@@ -104,7 +104,7 @@ export function StarButton(props: {
        {mutation.isPending ? (
          <Spinner className={cn("size-6", props.iconClassName)} />
        ) : (
-          <Star
+          <StarIcon
            className={cn(
              "size-6 text-foreground transition-all",
              props.iconClassName,
@@ -578,6 +578,30 @@ const chainMetaRecord = {
      buttonText: "Learn more",
    },
  },
+  //Plume Mainnet
+  98866: {
+    headerImgUrl: plumeBanner.src,
+    about:
+      "Plume Network is the first full-stack L1 RWA Chain and ecosystem purpose-built for RWAfi, enabling the rapid adoption and demand-driven integration of real world assets. With 180+ projects building on the network, Plume offers a composable, EVM-compatible environment for onboarding and managing diverse real world assets. Coupled with an end-to-end tokenization engine and a network of financial infrastructure partners, Plume simplifies asset onboarding and enables seamless DeFi integration for RWAs so anyone can tokenize real world assets, distribute them globally, and make them useful for native crypto users.",
+    cta: {
+      backgroundImageUrl: plumeCTA.src,
+      title: "Bringing the Real World Onchain",
+      buttonLink: "https://miles.plumenetwork.xyz/",
+      buttonText: "Learn more",
+    },
+  },
+  //Plume Mainnet
+  98867: {
+    headerImgUrl: plumeBanner.src,
+    about:
+      "Plume Network is the first full-stack L1 RWA Chain and ecosystem purpose-built for RWAfi, enabling the rapid adoption and demand-driven integration of real world assets. With 180+ projects building on the network, Plume offers a composable, EVM-compatible environment for onboarding and managing diverse real world assets. Coupled with an end-to-end tokenization engine and a network of financial infrastructure partners, Plume simplifies asset onboarding and enables seamless DeFi integration for RWAs so anyone can tokenize real world assets, distribute them globally, and make them useful for native crypto users.",
+    cta: {
+      backgroundImageUrl: plumeCTA.src,
+      title: "Bringing the Real World Onchain",
+      buttonLink: "https://miles.plumenetwork.xyz/",
+      buttonText: "Learn more",
+    },
+  },
  //Rivalz Mainnet
  753: {
    headerImgUrl: rivalzBanner.src,
@@ -158,10 +158,10 @@ export default async function SupportPage() {
            </p>
            <div className="mt-6 flex w-full flex-col items-center gap-3">
              <NebulaChatButton
+                isLoggedIn={!!accountAddress}
                networks="all"
                isFloating={false}
                pageType="support"
-                authToken={authToken ?? undefined}
                label="Ask Nebula AI for support"
                client={client}
                nebulaParams={{
@@ -11,7 +11,7 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import type { Abi, AbiFunction } from "abitype";
 import { useV5DashboardChain } from "lib/v5-adapter";
-import { ArrowDown, WalletIcon } from "lucide-react";
+import { ArrowDownIcon, WalletIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import {
@@ -207,7 +207,7 @@ ${Object.keys(populatedTransaction)
        </Card>

        <div className="flex justify-center">
-          <ArrowDown />
+          <ArrowDownIcon className="size-4" />
        </div>

        <Card className="flex flex-col gap-4 p-4">
@@ -273,7 +273,7 @@ ${Object.keys(populatedTransaction)
      {state.message && (
        <>
          <div className="flex justify-center">
-            <ArrowDown />
+            <ArrowDownIcon className="size-4" />
          </div>
          <Card className="max-w-[800px] p-4">
            <p className="overflow-auto whitespace-pre-wrap font-mono text-sm">
@@ -1,4 +1,4 @@
-import { fetchChain } from "utils/fetchChain";
+import { fetchChainWithLocalOverrides } from "../../../../../utils/fetchChainWithLocalOverrides";
 import {
  type ProjectContract,
  getProjectContracts,
@@ -19,7 +19,9 @@ export async function getSortedDeployedContracts(params: {
  const chainIds = Array.from(new Set(contracts.map((c) => c.chainId)));
  const chains = (
    await Promise.allSettled(
-      chainIds.map((chainId) => fetchChain(chainId.toString())),
+      chainIds.map((chainId) =>
+        fetchChainWithLocalOverrides(chainId.toString()),
+      ),
    )
  )
    .filter((c) => c.status === "fulfilled")
@@ -10,7 +10,7 @@ import {
 import { cn } from "@/lib/utils";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useEns } from "components/contract-components/hooks";
-import { LogOutIcon, Moon, Sun } from "lucide-react";
+import { LogOutIcon, MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { useState } from "react";
@@ -107,13 +107,13 @@ export function AccountButton(props: {
            <p className="text-sm">Theme</p>

            <div className="ml-auto flex items-center gap-2 rounded-lg border border-border px-3 py-1.5 text-foreground">
-              <Sun
+              <SunIcon
                className={cn(
                  "size-4",
                  theme === "light" ? "opacity-100" : "opacity-30",
                )}
              />
-              <Moon
+              <MoonIcon
                className={cn(
                  "size-4",
                  theme === "dark" ? "opacity-100" : "opacity-30",
@@ -8,8 +8,8 @@ import { useEns } from "components/contract-components/hooks";
 import {
  LogOutIcon,
  MenuIcon,
-  Moon,
-  Sun,
+  MoonIcon,
+  SunIcon,
  UserRoundIcon,
  WalletIcon,
  XIcon,
@@ -213,7 +213,7 @@ export function MobileBurgerMenuButton(
            >
              <span className="text-base text-muted-foreground">Theme</span>
              <div className="ml-auto flex items-center gap-2 rounded-lg border px-2 py-1">
-                <Sun
+                <SunIcon
                  className={cn(
                    "size-4",
                    theme === "light"
@@ -221,7 +221,7 @@ export function MobileBurgerMenuButton(
                      : "text-muted-foreground",
                  )}
                />
-                <Moon
+                <MoonIcon
                  className={cn(
                    "size-4",
                    theme === "dark"
@@ -20,7 +20,12 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { useDebounce } from "use-debounce";
 import { z } from "zod";
-import { teamSlugRegex } from "../../../team/[team_slug]/(team)/~/settings/general/common";
+import {
+  maxTeamNameLength,
+  maxTeamSlugLength,
+  teamNameSchema,
+  teamSlugSchema,
+} from "../../../team/[team_slug]/(team)/~/settings/general/common";

 type TeamData = {
  name?: string;
@@ -28,27 +33,8 @@ type TeamData = {
  image?: File;
 };

-const teamSlugSchema = z
-  .string()
-  .min(3, {
-    message: "URL must be at least 3 characters",
-  })
-  .max(48, {
-    message: "URL must be at most 48 characters",
-  })
-  .refine((slug) => !teamSlugRegex.test(slug), {
-    message: "URL can only contain lowercase letters, numbers and hyphens",
-  });
-
 const formSchema = z.object({
-  name: z
-    .string()
-    .min(3, {
-      message: "Name must be at least 3 characters",
-    })
-    .max(32, {
-      message: "Name must be at most 32 characters",
-    }),
+  name: teamNameSchema,
  slug: teamSlugSchema,
  image: z.instanceof(File).optional(),
 });
@@ -155,8 +141,6 @@ export function TeamInfoFormUI(props: {
    });
  }

-  const maxTeamNameLength = 32;
-
  return (
    <div className="rounded-lg border bg-card ">
      <Form {...form}>
@@ -234,6 +218,7 @@ export function TeamInfoFormUI(props: {
                        }}
                        className="truncate border-0 font-mono"
                        placeholder="my-team"
+                        maxLength={maxTeamSlugLength}
                      />
                      {(isCheckingSlug || isCalculatingSlug) && (
                        <div className="-translate-y-1/2 fade-in-0 absolute top-1/2 right-3 duration-300">
@@ -10,7 +10,7 @@ import {
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { PROJECT_SHOWCASE_DATA } from "lib/project-showcase-constants";
-import { ExternalLink, FileText } from "lucide-react";
+import { ExternalLinkIcon, FileTextIcon } from "lucide-react";
 import Link from "next/link";

 export default async function DetailPage(props: {
@@ -52,7 +52,7 @@ export default async function DetailPage(props: {
                  target="_blank"
                  rel="noopener noreferrer"
                >
-                  <ExternalLink className="mr-2 h-4 w-4" />
+                  <ExternalLinkIcon className="mr-2 h-4 w-4" />
                  Visit Project Website
                </Link>
              </Button>
@@ -63,7 +63,7 @@ export default async function DetailPage(props: {
                    target="_blank"
                    rel="noopener noreferrer"
                  >
-                    <FileText className="mr-2 h-4 w-4" />
+                    <FileTextIcon className="mr-2 h-4 w-4" />
                    Link to Case Study
                  </Link>
                </Button>
@@ -23,7 +23,7 @@ import {
  PROJECT_SHOWCASE_ITEMS_PER_PAGE,
 } from "lib/project-showcase-constants";
 import { getAbsoluteUrl } from "lib/vercel-utils";
-import { FileText } from "lucide-react";
+import { FileTextIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
@@ -171,7 +171,7 @@ export default async function ProjectShowcasePage(props: {
                          // onClick={(e) => e.stopPropagation()}
                        >
                          <Button variant="outline" size="sm">
-                            <FileText className="mr-2 h-4 w-4" /> Case Study
+                            <FileTextIcon className="mr-2 h-4 w-4" /> Case Study
                          </Button>
                        </Link>
                      )}
@@ -74,10 +74,6 @@ export default async function TeamLayout(props: {
              path: `/team/${params.team_slug}/~/analytics`,
              name: "Analytics",
            },
-            {
-              path: `/team/${params.team_slug}/~/engine`,
-              name: "Engines",
-            },
            {
              path: `/team/${params.team_slug}/~/ecosystem`,
              name: "Ecosystems",
--- a/Show More
+++ b/Show More