Version Packages (#6644)

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

.github/workflows/CI.yml

@@ -60,7 +60,7 @@ jobs:
         uses: ./.github/composite-actions/install
 
       - name: Setup Biome
-        uses: biomejs/setup-biome@c016c38f26f2c4a6eb3662679143614a254263fd # v2.3.0
+        uses: biomejs/setup-biome@f382a98e582959e6aaac8e5f8b17b31749018780 # v2.5.0
         with:
           version: latest  
 

.github/workflows/typedoc.yml

@@ -28,23 +28,3 @@ jobs:
 
       - name: Run TypeDoc
         run: pnpm typedoc
-
-      - name: Update Gist
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
-        with:
-          github-token: ${{ secrets.GIST_TOKEN }}
-          script: |
-            const fs = require('fs');
-            const content = fs.readFileSync('./packages/thirdweb/typedoc/parsed.json', 'utf8');
-            const gistId = '678fe1f331a01270bb002fee660f285d';
-            
-            await github.rest.gists.update({
-              gist_id: gistId,
-              files: {
-                'data.json': {
-                  content: content
-                }
-              }
-            });
-          
-            console.log(`Permalink: https://gist.githubusercontent.com/raw/${gistId}/data.json`);

apps/dashboard/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import "@/styles/globals.css";
+import "../src/global.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MoonIcon, SunIcon } from "lucide-react";
 import { ThemeProvider, useTheme } from "next-themes";
@@ -81,23 +81,18 @@ function StoryLayout(props: {
   return (
     <QueryClientProvider client={queryClient}>
       <div className="flex min-h-dvh min-w-0 flex-col bg-background text-foreground">
-        <div className="flex justify-end gap-2 border-b p-4">
+        <div className="fixed right-0 bottom-0 z-50 flex justify-end gap-2 p-4">
           <Button
-            onClick={() => setTheme("dark")}
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
             size="sm"
-            variant={theme === "dark" ? "default" : "outline"}
+            variant="outline"
             className="h-auto w-auto shrink-0 rounded-full p-2"
           >
-            <MoonIcon className="size-4" />
-          </Button>
-
-          <Button
-            onClick={() => setTheme("light")}
-            size="sm"
-            variant={theme === "light" ? "default" : "outline"}
-            className="h-auto w-auto shrink-0 rounded-full p-2"
-          >
-            <SunIcon className="size-4" />
+            {theme === "dark" ? (
+              <MoonIcon className="size-4" />
+            ) : (
+              <SunIcon className="size-4" />
+            )}
           </Button>
         </div>
 

apps/dashboard/framer-rewrites.js

@@ -49,12 +49,13 @@ module.exports = [
   "/templates/:template_slug",
   // -- learn --
   "/learn",
-  "/learn/tutorials",
-  "/learn/tutorials/:tutorial_slug",
   "/learn/guides",
   "/learn/guides/:guide_slug",
   "/learn/courses",
   "/learn/glossary",
+  "/learn/glossary/:glossary_slug",
   // -- faucets --
   "/faucets",
+  // -- brand kit --
+  "/brand-kit",
 ];

apps/dashboard/package.json

@@ -68,7 +68,7 @@
     "ioredis": "^5.6.0",
     "ipaddr.js": "^2.2.0",
     "lucide-react": "0.483.0",
-    "next": "15.2.2",
+    "next": "15.2.4",
     "next-plausible": "^3.12.4",
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
@@ -106,8 +106,8 @@
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
     "@chromatic-com/storybook": "3.2.6",
-    "@next/bundle-analyzer": "15.2.2",
-    "@next/eslint-plugin-next": "15.2.2",
+    "@next/bundle-analyzer": "15.2.4",
+    "@next/eslint-plugin-next": "15.2.4",
     "@playwright/test": "1.51.1",
     "@storybook/addon-essentials": "8.6.4",
     "@storybook/addon-interactions": "8.6.4",
@@ -135,7 +135,7 @@
     "eslint": "8.57.0",
     "eslint-config-biome": "1.9.4",
     "eslint-plugin-react-compiler": "19.0.0-beta-40c6c23-20250301",
-    "eslint-plugin-storybook": "0.11.6",
+    "eslint-plugin-storybook": "0.12.0",
     "knip": "5.46.0",
     "next-sitemap": "^4.2.3",
     "postcss": "8.5.3",

apps/dashboard/redirects.js

@@ -361,6 +361,19 @@ async function redirects() {
         "/team/:team_slug/:project_slug/connect/universal-bridge/:path*",
       permanent: false,
     },
+
+    // all /learn/tutorials (and sub-routes) -> /learn/guides
+    {
+      source: "/learn/tutorials/:path*",
+      destination: "/learn/guides/:path*",
+      permanent: false,
+    },
+    {
+      source: "/learn/tutorials",
+      destination: "/learn/guides",
+      permanent: false,
+    },
+
     ...legacyDashboardToTeamRedirects,
   ];
 }

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

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

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

@@ -270,9 +270,10 @@ type ActiveStatus = {
   ecosystemWallet: boolean;
 };
 
-export async function isProjectActive(
-  params: AnalyticsQueryParams,
-): Promise<ActiveStatus> {
+export async function isProjectActive(params: {
+  teamId: string;
+  projectId: string;
+}): Promise<ActiveStatus> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
     `v2/active-usage?${searchParams.toString()}`,

apps/dashboard/src/@/components/blocks/Avatars/GradientAvatar.stories.tsx

@@ -8,13 +8,12 @@ import { GradientAvatar } from "./GradientAvatar";
 const meta = {
   title: "blocks/Avatars/GradientAvatar",
   component: Story,
-  parameters: {},
 } satisfies Meta<typeof Story>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
@@ -22,14 +21,14 @@ const client = getThirdwebClient();
 
 function Story() {
   return (
-    <div className="flex flex-col gap-10 p-10">
-      <p> All images below are set with size-6 className </p>
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
+      <p> All images below are set with size-20 className </p>
 
       <BadgeContainer label="No Src, No id - Skeleton">
         <GradientAvatar
           id={undefined}
           src={undefined}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -38,7 +37,7 @@ function Story() {
         <GradientAvatar
           id={"foo"}
           src={undefined}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -47,7 +46,7 @@ function Story() {
         <GradientAvatar
           id={"foo"}
           src={""}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -56,7 +55,7 @@ function Story() {
         <GradientAvatar
           id={"bar"}
           src={""}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -65,7 +64,7 @@ function Story() {
         <GradientAvatar
           src="invalid-src"
           id={undefined}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -74,7 +73,7 @@ function Story() {
         <GradientAvatar
           src="https://picsum.photos/200/300"
           id={undefined}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -83,7 +82,7 @@ function Story() {
         <GradientAvatar
           src="ipfs://QmZbeJYEs7kCJHyQxjxU2SJUtjSAr4m87wzJFJUyWomKdj/Smily.svg"
           id={undefined}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -123,14 +122,14 @@ function ToggleTest() {
         <GradientAvatar
           src={data?.src}
           id={data?.id}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
 
       <BadgeContainer label="invalid Src">
         <GradientAvatar
-          className="size-6"
+          className="size-20"
           src={data ? "invalid-src" : undefined}
           id={undefined}
           client={client}

apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
@@ -22,7 +22,7 @@ const client = getThirdwebClient();
 
 function Story() {
   return (
-    <div className="flex flex-col gap-10 p-10">
+    <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">

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { DangerSettingCard } from "./DangerSettingCard";
 
 const meta = {
@@ -15,17 +15,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
     <div className="container flex max-w-[1000px] flex-col gap-8 py-10">

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

@@ -9,13 +9,12 @@ import { Img } from "./Img";
 const meta = {
   title: "blocks/Img",
   component: Story,
-  parameters: {},
 } satisfies Meta<typeof Story>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 

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

@@ -19,30 +19,7 @@ export function MobileSidebar(props: {
   triggerClassName?: string;
 }) {
   const [isOpen, setIsOpen] = useState(false);
-  const pathname = usePathname();
-
-  const activeLink = useMemo(() => {
-    function isActive(link: SidebarBaseLink) {
-      if (link.exactMatch) {
-        return link.href === pathname;
-      }
-      return pathname?.startsWith(link.href);
-    }
-
-    for (const link of props.links) {
-      if ("group" in link) {
-        for (const subLink of link.links) {
-          if (isActive(subLink)) {
-            return subLink;
-          }
-        }
-      } else {
-        if (isActive(link)) {
-          return link;
-        }
-      }
-    }
-  }, [props.links, pathname]);
+  const activeLink = useActiveSidebarLink(props.links);
 
   const defaultTrigger = (
     <Button
@@ -75,3 +52,32 @@ export function MobileSidebar(props: {
     </Dialog>
   );
 }
+
+export function useActiveSidebarLink(links: SidebarLink[]) {
+  const pathname = usePathname();
+
+  const activeLink = useMemo(() => {
+    function isActive(link: SidebarBaseLink) {
+      if (link.exactMatch) {
+        return link.href === pathname;
+      }
+      return pathname?.startsWith(link.href);
+    }
+
+    for (const link of links) {
+      if ("group" in link) {
+        for (const subLink of link.links) {
+          if (isActive(subLink)) {
+            return subLink;
+          }
+        }
+      } else if ("href" in link) {
+        if (isActive(link)) {
+          return link;
+        }
+      }
+    }
+  }, [links, pathname]);
+
+  return activeLink;
+}

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { MultiNetworkSelector } from "./NetworkSelectors";
 
 const meta = {
@@ -16,20 +16,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
-    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+    <div className="container flex max-w-6xl flex-col gap-8 py-10">
       <Variant label="No Chains selected by default" selectedChainIds={[]} />
       <Variant
         label="Polygon, Ethereum selected by default"

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

@@ -18,17 +18,39 @@ export function MultiNetworkSelector(props: {
   onChange: (chainIds: number[]) => void;
   disableChainId?: boolean;
   className?: string;
+  priorityChains?: number[];
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
   const options = useMemo(() => {
-    return allChains.map((chain) => {
+    let sortedChains = allChains;
+
+    if (props.priorityChains) {
+      const priorityChainsSet = new Set();
+      for (const chainId of props.priorityChains || []) {
+        priorityChainsSet.add(chainId);
+      }
+
+      const priorityChains = (props.priorityChains || [])
+        .map((chainId) => {
+          return idToChain.get(chainId);
+        })
+        .filter((v) => !!v);
+
+      const otherChains = allChains.filter(
+        (chain) => !priorityChainsSet.has(chain.chainId),
+      );
+
+      sortedChains = [...priorityChains, ...otherChains];
+    }
+
+    return sortedChains.map((chain) => {
       return {
         label: cleanChainName(chain.name),
         value: String(chain.chainId),
       };
     });
-  }, [allChains]);
+  }, [allChains, props.priorityChains, idToChain]);
 
   const searchFn = useCallback(
     (option: Option, searchValue: string) => {

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { SettingsCard } from "./SettingsCard";
 
 const meta = {
@@ -15,139 +15,130 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
-    <div className="min-h-dvh bg-background py-6 text-foreground">
-      <div className="container flex max-w-[1100px] flex-col gap-10 lg:p-10">
-        <BadgeContainer label="No Header">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={undefined}
-            errorText={undefined}
-            noPermissionText={undefined}
-            saveButton={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
+      <BadgeContainer label="No Header">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={undefined}
+          errorText={undefined}
+          noPermissionText={undefined}
+          saveButton={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="Header">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            errorText={undefined}
-            noPermissionText={undefined}
-            saveButton={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Header">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          errorText={undefined}
+          noPermissionText={undefined}
+          saveButton={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="Error">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            errorText="This is error text"
-            noPermissionText={undefined}
-            saveButton={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Error">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          errorText="This is error text"
+          noPermissionText={undefined}
+          saveButton={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="No Permission">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: false,
-              isPending: false,
-              onClick: () => {},
-            }}
-            noPermissionText="You do not have permission to edit this"
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="No Permission">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: false,
+            isPending: false,
+            onClick: () => {},
+          }}
+          noPermissionText="You do not have permission to edit this"
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="Save">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: false,
-              isPending: false,
-              onClick: () => {},
-            }}
-            noPermissionText={undefined}
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Save">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: false,
+            isPending: false,
+            onClick: () => {},
+          }}
+          noPermissionText={undefined}
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="Save Disabled">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: true,
-              isPending: false,
-              onClick: () => {},
-            }}
-            noPermissionText={undefined}
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Save Disabled">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: true,
+            isPending: false,
+            onClick: () => {},
+          }}
+          noPermissionText={undefined}
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="Save Loading">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: false,
-              isPending: true,
-              onClick: () => {},
-            }}
-            noPermissionText={undefined}
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
-      </div>
+      <BadgeContainer label="Save Loading">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: false,
+            isPending: true,
+            onClick: () => {},
+          }}
+          noPermissionText={undefined}
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
     </div>
   );
 }

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

@@ -2,11 +2,13 @@ import { ExternalLinkIcon } from "lucide-react";
 import type React from "react";
 import { cn } from "../../lib/utils";
 import { NavLink } from "../ui/NavLink";
+import { Separator } from "../ui/separator";
 
 export type SidebarBaseLink = {
   href: string;
   label: React.ReactNode;
   exactMatch?: boolean;
+  icon?: React.FC<{ className?: string }>;
   tracking?: {
     category: string;
     action: string;
@@ -19,6 +21,9 @@ export type SidebarLink =
   | {
       group: string;
       links: SidebarBaseLink[];
+    }
+  | {
+      separator: true;
     };
 
 type SidebarContentProps = {
@@ -27,21 +32,18 @@ type SidebarContentProps = {
   className?: string;
 };
 
-export function Sidebar(props: SidebarContentProps) {
+export function CustomSidebar(props: SidebarContentProps) {
   return (
-    <aside
-      className={cn(
-        "sticky top-0 hidden w-[230px] flex-shrink-0 self-start lg:block",
-        props.className,
-      )}
-    >
-      <div className="py-7">
-        {props.header}
-        <div className="flex flex-col gap-1">
-          <RenderSidebarLinks links={props.links} />
+    <div className={cn("hidden w-[230px] shrink-0 lg:block", props.className)}>
+      <aside className="sticky top-0 self-start">
+        <div className="py-7">
+          {props.header}
+          <div className="flex flex-col gap-1">
+            <RenderSidebarLinks links={props.links} />
+          </div>
         </div>
-      </div>
-    </aside>
+      </aside>
+    </div>
   );
 }
 
@@ -61,6 +63,10 @@ export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
           );
         }
 
+        if ("separator" in link) {
+          return <Separator className="my-2" />;
+        }
+
         const isExternal = link.href.startsWith("http");
         return (
           <NavLink
@@ -68,9 +74,10 @@ export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
             key={i}
             href={link.href}
             className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-accent"
-            activeClassName="text-foreground"
+            activeClassName="text-foreground bg-accent"
             exactMatch={link.exactMatch}
           >
+            {link.icon && <link.icon className="size-4" />}
             {link.label}
             {isExternal && <ExternalLinkIcon className="size-3" />}
           </NavLink>

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { mobileViewport } from "../../../stories/utils";
 import { SidebarLayout } from "./SidebarLayout";
 
 const meta = {
@@ -15,17 +14,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
     <SidebarLayout

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

@@ -1,6 +1,23 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar";
 import { cn } from "../../lib/utils";
-import { MobileSidebar } from "./MobileSidebar";
-import { Sidebar, type SidebarLink } from "./Sidebar";
+import { NavLink } from "../ui/NavLink";
+import { Separator } from "../ui/separator";
+import { MobileSidebar, useActiveSidebarLink } from "./MobileSidebar";
+import { CustomSidebar, type SidebarLink } from "./Sidebar";
+import { AppFooter } from "./app-footer";
 
 export function SidebarLayout(props: {
   sidebarLinks: SidebarLink[];
@@ -17,7 +34,10 @@ export function SidebarLayout(props: {
         props.className,
       )}
     >
-      <Sidebar links={sidebarLinks} className={props.desktopSidebarClassName} />
+      <CustomSidebar
+        links={sidebarLinks}
+        className={props.desktopSidebarClassName}
+      />
       <MobileSidebar
         links={sidebarLinks}
         triggerClassName={props.mobileSidebarClassName}
@@ -29,3 +49,117 @@ export function SidebarLayout(props: {
     </div>
   );
 }
+
+export function FullWidthSidebarLayout(props: {
+  contentSidebarLinks: SidebarLink[];
+  footerSidebarLinks?: SidebarLink[];
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const { contentSidebarLinks, children, footerSidebarLinks } = props;
+  return (
+    <div
+      className={cn(
+        "relative flex w-full flex-1 overflow-y-hidden",
+        props.className,
+      )}
+    >
+      {/* left - sidebar */}
+      <Sidebar collapsible="icon" side="left" className="pt-2">
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <RenderSidebarGroup
+                sidebarLinks={contentSidebarLinks}
+                groupName={undefined}
+              />
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+
+        {footerSidebarLinks && (
+          <SidebarFooter className="pb-3">
+            <RenderSidebarGroup
+              sidebarLinks={footerSidebarLinks}
+              groupName={undefined}
+            />
+          </SidebarFooter>
+        )}
+
+        <SidebarRail />
+      </Sidebar>
+
+      {/* right - content */}
+      <div className="flex h-full flex-grow flex-col overflow-y-auto">
+        <MobileSidebarTrigger
+          links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
+        />
+
+        <main className="z-0 flex min-w-0 grow flex-col max-sm:w-full">
+          {children}
+        </main>
+        <AppFooter containerClassName="max-w-7xl" />
+      </div>
+    </div>
+  );
+}
+
+function RenderSidebarGroup(props: {
+  sidebarLinks: SidebarLink[];
+  groupName: string | undefined;
+}) {
+  const { sidebarLinks } = props;
+  const sidebar = useSidebar();
+
+  return (
+    <SidebarMenu className="gap-1.5">
+      {sidebarLinks.map((link) => {
+        if ("href" in link) {
+          return (
+            <SidebarMenuItem key={link.href}>
+              <SidebarMenuButton asChild>
+                <NavLink
+                  href={link.href}
+                  className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent"
+                  activeClassName="text-foreground bg-accent"
+                  exactMatch={link.exactMatch}
+                  tracking={link.tracking}
+                  onClick={() => {
+                    sidebar.setOpenMobile(false);
+                  }}
+                >
+                  {link.icon && <link.icon className="size-4" />}
+                  <span>{link.label}</span>
+                </NavLink>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          );
+        }
+
+        if ("separator" in link) {
+          return <SidebarSeparator className="my-1" />;
+        }
+
+        return (
+          <RenderSidebarGroup
+            sidebarLinks={link.links}
+            groupName={link.group}
+            key={link.group}
+          />
+        );
+      })}
+    </SidebarMenu>
+  );
+}
+
+function MobileSidebarTrigger(props: { links: SidebarLink[] }) {
+  const activeLink = useActiveSidebarLink(props.links);
+
+  return (
+    <div className="flex items-center gap-3 border-b px-4 py-4 lg:hidden">
+      <SidebarTrigger className="size-4" />
+      <Separator orientation="vertical" className="h-4" />
+      {activeLink && <span className="text-sm">{activeLink.label}</span>}
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { SingleNetworkSelector } from "./NetworkSelectors";
 
 const meta = {
@@ -16,20 +16,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
-    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+    <div className="container flex max-w-6xl flex-col gap-8 py-10">
       <Variant label="No Chain ID selected by default" chainId={undefined} />
       <Variant label="Polygon selected by default" chainId={137} />
       <Variant

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -12,17 +12,23 @@ import Link from "next/link";
 
 type AppFooterProps = {
   className?: string;
+  containerClassName?: string;
 };
 
 export function AppFooter(props: AppFooterProps) {
   return (
     <footer
       className={cn(
-        "w-full border-border border-t bg-card py-6 md:py-8",
+        "w-full border-border border-t py-6 md:py-8",
         props.className,
       )}
     >
-      <div className="container flex flex-col gap-4 md:gap-6">
+      <div
+        className={cn(
+          "container flex flex-col gap-4 md:gap-6",
+          props.containerClassName,
+        )}
+      >
         {/* top row */}
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-row items-center gap-3">

apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx

@@ -32,6 +32,7 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
     description?: string;
     titleClassName?: string;
   };
+  customHeader?: React.ReactNode;
   // chart config
   config: TConfig;
   data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
@@ -41,7 +42,9 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   chartClassName?: string;
   isPending: boolean;
   toolTipLabelFormatter?: (label: string, payload: unknown) => React.ReactNode;
+  toolTipValueFormatter?: (value: unknown) => React.ReactNode;
   hideLabel?: boolean;
+  emptyChartState?: React.ReactElement;
 };
 
 export function ThirdwebBarChart<TConfig extends ChartConfig>(
@@ -65,12 +68,14 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
         </CardHeader>
       )}
 
+      {props.customHeader && props.customHeader}
+
       <CardContent className={cn(!props.header && "pt-6")}>
         <ChartContainer config={props.config} className={props.chartClassName}>
           {props.isPending ? (
             <LoadingChartState />
           ) : props.data.length === 0 ? (
-            <EmptyChartState />
+            <EmptyChartState>{props.emptyChartState}</EmptyChartState>
           ) : (
             <BarChart accessibilityLayer data={props.data}>
               <CartesianGrid vertical={false} />
@@ -88,6 +93,7 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
                       props.hideLabel !== undefined ? props.hideLabel : true
                     }
                     labelFormatter={props.toolTipLabelFormatter}
+                    valueFormatter={props.toolTipValueFormatter}
                   />
                 }
               />
@@ -96,25 +102,15 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
                   content={<ChartLegendContent className="pt-5" />}
                 />
               )}
-              {configKeys.map((key, idx) => (
+              {configKeys.map((key) => (
                 <Bar
                   key={key}
                   dataKey={key}
                   // if stacked then they should all be the same stackId
                   // if grouped then they should all be unique stackId (so the key works great)
                   stackId={variant === "stacked" ? "a" : key}
-                  fill={`var(--color-${key})`}
-                  // if stacked then we need to figure out the radius based on the index in the array
-                  // if grouped then we can just use the same radius for all
-                  radius={
-                    variant === "stacked"
-                      ? idx === 0
-                        ? [0, 0, 4, 4]
-                        : idx === configKeys.length - 1
-                          ? [4, 4, 0, 0]
-                          : [0, 0, 0, 0]
-                      : [4, 4, 4, 4]
-                  }
+                  fill={props.config[key]?.color}
+                  radius={[4, 4, 4, 4]}
                   strokeWidth={1}
                   className="stroke-background"
                 />

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

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/select";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { type CodeEnvironment, CodeSegment } from "./code-segment.client";
 
 const meta = {
@@ -24,17 +24,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 type Mode = "default" | "no-tabs" | "only-tabs";
 
 function Story() {

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMemo, useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { MultiSelect } from "./multi-select";
 
 const meta = {
@@ -16,17 +16,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function createList(len: number) {
   return Array.from({ length: len }, (_, i) => ({
     value: `${i}`,
@@ -36,7 +29,7 @@ function createList(len: number) {
 
 function Story() {
   return (
-    <div className="mx-auto flex w-full max-w-[600px] flex-col gap-6 px-4 py-6">
+    <div className="container flex max-w-6xl flex-col gap-6 py-10">
       <VariantTest defaultValues={[]} storyLabel="5 items" listLen={5} />
       <VariantTest defaultValues={[]} storyLabel="5000 items" listLen={5000} />
       <VariantTest

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMemo, useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { SelectWithSearch } from "./select-with-search";
 
 const meta = {
@@ -16,17 +16,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function createList(len: number) {
   return Array.from({ length: len }, (_, i) => ({
     value: `${i}`,
@@ -36,7 +29,7 @@ function createList(len: number) {
 
 function Story() {
   return (
-    <div className="mx-auto flex w-full max-w-[600px] flex-col gap-6 px-4 py-6">
+    <div className="container flex max-w-6xl flex-col gap-6 py-10">
       <VariantTest storyLabel="5 items" listLen={5} />
       <VariantTest storyLabel="5000 items" listLen={5000} />
       <VariantTest

apps/dashboard/src/@/components/pagination-buttons.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../stories/utils";
+import { BadgeContainer } from "../../stories/utils";
 import { PaginationButtons } from "./pagination-buttons";
 
 const meta = {
@@ -16,17 +16,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
     <div className="container flex max-w-[1000px] flex-col gap-8 py-10">

apps/dashboard/src/@/components/ui/NavLink.tsx

@@ -15,6 +15,7 @@ export type NavButtonProps = {
     action: string;
     label: string;
   };
+  onClick?: () => void;
 };
 
 export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
@@ -30,7 +31,9 @@ export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
       href={props.href}
       className={cn(props.className, isActive && props.activeClassName)}
       target={props.href.startsWith("http") ? "_blank" : undefined}
+      prefetch={false}
       onClick={() => {
+        props.onClick?.();
         if (props.tracking) {
           track({
             category: props.tracking.category,

apps/dashboard/src/@/components/ui/breadcrumb.tsx

@@ -96,7 +96,10 @@ const BreadcrumbEllipsis = ({
   <span
     role="presentation"
     aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn(
+      "relative flex h-9 w-9 items-center justify-center",
+      className,
+    )}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />

apps/dashboard/src/@/components/ui/button.stories.tsx

@@ -6,9 +6,6 @@ import { BadgeContainer } from "../../../stories/utils";
 const meta = {
   title: "Shadcn/Buttons",
   component: Component,
-  parameters: {
-    layout: "centered",
-  },
 } satisfies Meta<typeof Component>;
 
 export default meta;

apps/dashboard/src/@/components/ui/code/code.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { BadgeContainer } from "stories/utils";
 import { CodeClient } from "./code.client";
 
 const meta = {
@@ -11,17 +11,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const tsCode = `\
 type User = {
   name: string;
@@ -86,7 +79,7 @@ const bashCode = "pnpm i thirdweb";
 
 function Component() {
   return (
-    <div className="container flex max-w-[600px] flex-col gap-10 py-10">
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
       <BadgeContainer label="ts">
         <CodeClient code={tsCode} lang="ts" />
       </BadgeContainer>

apps/dashboard/src/@/components/ui/code/plaintext-code.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { BadgeContainer } from "stories/utils";
 import { PlainTextCodeBlock } from "./plaintext-code";
 
 const meta = {
@@ -11,17 +11,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const jsCode = `\
 import { getContract } from "thirdweb";
 import { sepolia } from "thirdweb/chains";
@@ -39,7 +32,7 @@ const overflowText =
 
 function Component() {
   return (
-    <div className="container flex max-w-[600px] flex-col gap-10 py-10">
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
       <BadgeContainer label="large chunk of code">
         <PlainTextCodeBlock code={jsCode} />
       </BadgeContainer>

apps/dashboard/src/@/components/ui/pagination.tsx

@@ -94,7 +94,10 @@ const PaginationEllipsis = ({
 }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn(
+      "relative flex h-9 w-9 items-center justify-center",
+      className,
+    )}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />

apps/dashboard/src/@/components/ui/select.stories.tsx

@@ -13,9 +13,6 @@ import { BadgeContainer } from "../../../stories/utils";
 const meta = {
   title: "Shadcn/Select",
   component: Component,
-  parameters: {
-    layout: "centered",
-  },
 } satisfies Meta<typeof Component>;
 
 export default meta;

apps/dashboard/src/@/components/ui/sidebar.tsx

@@ -0,0 +1,773 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+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 * as React from "react";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        // eslint-disable-next-line react-compiler/react-compiler
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open],
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open);
+    }, [isMobile, setOpen]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed";
+
+    const contextValue = React.useMemo<SidebarContextProps>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, toggleSidebar],
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className,
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    );
+  },
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <SheetHeader className="sr-only">
+              <SheetTitle>Sidebar</SheetTitle>
+              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            </SheetHeader>
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer relative hidden flex-shrink-0 text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+          )}
+        />
+        <div
+          className={cn(
+            "absolute inset-y-0 z-10 hidden h-full w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className,
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:-inset-2 after:absolute after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+));
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  },
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:-inset-2 after:absolute after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};

apps/dashboard/src/@/components/ui/table.stories.tsx

@@ -10,35 +10,25 @@ import {
 } from "@/components/ui/table";
 import type { Meta, StoryObj } from "@storybook/react";
 import Link from "next/link";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { cn } from "../../lib/utils";
 import { Badge } from "./badge";
 
 const meta = {
   title: "Shadcn/Table",
   component: Component,
-  parameters: {
-    layout: "centered",
-  },
 } satisfies Meta<typeof Component>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Component() {
   return (
-    <div className="flex min-w-0 flex-col gap-6 px-4 py-6 lg:mx-auto lg:max-w-[1000px]">
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
       <BadgeContainer label="Normal">
         <TableDemo />
       </BadgeContainer>

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -20,6 +20,7 @@ export function TabLinks(props: {
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;
+  scrollableClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLAnchorElement>();
@@ -30,7 +31,7 @@ export function TabLinks(props: {
       <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
 
       <ScrollShadow
-        scrollableClassName="pb-[8px] relative"
+        scrollableClassName={cn("pb-[8px] relative", props.scrollableClassName)}
         shadowColor={props.shadowColor}
       >
         <div
@@ -159,9 +160,11 @@ function useUnderline<El extends HTMLElement>() {
         const containerRect = containerRef.current.getBoundingClientRect();
         const lineEl = lineRef.current;
         const rect = activeTabEl.getBoundingClientRect();
+        const containerPaddingLeft =
+          containerRect.left - containerRef.current.offsetLeft;
         lineEl.style.width = `${rect.width}px`;
         lineEl.style.transform = `translateX(${
-          rect.left - containerRect.left
+          rect.left - containerPaddingLeft
         }px)`;
         setTimeout(() => {
           lineEl.style.transition = "transform 0.3s, width 0.3s";
@@ -205,6 +208,7 @@ export function TabPathLinks(props: {
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;
+  scrollableClassName?: string;
 }) {
   const pathname = usePathname() || "";
   const { links, ...restProps } = props;

apps/dashboard/src/@/hooks/use-mobile.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

apps/dashboard/src/@3rdweb-sdk/react/hooks/useWalletNFTs.ts

@@ -5,6 +5,7 @@ import invariant from "tiny-invariant";
 export function useWalletNFTs(params: {
   chainId: number;
   walletAddress?: string;
+  isInsightSupported: boolean;
 }) {
   return useQuery({
     queryKey: ["walletNfts", params.chainId, params.walletAddress],
@@ -13,6 +14,7 @@ export function useWalletNFTs(params: {
       return getWalletNFTs({
         chainId: params.chainId,
         owner: params.walletAddress,
+        isInsightSupported: params.isInsightSupported,
       });
     },
     enabled: !!params.walletAddress,

apps/dashboard/src/app/(dashboard)/(bridge)/routes/components/client/search.tsx

@@ -47,7 +47,7 @@ export const SearchInput: React.FC = () => {
     <div className="group relative w-full">
       <SearchIcon className="-translate-y-1/2 absolute top-[50%] left-3 size-4 text-muted-foreground" />
       <Input
-        placeholder="Search by token address or chain ID"
+        placeholder="Search with anything!"
         className="h-10 rounded-lg bg-card py-2 pl-9 lg:min-w-[300px]"
         defaultValue={searchParams?.get("query") || ""}
         onChange={(e) => handleSearch(e.target.value)}

apps/dashboard/src/app/(dashboard)/(bridge)/routes/components/server/routes-table.tsx

@@ -7,6 +7,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import type { Address } from "thirdweb";
+import { checksumAddress } from "thirdweb/utils";
 import { getRoutes } from "../../../utils";
 import { ChainlistPagination } from "../client/pagination";
 import { RouteListCard } from "../server/routelist-card";
@@ -34,28 +35,83 @@ async function getRoutesToRender(params: SearchParams) {
     originTokenAddress?: Address;
     destinationChainId?: number;
     destinationTokenAddress?: Address;
+    originTextQuery?: string;
+    destinationTextQuery?: string;
   }> = {};
 
   if (params.type === "origin" || typeof params.type === "undefined") {
     if (params.query?.startsWith("0x")) {
       filters.originTokenAddress = params.query as Address;
-    } else if (params.query) {
+    } else if (Number.isInteger(Number(params.query))) {
       filters.originChainId = Number(params.query);
+    } else if (params.query) {
+      filters.originTextQuery = params.query;
     }
   } else if (params.type === "destination") {
     if (params.query?.startsWith("0x")) {
       filters.destinationTokenAddress = params.query as Address;
-    } else if (params.query) {
+    } else if (Number.isInteger(Number(params.query))) {
       filters.destinationChainId = Number(params.query);
+    } else if (params.query) {
+      filters.destinationTextQuery = params.query;
     }
   }
   // Temporary, will update this after the /routes endpoint
-  filters.limit = 50_000;
-
-  const routes = await getRoutes(filters);
+  let routes = await getRoutes({ limit: 100_000 });
 
   const totalCount = routes.length;
 
+  if (filters.originChainId) {
+    routes = routes.filter(
+      (route) => route.originToken.chainId === filters.originChainId,
+    );
+  }
+  if (filters.originTokenAddress) {
+    const originTokenAddress = filters.originTokenAddress;
+    routes = routes.filter(
+      (route) =>
+        checksumAddress(route.originToken.address) ===
+        checksumAddress(originTokenAddress),
+    );
+  }
+  if (filters.destinationChainId) {
+    routes = routes.filter(
+      (route) => route.destinationToken.chainId === filters.destinationChainId,
+    );
+  }
+  if (filters.destinationTokenAddress) {
+    const destinationTokenAddress = filters.destinationTokenAddress;
+    routes = routes.filter(
+      (route) =>
+        checksumAddress(route.destinationToken.address) ===
+        checksumAddress(destinationTokenAddress),
+    );
+  }
+
+  if (filters.originTextQuery) {
+    const originTextQuery = filters.originTextQuery.toLowerCase();
+    routes = routes.filter((route) => {
+      return (
+        route.originToken.name.toLowerCase().includes(originTextQuery) ||
+        route.originToken.symbol.toLowerCase().includes(originTextQuery)
+      );
+    });
+  }
+
+  if (filters.destinationTextQuery) {
+    const destinationTextQuery = filters.destinationTextQuery.toLowerCase();
+    routes = routes.filter((route) => {
+      return (
+        route.destinationToken.name
+          .toLowerCase()
+          .includes(destinationTextQuery) ||
+        route.destinationToken.symbol
+          .toLowerCase()
+          .includes(destinationTextQuery)
+      );
+    });
+  }
+
   return {
     routesToRender: routes,
     totalCount,
@@ -154,13 +210,21 @@ export async function RoutesData(props: {
         out of{" "}
         {filteredCount !== totalCount ? (
           <>
-            <span className="text-accent-foreground">{filteredCount}</span>{" "}
+            <span className="text-accent-foreground">
+              {filteredCount.toLocaleString()}
+            </span>{" "}
             routes that match filters. (Total:{" "}
-            <span className="text-accent-foreground">{totalCount}</span>)
+            <span className="text-accent-foreground">
+              {totalCount.toLocaleString()}
+            </span>
+            )
           </>
         ) : (
           <>
-            <span className="text-accent-foreground">{totalCount}</span> routes.
+            <span className="text-accent-foreground">
+              {totalCount.toLocaleString()}
+            </span>{" "}
+            routes.
           </>
         )}
       </p>

apps/dashboard/src/app/(dashboard)/(bridge)/utils.ts

@@ -2,43 +2,18 @@ import "server-only";
 
 import { BRIDGE_URL, DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/env";
 import { getAuthToken } from "app/api/lib/getAuthToken";
-import type { Address } from "thirdweb";
 import type { Route } from "./types/route";
 
 export async function getRoutes({
   limit,
-  offset,
-  originChainId,
-  originTokenAddress,
-  destinationChainId,
-  destinationTokenAddress,
 }: {
   limit?: number;
-  offset?: number;
-  originChainId?: number;
-  originTokenAddress?: Address;
-  destinationChainId?: number;
-  destinationTokenAddress?: Address;
 } = {}) {
   const url = new URL(`${BRIDGE_URL}/v1/routes`);
   if (limit) {
     url.searchParams.set("limit", limit.toString());
   }
-  if (offset) {
-    url.searchParams.set("offset", offset.toString());
-  }
-  if (originChainId) {
-    url.searchParams.set("originChainId", originChainId.toString());
-  }
-  if (originTokenAddress) {
-    url.searchParams.set("originTokenAddress", originTokenAddress);
-  }
-  if (destinationChainId) {
-    url.searchParams.set("destinationChainId", destinationChainId.toString());
-  }
-  if (destinationTokenAddress) {
-    url.searchParams.set("destinationTokenAddress", destinationTokenAddress);
-  }
+  // It's faster to filter client side, doesn't seem to be a big performance boost to paginate/filter server side
   const token = await getAuthToken();
   const routesResponse = await fetch(url, {
     headers: token

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx

@@ -28,7 +28,7 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
           <div className="h-6" />
 
           <h2 className="px-4 text-center font-semibold text-lg tracking-tight">
-            Buy Funds on {sanitizedChainName} using thirdweb Pay
+            Buy Funds on {sanitizedChainName} using Universal Bridge
           </h2>
 
           <div className="h-2" />
@@ -50,8 +50,9 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
           <Link
             href="https://portal.thirdweb.com/connect/pay/overview"
             className="inline-flex items-center gap-1.5 text-muted-foreground text-sm hover:text-foreground"
+            target="_blank"
           >
-            Learn more about thirdweb Pay
+            Learn more about Universal Bridge
             <ExternalLinkIcon className="size-3" />
           </Link>
         </div>

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

@@ -13,7 +13,6 @@ import { ListerOnly } from "@3rdweb-sdk/react/components/roles/lister-only";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
 import { isMoralisSupported } from "lib/wallet/nfts/moralis";
-import { useSimplehashSupport } from "lib/wallet/nfts/simpleHash";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
@@ -25,6 +24,7 @@ interface CreateListingButtonProps {
   createText?: string;
   type?: "direct-listings" | "english-auctions";
   twAccount: Account | undefined;
+  isInsightSupported: boolean;
 }
 
 const LISTING_MODES = ["Select NFT", "Manual"] as const;
@@ -34,6 +34,7 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
   type,
   contract,
   twAccount,
+  isInsightSupported,
   ...restButtonProps
 }) => {
   const address = useActiveAccount()?.address;
@@ -41,13 +42,12 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
   const [listingMode, setListingMode] =
     useState<(typeof LISTING_MODES)[number]>("Select NFT");
 
-  const simplehashQuery = useSimplehashSupport(contract.chain.id);
-
   const isSupportedChain =
     contract.chain.id &&
-    (simplehashQuery.data ||
+    (isInsightSupported ||
       isAlchemySupported(contract.chain.id) ||
       isMoralisSupported(contract.chain.id));
+
   return (
     <ListerOnly contract={contract}>
       <Sheet open={open} onOpenChange={setOpen}>
@@ -83,6 +83,7 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
                   actionText={createText}
                   setOpen={setOpen}
                   mode={listingMode === "Select NFT" ? "automatic" : "manual"}
+                  isInsightSupported={isInsightSupported}
                 />
               </div>
             </>
@@ -95,6 +96,7 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
                 actionText={createText}
                 setOpen={setOpen}
                 mode="manual"
+                isInsightSupported={isInsightSupported}
               />
             </div>
           )}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx

@@ -21,7 +21,6 @@ import { useAllChainsData } from "hooks/chains/allChains";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
 import { isMoralisSupported } from "lib/wallet/nfts/moralis";
-import { useSimplehashSupport } from "lib/wallet/nfts/simpleHash";
 import type { WalletNFT } from "lib/wallet/nfts/types";
 import { CircleAlertIcon, InfoIcon } from "lucide-react";
 import Link from "next/link";
@@ -87,6 +86,7 @@ type CreateListingsFormProps = {
   mode: "automatic" | "manual";
   type?: "direct-listings" | "english-auctions";
   twAccount: Account | undefined;
+  isInsightSupported: boolean;
 };
 
 const auctionTimes = [
@@ -106,16 +106,17 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
   setOpen,
   twAccount,
   mode,
+  isInsightSupported,
 }) => {
   const trackEvent = useTrack();
   const chainId = contract.chain.id;
   const { idToChain } = useAllChainsData();
   const network = idToChain.get(chainId);
   const [isFormLoading, setIsFormLoading] = useState(false);
-  const simplehashQuery = useSimplehashSupport(contract.chain.id);
+
   const isSupportedChain =
     chainId &&
-    (!!simplehashQuery.data ||
+    (isInsightSupported ||
       isAlchemySupported(chainId) ||
       isMoralisSupported(chainId));
 
@@ -124,7 +125,9 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
   const { data: walletNFTs, isPending: isWalletNFTsLoading } = useWalletNFTs({
     chainId,
     walletAddress: account?.address,
+    isInsightSupported,
   });
+
   const sendAndConfirmTx = useSendAndConfirmTransaction();
   const listingNotifications = useTxNotifications(
     "NFT listed Successfully",

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/ContractDirectListingsPage.client.tsx

@@ -29,6 +29,7 @@ export function ContractDirectListingsPageClient(props: {
     <ContractDirectListingsPage
       contract={props.contract}
       twAccount={props.twAccount}
+      isInsightSupported={metadataQuery.data.isInsightSupported}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/ContractDirectListingsPage.tsx

@@ -8,17 +8,19 @@ import { DirectListingsTable } from "./components/table";
 interface ContractDirectListingsPageProps {
   contract: ThirdwebContract;
   twAccount: Account | undefined;
+  isInsightSupported: boolean;
 }
 
 export const ContractDirectListingsPage: React.FC<
   ContractDirectListingsPageProps
-> = ({ contract, twAccount }) => {
+> = ({ contract, twAccount, isInsightSupported }) => {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-row items-center justify-between">
         <p className="text-lg">Contract Listings</p>
         <div className="flex flex-row gap-4">
           <CreateListingButton
+            isInsightSupported={isInsightSupported}
             contract={contract}
             type="direct-listings"
             createText="Create Direct Listing"

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/page.tsx

@@ -29,15 +29,18 @@ export default async function Page(props: {
     );
   }
 
-  const { isDirectListingSupported } = await getContractPageMetadata(
-    info.contract,
-  );
+  const { isDirectListingSupported, isInsightSupported } =
+    await getContractPageMetadata(info.contract);
 
   if (!isDirectListingSupported) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return (
-    <ContractDirectListingsPage contract={info.contract} twAccount={account} />
+    <ContractDirectListingsPage
+      contract={info.contract}
+      twAccount={account}
+      isInsightSupported={isInsightSupported}
+    />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/ContractEnglishAuctionsPage.client.tsx

@@ -29,6 +29,7 @@ export function ContractEnglishAuctionsPageClient(props: {
     <ContractEnglishAuctionsPage
       contract={props.contract}
       twAccount={props.twAccount}
+      isInsightSupported={metadataQuery.data.isInsightSupported}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/ContractEnglishAuctionsPage.tsx

@@ -8,11 +8,12 @@ import { EnglishAuctionsTable } from "./components/table";
 interface ContractEnglishAuctionsProps {
   contract: ThirdwebContract;
   twAccount: Account | undefined;
+  isInsightSupported: boolean;
 }
 
 export const ContractEnglishAuctionsPage: React.FC<
   ContractEnglishAuctionsProps
-> = ({ contract, twAccount }) => {
+> = ({ contract, twAccount, isInsightSupported }) => {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-row items-center justify-between">
@@ -23,6 +24,7 @@ export const ContractEnglishAuctionsPage: React.FC<
             type="english-auctions"
             createText="Create English Auction"
             twAccount={twAccount}
+            isInsightSupported={isInsightSupported}
           />
         </div>
       </div>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/page.tsx

@@ -30,9 +30,8 @@ export default async function Page(props: {
     );
   }
 
-  const { isEnglishAuctionSupported } = await getContractPageMetadata(
-    info.contract,
-  );
+  const { isEnglishAuctionSupported, isInsightSupported } =
+    await getContractPageMetadata(info.contract);
 
   if (!isEnglishAuctionSupported) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
@@ -42,6 +41,7 @@ export default async function Page(props: {
     <ContractEnglishAuctionsPage
       contract={info.contract}
       twAccount={twAccount}
+      isInsightSupported={isInsightSupported}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageMetadata.ts

@@ -21,7 +21,7 @@ import {
 } from "./detectedFeatures/permissions";
 import { supportedERCs } from "./detectedFeatures/supportedERCs";
 import { type EmbedTypeToShow, getEmbedTypeToShow } from "./getEmbedTypeToShow";
-import { isAnalyticsSupportedForChain } from "./isAnalyticsSupportedForChain";
+import { isInsightSupportedForChain } from "./isAnalyticsSupportedForChain";
 
 export type ContractPageMetadata = {
   supportedERCs: {
@@ -36,7 +36,7 @@ export type ContractPageMetadata = {
   isPermissionsEnumerableSupported: boolean;
   isModularCore: boolean;
   embedType: EmbedTypeToShow;
-  isAnalyticsSupported: boolean;
+  isInsightSupported: boolean;
   isSplitSupported: boolean;
   isERC721ClaimConditionsSupported: boolean;
   isERC20ClaimConditionsSupported: boolean;
@@ -47,7 +47,7 @@ export type ContractPageMetadata = {
 };
 
 export async function getContractPageMetadata(contract: ThirdwebContract) {
-  return getContractPageMetadataSetup(contract, isAnalyticsSupportedForChain);
+  return getContractPageMetadataSetup(contract, isInsightSupportedForChain);
 }
 
 export async function getContractPageMetadataSetup(
@@ -56,7 +56,7 @@ export async function getContractPageMetadataSetup(
 ): Promise<ContractPageMetadata> {
   const [
     functionSelectorsResult,
-    isAnalyticsSupportedResult,
+    isInsightSupportedResult,
     contractTypeResult,
   ] = await Promise.allSettled([
     resolveFunctionSelectors(contract),
@@ -69,9 +69,9 @@ export async function getContractPageMetadataSetup(
       ? functionSelectorsResult.value
       : [];
 
-  const isAnalyticsSupported =
-    isAnalyticsSupportedResult.status === "fulfilled"
-      ? isAnalyticsSupportedResult.value
+  const isInsightSupported =
+    isInsightSupportedResult.status === "fulfilled"
+      ? isInsightSupportedResult.value
       : true;
 
   const contractType =
@@ -86,7 +86,7 @@ export async function getContractPageMetadataSetup(
       isPermissionsEnumerableSupported(functionSelectors),
     isModularCore: isModularCoreContract(functionSelectors),
     embedType: getEmbedTypeToShow(functionSelectors),
-    isAnalyticsSupported: isAnalyticsSupported,
+    isInsightSupported: isInsightSupported,
     isSplitSupported: contractType === "Split",
     isVoteContract: contractType === "VoteERC20",
     isERC721ClaimConditionsSupported:

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageSidebarLinks.ts

@@ -47,7 +47,7 @@ export function getContractPageSidebarLinks(data: {
     {
       label: "Analytics",
       href: `${layoutPrefix}/analytics`,
-      hide: !data.metadata.isAnalyticsSupported,
+      hide: !data.metadata.isInsightSupported,
       exactMatch: true,
     },
     {

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/isAnalyticsSupportedForChain.ts

@@ -4,7 +4,7 @@ import { getVercelEnv } from "lib/vercel-utils";
 const thirdwebDomain =
   getVercelEnv() !== "production" ? "thirdweb-dev" : "thirdweb";
 
-export async function isAnalyticsSupportedForChain(
+export async function isInsightSupportedForChain(
   chainId: number,
 ): Promise<boolean> {
   try {

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.client.tsx

@@ -32,6 +32,7 @@ export function AccountPageClient(props: {
       contract={props.contract}
       chainMetadata={props.chainMetadata}
       twAccount={props.twAccount}
+      isInsightSupported={metadataQuery.data.isInsightSupported}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx

@@ -12,12 +12,14 @@ interface AccountPageProps {
   contract: ThirdwebContract;
   chainMetadata: ChainMetadata;
   twAccount: Account | undefined;
+  isInsightSupported: boolean;
 }
 
 export const AccountPage: React.FC<AccountPageProps> = ({
   contract,
   chainMetadata,
   twAccount,
+  isInsightSupported,
 }) => {
   const symbol = chainMetadata.nativeCurrency.symbol || "Native Token";
 
@@ -43,7 +45,7 @@ export const AccountPage: React.FC<AccountPageProps> = ({
       <div className="flex flex-row items-center justify-between">
         <Heading size="title.sm">NFTs owned</Heading>
       </div>
-      <NftsOwned contract={contract} />
+      <NftsOwned contract={contract} isInsightSupported={isInsightSupported} />
     </div>
   );
 };

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

@@ -6,12 +6,17 @@ import { NFTCards } from "../../_components/NFTCards";
 
 interface NftsOwnedProps {
   contract: ThirdwebContract;
+  isInsightSupported: boolean;
 }
 
-export const NftsOwned: React.FC<NftsOwnedProps> = ({ contract }) => {
+export const NftsOwned: React.FC<NftsOwnedProps> = ({
+  contract,
+  isInsightSupported,
+}) => {
   const { data: walletNFTs, isPending: isWalletNFTsLoading } = useWalletNFTs({
     chainId: contract.chain.id,
     walletAddress: contract.address,
+    isInsightSupported: isInsightSupported,
   });
 
   const nfts = walletNFTs?.result || [];

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/page.tsx

@@ -33,7 +33,8 @@ export default async function Page(props: {
     );
   }
 
-  const { isAccount } = await getContractPageMetadata(contract);
+  const { isAccount, isInsightSupported } =
+    await getContractPageMetadata(contract);
 
   if (!isAccount) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
@@ -44,6 +45,7 @@ export default async function Page(props: {
       contract={contract}
       chainMetadata={chainMetadata}
       twAccount={account}
+      isInsightSupported={isInsightSupported}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/ContractAnalyticsPage.client.tsx

@@ -21,7 +21,7 @@ export function ContractAnalyticsPageClient(props: {
     return <ErrorPage />;
   }
 
-  if (!metadataQuery.data.isAnalyticsSupported) {
+  if (!metadataQuery.data.isInsightSupported) {
     return <RedirectToContractOverview contract={props.contract} />;
   }
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/page.tsx

@@ -34,9 +34,9 @@ export default async function Page(props: {
     );
   }
 
-  const { isAnalyticsSupported } = await getContractPageMetadata(info.contract);
+  const { isInsightSupported } = await getContractPageMetadata(info.contract);
 
-  if (!isAnalyticsSupported) {
+  if (!isInsightSupported) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 

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

@@ -3,14 +3,11 @@ import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { Toaster, toast } from "sonner";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { toast } from "sonner";
+import { BadgeContainer } from "stories/utils";
 import { ZERO_ADDRESS } from "thirdweb";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
-import {
-  ErrorProvider,
-  type TransactionError,
-} from "../../../../../../../contexts/error-handler";
+import type { TransactionError } from "../../../../../../../contexts/error-handler";
 import { accountStub } from "../../../../../../../stories/stubs";
 import {
   BatchMetadataModuleUI,
@@ -21,7 +18,6 @@ const meta = {
   title: "Modules/BatchMetadata",
   component: Component,
   parameters: {
-    layout: "centered",
     nextjs: {
       appDirectory: true,
     },
@@ -31,17 +27,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Component() {
   const [isOwner, setIsOwner] = useState(true);
 
@@ -80,38 +69,35 @@ function Component() {
 
   return (
     <ThirdwebProvider>
-      <ErrorProvider>
-        <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
-          <div>
-            <ConnectButton client={getThirdwebClient()} />
-          </div>
-
-          <div className="flex items-center gap-5">
-            <CheckboxWithLabel
-              value={isOwner}
-              onChange={setIsOwner}
-              id="isOwner"
-              label="Is Owner"
-            />
-          </div>
-
-          <BadgeContainer label="Default">
-            <BatchMetadataModuleUI
-              twAccount={accountStub()}
-              contractInfo={contractInfo}
-              moduleAddress="0x0000000000000000000000000000000000000000"
-              uploadMetadata={uploadMetadataStub}
-              uninstallButton={{
-                onClick: async () => removeMutation.mutateAsync(),
-                isPending: removeMutation.isPending,
-              }}
-              isOwnerAccount={isOwner}
-              contractChainId={1}
-            />
-          </BadgeContainer>
-          <Toaster richColors />
+      <div className="container flex max-w-6xl flex-col gap-10 py-10">
+        <div>
+          <ConnectButton client={getThirdwebClient()} />
         </div>
-      </ErrorProvider>
+
+        <div className="flex items-center gap-5">
+          <CheckboxWithLabel
+            value={isOwner}
+            onChange={setIsOwner}
+            id="isOwner"
+            label="Is Owner"
+          />
+        </div>
+
+        <BadgeContainer label="Default">
+          <BatchMetadataModuleUI
+            twAccount={accountStub()}
+            contractInfo={contractInfo}
+            moduleAddress="0x0000000000000000000000000000000000000000"
+            uploadMetadata={uploadMetadataStub}
+            uninstallButton={{
+              onClick: async () => removeMutation.mutateAsync(),
+              isPending: removeMutation.isPending,
+            }}
+            isOwnerAccount={isOwner}
+            contractChainId={1}
+          />
+        </BadgeContainer>
+      </div>
     </ThirdwebProvider>
   );
 }

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

@@ -11,8 +11,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { subDays } from "date-fns";
 import { useState } from "react";
-import { Toaster, toast } from "sonner";
-import { mobileViewport } from "stories/utils";
+import { toast } from "sonner";
 import { NATIVE_TOKEN_ADDRESS, ZERO_ADDRESS } from "thirdweb";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { checksumAddress } from "thirdweb/utils";
@@ -29,7 +28,6 @@ const meta = {
   title: "Modules/Claimable",
   component: Component,
   parameters: {
-    layout: "centered",
     nextjs: {
       appDirectory: true,
     },
@@ -39,17 +37,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const testAddress1 = "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37";
 
 const claimCondition = {
@@ -67,7 +58,7 @@ const claimCondition = {
 
 function Component() {
   const [isOwner, setIsOwner] = useState(true);
-  const [name, setName] = useState("ClaimableERC721");
+  const [name, setName] = useState("MintableERC721");
   const [isClaimConditionLoading, setIsClaimConditionLoading] = useState(false);
   const [isPrimarySaleRecipientLoading, setIsPrimarySaleRecipientLoading] =
     useState(false);
@@ -110,7 +101,7 @@ function Component() {
 
   return (
     <ThirdwebProvider>
-      <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+      <div className="container flex max-w-6xl flex-col gap-10 py-10">
         <div>
           <ConnectButton client={getThirdwebClient()} />
         </div>
@@ -196,8 +187,6 @@ function Component() {
           isValidTokenId={true}
           noClaimConditionSet={noClaimConditionSet}
         />
-
-        <Toaster richColors />
       </div>
     </ThirdwebProvider>
   );

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

@@ -11,8 +11,8 @@ import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { Toaster, toast } from "sonner";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { toast } from "sonner";
+import { BadgeContainer } from "stories/utils";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { accountStub } from "../../../../../../../stories/stubs";
 import {
@@ -25,7 +25,6 @@ const meta = {
   title: "Modules/Mintable",
   component: Component,
   parameters: {
-    layout: "centered",
     nextjs: {
       appDirectory: true,
     },
@@ -35,17 +34,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const testAddress1 = "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37";
 
 function Component() {
@@ -84,7 +76,7 @@ function Component() {
 
   return (
     <ThirdwebProvider>
-      <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+      <div className="container flex max-w-6xl flex-col gap-10 py-10">
         <div>
           <ConnectButton client={getThirdwebClient()} />
         </div>
@@ -175,8 +167,6 @@ function Component() {
             contractChainId={1}
           />
         </BadgeContainer>
-
-        <Toaster richColors />
       </div>
     </ThirdwebProvider>
   );

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.stories.tsx

@@ -2,33 +2,22 @@ import { Checkbox } from "@/components/ui/checkbox";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { Toaster } from "sonner";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { BadgeContainer } from "stories/utils";
 import { ThirdwebProvider } from "thirdweb/react";
 import { ModuleCardUI } from "./module-card";
 
 const meta = {
   title: "Modules/ModuleCard",
   component: Component,
-  parameters: {
-    layout: "centered",
-  },
 } satisfies Meta<typeof Component>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Component() {
   const [isOwner, setIsOwner] = useState(true);
 
@@ -120,8 +109,6 @@ function Component() {
             </div>
           </ModuleCardUI>
         </BadgeContainer>
-
-        <Toaster richColors />
       </div>
     </ThirdwebProvider>
   );

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

@@ -3,8 +3,8 @@ import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { Toaster, toast } from "sonner";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { toast } from "sonner";
+import { BadgeContainer } from "stories/utils";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { accountStub } from "../../../../../../../stories/stubs";
 import {
@@ -16,7 +16,6 @@ const meta = {
   title: "Modules/OpenEditionMetadata",
   component: Component,
   parameters: {
-    layout: "centered",
     nextjs: {
       appDirectory: true,
     },
@@ -26,17 +25,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Component() {
   const [isOwner, setIsOwner] = useState(true);
   async function setSharedMetadataStub(values: SetSharedMetadataFormValues) {
@@ -98,8 +90,6 @@ function Component() {
             twAccount={accountStub()}
           />
         </BadgeContainer>
-
-        <Toaster richColors />
       </div>
     </ThirdwebProvider>
   );

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

@@ -3,8 +3,8 @@ import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { Toaster, toast } from "sonner";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { toast } from "sonner";
+import { BadgeContainer } from "stories/utils";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { accountStub } from "../../../../../../../stories/stubs";
 import {
@@ -18,7 +18,6 @@ const meta = {
   title: "Modules/Royalty",
   component: Component,
   parameters: {
-    layout: "centered",
     nextjs: {
       appDirectory: true,
     },
@@ -28,17 +27,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const _testAddress1 = "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37";
 
 function Component() {
@@ -79,7 +71,7 @@ function Component() {
 
   return (
     <ThirdwebProvider>
-      <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+      <div className="container flex max-w-6xl flex-col gap-10 py-10">
         <div>
           <ConnectButton client={getThirdwebClient()} />
         </div>
@@ -168,8 +160,6 @@ function Component() {
             twAccount={twAccount}
           />
         </BadgeContainer>
-
-        <Toaster richColors />
       </div>
     </ThirdwebProvider>
   );

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

@@ -3,8 +3,8 @@ import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { Toaster, toast } from "sonner";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { toast } from "sonner";
+import { BadgeContainer } from "stories/utils";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { accountStub } from "../../../../../../../stories/stubs";
 import {
@@ -16,7 +16,6 @@ const meta = {
   title: "Modules/Transferable",
   component: Component,
   parameters: {
-    layout: "centered",
     nextjs: {
       appDirectory: true,
     },
@@ -26,17 +25,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const testAddress1 = "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37";
 
 function Component() {
@@ -65,7 +57,7 @@ function Component() {
 
   return (
     <ThirdwebProvider>
-      <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+      <div className="container flex max-w-6xl flex-col gap-10 py-10">
         <div className="flex gap-2">
           <Checkbox
             id="terms1"
@@ -139,8 +131,6 @@ function Component() {
             twAccount={accountStub()}
           />
         </BadgeContainer>
-
-        <Toaster richColors />
       </div>
     </ThirdwebProvider>
   );

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/contract-overview-page.client.tsx

@@ -34,7 +34,7 @@ export function ContractOverviewPageClient(props: {
         contractPageMetadata.isPermissionsEnumerableSupported
       }
       chainSlug={chainMetadata.slug}
-      isAnalyticsSupported={contractPageMetadata.isAnalyticsSupported}
+      isAnalyticsSupported={contractPageMetadata.isInsightSupported}
       functionSelectors={contractPageMetadata.functionSelectors}
       // TODO - create a fully client rendered version of publishedBy and ContractCard and plug it here
       publishedBy={undefined}

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

@@ -44,7 +44,7 @@ export default async function Page(props: {
         contractPageMetadata.isPermissionsEnumerableSupported
       }
       chainSlug={chainMetadata.slug}
-      isAnalyticsSupported={contractPageMetadata.isAnalyticsSupported}
+      isAnalyticsSupported={contractPageMetadata.isInsightSupported}
       functionSelectors={contractPageMetadata.functionSelectors}
       publishedBy={
         <ErrorBoundary fallback={null}>

apps/dashboard/src/app/(dashboard)/(chain)/components/server/products.ts

@@ -14,7 +14,7 @@ export const products = [
     id: "contracts",
     icon: ContractIcon,
     description: "Pre-built contracts & deployment tools",
-    link: "https://thirdweb.com/contracts",
+    link: "https://thirdweb.com/explore",
   },
   {
     name: "Connect SDK",

apps/dashboard/src/app/(dashboard)/(chain)/utils.ts

@@ -47,6 +47,8 @@ import metalBanner from "./temp-assets/metalBanner.png";
 import plumeBanner from "./temp-assets/plumeBanner.png";
 
 import plumeCTA from "./temp-assets/plumeCTA.png";
+import reactiveBanner from "./temp-assets/reactiveBanner.jpg";
+import reactiveCTA from "./temp-assets/reactiveCTA.jpg";
 import rivalzBanner from "./temp-assets/rivalzBanner.png";
 import rivalzCTA from "./temp-assets/rivalzCTA.png";
 import rootStockBanner from "./temp-assets/rootstock-banner.png";
@@ -575,6 +577,18 @@ const chainMetaRecord = {
       buttonText: "Learn More",
     },
   },
+  //Reactive Mainnet
+  1597: {
+    headerImgUrl: reactiveBanner.src,
+    about:
+      "Web3’s first IFTTT infrastructure. Automate multi-chain workflows with event-driven logic – execute actions without compromising decentralization.",
+    cta: {
+      backgroundImageUrl: reactiveCTA.src,
+      title: "Turn Smart Contracts Reactive",
+      buttonLink: "https://dev.reactive.network",
+      buttonText: "Learn More",
+    },
+  },
   //Saakuru Mainnet
   7225878: {
     headerImgUrl: saakuruBanner.src,

apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx

@@ -23,27 +23,27 @@ export function DeployedContractsPageHeader(props: {
         projectId={props.projectId}
       />
 
-      <div className="container">
-        <div className="flex flex-col gap-3 py-10 lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <h1 className="font-semibold text-3xl tracking-tight">Contracts</h1>
-          </div>
-          <div className="flex gap-3 [&>*]:grow">
-            <Button
-              className="gap-2 bg-card"
-              variant="outline"
-              onClick={() => setImportModalOpen(true)}
-            >
-              <DownloadIcon className="size-4" />
-              Import contract
-            </Button>
-            <Button asChild className="gap-2">
-              <Link href="/explore">
-                <PlusIcon className="size-4" />
-                Deploy contract
-              </Link>
-            </Button>
-          </div>
+      <div className="container flex max-w-7xl flex-col gap-3 py-10 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
+            Contracts
+          </h1>
+        </div>
+        <div className="flex gap-3 [&>*]:grow">
+          <Button
+            className="gap-2 bg-card"
+            variant="outline"
+            onClick={() => setImportModalOpen(true)}
+          >
+            <DownloadIcon className="size-4" />
+            Import contract
+          </Button>
+          <Button asChild className="gap-2">
+            <Link href="/explore">
+              <PlusIcon className="size-4" />
+              Deploy contract
+            </Link>
+          </Button>
         </div>
       </div>
     </div>

apps/dashboard/src/app/account/contracts/_components/DeployViaCLIOrImportCard.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ArrowUpRightIcon, DownloadIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { ImportModal } from "../../../../components/contract-components/import-contract/modal";
+
+export function DeployViaCLIOrImportCard(props: {
+  teamId: string;
+  projectId: string;
+}) {
+  const [importModalOpen, setImportModalOpen] = useState(false);
+
+  return (
+    <div className="rounded-lg border bg-card p-4 lg:p-6">
+      <ImportModal
+        isOpen={importModalOpen}
+        onClose={() => {
+          setImportModalOpen(false);
+        }}
+        teamId={props.teamId}
+        projectId={props.projectId}
+      />
+
+      <h2 className="mb-0.5 font-semibold text-lg">
+        Already have a smart contract?
+      </h2>
+      <p className="max-w-2xl text-muted-foreground text-sm lg:text-base">
+        Import an already deployed contract or deploy a contract from source
+        code to easily manage permissions, upload assets, and interact with
+        contract functions
+      </p>
+
+      <div className="mt-6 flex flex-col gap-3 lg:flex-row">
+        <Button
+          variant="outline"
+          className="gap-2 bg-background lg:px-10"
+          asChild
+        >
+          <Link
+            href="https://portal.thirdweb.com/contracts/deploy/overview"
+            target="_blank"
+          >
+            Deploy via CLI
+            <ArrowUpRightIcon className="size-4" />
+          </Link>
+        </Button>
+        <Button
+          variant="outline"
+          className="gap-2 bg-background"
+          onClick={() => setImportModalOpen(true)}
+        >
+          <DownloadIcon className="size-4" />
+          Import Contract
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx

@@ -3,7 +3,7 @@ import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { Suspense } from "react";
 import { ContractTable } from "../../../../components/contract-components/tables/contract-table";
 import { DeployedContractsPageHeader } from "../DeployedContractsPageHeader";
-import { GetStartedWithContractsDeploy } from "./GetStartedWithContractsDeploy";
+import { DeployViaCLIOrImportCard } from "./DeployViaCLIOrImportCard";
 import { getSortedDeployedContracts } from "./getSortedDeployedContracts";
 
 export function DeployedContractsPage(props: {
@@ -12,16 +12,21 @@ export function DeployedContractsPage(props: {
   authToken: string;
 }) {
   return (
-    <div className="flex grow flex-col pb-20">
+    <div className="flex grow flex-col">
       <DeployedContractsPageHeader
         teamId={props.teamId}
         projectId={props.projectId}
       />
-      <div className="h-10" />
-      <div className="container flex grow flex-col">
+      <div className="h-6" />
+      <div className="container flex max-w-7xl grow flex-col">
         <Suspense fallback={<Loading />}>
           <DeployedContractsPageAsync {...props} />
         </Suspense>
+        <div className="h-8" />
+        <DeployViaCLIOrImportCard
+          teamId={props.teamId}
+          projectId={props.projectId}
+        />
       </div>
     </div>
   );
@@ -38,15 +43,6 @@ async function DeployedContractsPageAsync(props: {
     authToken: props.authToken,
   });
 
-  if (deployedContracts.length === 0) {
-    return (
-      <GetStartedWithContractsDeploy
-        teamId={props.teamId}
-        projectId={props.projectId}
-      />
-    );
-  }
-
   return (
     <ClientOnly ssr={<Loading />}>
       <ContractTable

apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx

@@ -1,139 +0,0 @@
-"use client";
-import { TabButtons } from "@/components/ui/tabs";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { ImportModal } from "components/contract-components/import-contract/modal";
-import { StepsCard } from "components/dashboard/StepsCard";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useMemo, useState } from "react";
-
-export function GetStartedWithContractsDeploy(props: {
-  teamId: string;
-  projectId: string;
-}) {
-  const steps = useMemo(
-    () => [
-      {
-        title: "Build, deploy or import a contract",
-        description:
-          "Choose between deploying your own contract or import an existing one.",
-        children: (
-          <DeployOptions teamId={props.teamId} projectId={props.projectId} />
-        ),
-        completed: false, // because we only show this component if the user does not have any contracts
-      },
-    ],
-    [props.teamId, props.projectId],
-  );
-
-  return (
-    <StepsCard
-      title="Get started with deploying contracts"
-      description="This guide will help you to start deploying contracts on-chain in just a few minutes."
-      steps={steps}
-    />
-  );
-}
-
-type ContentItem = {
-  title: string;
-  description: string;
-  href?: string;
-  onClick?: () => void;
-};
-
-type TabId = "explore" | "import" | "build" | "deploy";
-
-const DeployOptions = (props: {
-  teamId: string;
-  projectId: string;
-}) => {
-  const [showImportModal, setShowImportModal] = useState(false);
-  const router = useDashboardRouter();
-  const trackEvent = useTrack();
-
-  const content: Record<TabId, ContentItem> = useMemo(
-    () => ({
-      explore: {
-        title: "Ready-to-deploy",
-        description:
-          "Pick from our library of ready-to-deploy contracts and deploy to any EVM chain in just 1-click.",
-        href: "/explore",
-      },
-      import: {
-        title: "Import",
-        description:
-          "Import an already deployed contract to build apps on top of contract using thirdweb tools.",
-        onClick: () => setShowImportModal(true),
-      },
-      build: {
-        title: "Build your own",
-        description:
-          "Get started with the Solidity SDK to create custom contracts specific to your use case.",
-        href: "/build",
-      },
-      deploy: {
-        title: "Deploy from source",
-        description:
-          "Deploy your contract by using our interactive CLI. (Supports Hardhat, Forge, Truffle, and more)",
-        href: "https://portal.thirdweb.com/cli",
-      },
-    }),
-    [],
-  );
-
-  const [activeTab, setActiveTab] = useState<TabId>("explore");
-  const activeTabContent = content[activeTab];
-
-  return (
-    <div className="mt-3">
-      <ImportModal
-        isOpen={showImportModal}
-        onClose={() => {
-          setShowImportModal(false);
-        }}
-        teamId={props.teamId}
-        projectId={props.projectId}
-      />
-
-      <TabButtons
-        tabs={Object.entries(content).map(([key, value]) => ({
-          key,
-          name: value.title,
-          isActive: activeTab === key,
-          onClick: () => setActiveTab(key as TabId),
-        }))}
-        tabClassName="font-medium"
-        tabContainerClassName="gap-1"
-      />
-
-      <button
-        className="mt-3 flex w-full cursor-pointer items-center gap-2 rounded-lg border border-border bg-card p-4 hover:border-active-border"
-        type="button"
-        onClick={() => {
-          activeTabContent.onClick?.();
-          if (activeTabContent.href) {
-            router.push(activeTabContent.href);
-          }
-
-          trackEvent({
-            category: "your_contracts",
-            action: "click",
-            label: "deploy_options",
-            type: activeTab,
-            href: null,
-            isExternal: false,
-          });
-        }}
-      >
-        <div>
-          <h4 className="text-start font-semibold text-lg">
-            {activeTabContent.title}
-          </h4>
-          <p className="text-start text-muted-foreground text-sm">
-            {activeTabContent.description}
-          </p>
-        </div>
-      </button>
-    </div>
-  );
-};

apps/dashboard/src/app/account/layout.tsx

@@ -4,6 +4,7 @@ import { AppFooter } from "@/components/blocks/app-footer";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type React from "react";
 import { TabPathLinks } from "../../@/components/ui/tabs";
+import { AnnouncementBanner } from "../../components/notices/AnnouncementBanner";
 import { getAuthTokenWalletAddress } from "../api/lib/getAuthToken";
 import { TWAutoConnect } from "../components/autoconnect";
 import { loginRedirect } from "../login/loginRedirect";
@@ -53,6 +54,7 @@ async function HeaderAndNav(props: {
 
   return (
     <div className="bg-card">
+      <AnnouncementBanner />
       <AccountHeader
         teamsAndProjects={teamsAndProjects}
         account={props.twAccount}

apps/dashboard/src/app/account/settings/AccountSettingsPageUI.stories.tsx

@@ -10,7 +10,6 @@ import {
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Toaster } from "sonner";
 import { mobileViewport } from "../../../stories/utils";
 import { AccountSettingsPageUI } from "./AccountSettingsPageUI";
 
@@ -147,7 +146,6 @@ function Variants() {
           await new Promise((resolve) => setTimeout(resolve, 1000));
         }}
       />
-      <Toaster richColors />
     </div>
   );
 }

apps/dashboard/src/app/account/wallets/LinkWalletsUI.stories.tsx

@@ -1,6 +1,5 @@
 import type { LinkedWallet } from "@/api/linked-wallets";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Toaster } from "sonner";
 import { ThirdwebProvider } from "thirdweb/react";
 import { BadgeContainer, mobileViewport } from "../../../stories/utils";
 import { LinkWalletUI } from "./LinkWalletUI";
@@ -91,8 +90,6 @@ function Variants() {
             accountEmail="[email protected]"
           />
         </BadgeContainer>
-
-        <Toaster richColors />
       </div>
     </ThirdwebProvider>
   );

apps/dashboard/src/app/api/nft/is-simplehash-supported/route.ts

@@ -1,34 +0,0 @@
-import { isSimpleHashSupported } from "lib/wallet/nfts/simpleHash";
-import { NextResponse } from "next/server";
-import type { NextRequest } from "next/server";
-
-export const runtime = "edge";
-
-export const GET = async (req: NextRequest) => {
-  const searchParams = req.nextUrl.searchParams;
-  const chainIdStr = searchParams.get("chainId");
-
-  if (!chainIdStr) {
-    return NextResponse.json(
-      {
-        error: "Missing chain ID parameter.",
-      },
-      { status: 400 },
-    );
-  }
-
-  const chainId = Number.parseInt(chainIdStr);
-
-  if (!Number.isInteger(chainId)) {
-    return NextResponse.json(
-      {
-        error: "Invalid chain ID parameter.",
-      },
-      { status: 400 },
-    );
-  }
-
-  const found = await isSimpleHashSupported(chainId);
-
-  return NextResponse.json({ result: found });
-};

apps/dashboard/src/app/components/root-providers.tsx

@@ -1,22 +0,0 @@
-// app/providers.tsx
-"use client";
-import posthog from "posthog-js";
-import { PostHogProvider as PHProvider } from "posthog-js/react";
-
-if (typeof window !== "undefined") {
-  posthog.init(
-    process.env.NEXT_PUBLIC_POSTHOG_API_KEY ||
-      "phc_hKK4bo8cHZrKuAVXfXGpfNSLSJuucUnguAgt2j6dgSV",
-    {
-      api_host: "https://a.thirdweb.com",
-      autocapture: true,
-      debug: false,
-      capture_pageview: true,
-      disable_session_recording: true,
-    },
-  );
-}
-
-export function PostHogProvider({ children }: { children: React.ReactNode }) {
-  return <PHProvider client={posthog}>{children}</PHProvider>;
-}

apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/JoinTeamPage.stories.tsx

@@ -1,6 +1,4 @@
-import { Toaster } from "@/components/ui/sonner";
 import type { Meta, StoryObj } from "@storybook/react";
-import { mobileViewport } from "../../../../../stories/utils";
 import { JoinTeamPageUI } from "./JoinTeamPage";
 
 const meta = {
@@ -16,17 +14,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
     <div>
@@ -36,7 +27,6 @@ function Story() {
           await new Promise((resolve) => setTimeout(resolve, 1000));
         }}
       />
-      <Toaster richColors />
     </div>
   );
 }

apps/dashboard/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import "@/styles/globals.css";
+import "../global.css";
 import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import type { Metadata } from "next";
@@ -6,11 +6,12 @@ import PlausibleProvider from "next-plausible";
 import { Inter } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
 import { Suspense } from "react";
-import { OrganizeContractsToProjectsBanner } from "../components/notices/AnnouncementBanner";
 import { OpCreditsGrantedModalWrapperServer } from "../components/onboarding/OpCreditsGrantedModalWrapperServer";
 import { PosthogIdentifierServer } from "../components/wallets/PosthogIdentifierServer";
+import { PHProvider } from "../lib/posthog/Posthog";
+import { PosthogHeadSetup } from "../lib/posthog/PosthogHeadSetup";
+import { PostHogPageView } from "../lib/posthog/PosthogPageView";
 import { EnsureValidConnectedWalletLoginServer } from "./components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
-import { PostHogProvider } from "./components/root-providers";
 import { AppRouterProviders } from "./providers";
 
 const fontSans = Inter({
@@ -64,15 +65,16 @@ export default function RootLayout({
           customDomain="https://pl.thirdweb.com"
           selfHosted
         />
+        <PosthogHeadSetup />
       </head>
-      <PostHogProvider>
+      <PHProvider>
+        <PostHogPageView />
         <body
           className={cn(
             "bg-background font-sans antialiased",
             fontSans.variable,
           )}
         >
-          <OrganizeContractsToProjectsBanner />
           <AppRouterProviders>
             {children}
             <Suspense fallback={null}>
@@ -93,7 +95,7 @@ export default function RootLayout({
             showSpinner={false}
           />
         </body>
-      </PostHogProvider>
+      </PHProvider>
     </html>
   );
 }

apps/dashboard/src/app/login/onboarding/team-onboarding/TeamInfoForm.stories.tsx

@@ -1,4 +1,3 @@
-import { Toaster } from "@/components/ui/sonner";
 import type { Meta, StoryObj } from "@storybook/react";
 import { teamStub } from "../../../../stories/stubs";
 import { storybookLog } from "../../../../stories/utils";
@@ -59,7 +58,6 @@ function Story(props: {
           return teamStub("foo", "free");
         }}
       />
-      <Toaster richColors />
     </TeamOnboardingLayout>
   );
 }

apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.stories.tsx

@@ -2,35 +2,51 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { subDays } from "date-fns";
 import { ThirdwebProvider } from "thirdweb/react";
 import { accountStub, randomLorem } from "../../../../../stories/stubs";
-import { BadgeContainer, mobileViewport } from "../../../../../stories/utils";
 import { ChatPageLayout } from "../../components/ChatPageLayout";
 import { ChatHistoryPageUI } from "./ChatHistoryPage";
 
 const meta = {
   title: "Nebula/history",
-  component: Story,
+  component: Variant,
   parameters: {
     nextjs: {
       appDirectory: true,
     },
   },
-} satisfies Meta<typeof Story>;
+  decorators: [
+    (Story) => (
+      <ThirdwebProvider>
+        <Story />
+      </ThirdwebProvider>
+    ),
+  ],
+} satisfies Meta<typeof Variant>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const TenChats: Story = {
   args: {
     length: 10,
   },
 };
 
-export const Mobile: Story = {
+export const ZeroChats: Story = {
+  args: {
+    length: 0,
+  },
+};
+
+export const OneChat: Story = {
+  args: {
+    length: 1,
+  },
+};
+
+export const PrefillSearch: Story = {
   args: {
     length: 10,
-  },
-  parameters: {
-    viewport: mobileViewport("iphone14"),
+    prefillSearch: "xxxxxxxxxxxx",
   },
 };
 
@@ -51,30 +67,6 @@ function createRandomSessions(length: number) {
   return sessions;
 }
 
-function Story() {
-  return (
-    <ThirdwebProvider>
-      <div className="flex flex-col gap-10 py-10">
-        <BadgeContainer label="10 chats">
-          <Variant length={10} />
-        </BadgeContainer>
-
-        <BadgeContainer label="0 chats">
-          <Variant length={0} />
-        </BadgeContainer>
-
-        <BadgeContainer label="1 chat">
-          <Variant length={1} />
-        </BadgeContainer>
-
-        <BadgeContainer label="No search result">
-          <Variant length={10} prefillSearch="xxxxxxxxxxxx" />
-        </BadgeContainer>
-      </div>
-    </ThirdwebProvider>
-  );
-}
-
 function Variant(props: {
   length: number;
   prefillSearch?: string;
@@ -85,7 +77,6 @@ function Variant(props: {
       accountAddress="0x1234567890"
       authToken="xxxxxxxx"
       sessions={createRandomSessions(props.length)}
-      className="h-[700px] border-b lg:h-[800px]"
     >
       <ChatHistoryPageUI
         sessions={createRandomSessions(props.length)}

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx

@@ -13,7 +13,7 @@ import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
+import { useActiveAccount } from "thirdweb/react";
 import { type NebulaContext, promptNebula } from "../api/chat";
 import { createSession, updateSession } from "../api/session";
 import type { SessionInfo } from "../api/types";
@@ -32,7 +32,6 @@ export function ChatPageContent(props: {
   initialPrompt: string | undefined;
 }) {
   const address = useActiveAccount()?.address;
-  const activeChain = useActiveWalletChain();
   const client = useThirdwebClient(props.authToken);
   const [userHasSubmittedMessage, setUserHasSubmittedMessage] = useState(false);
   const [messages, setMessages] = useState<Array<ChatMessage>>(() => {
@@ -133,14 +132,9 @@ export function ChatPageContent(props: {
         // ignore local storage errors
       }
 
-      // else - use the active chain
-      updatedContextFilters.chainIds = activeChain
-        ? [activeChain.id.toString()]
-        : [];
-
       return updatedContextFilters;
     });
-  }, [address, isNewSession, hasUserUpdatedContextFilters, activeChain]);
+  }, [address, isNewSession, hasUserUpdatedContextFilters]);
 
   const [sessionId, _setSessionId] = useState<string | undefined>(
     props.session?.id,

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.stories.tsx

@@ -1,32 +1,51 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Toaster } from "sonner";
 import { ThirdwebProvider } from "thirdweb/react";
 import { accountStub, randomLorem } from "../../../../stories/stubs";
-import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
 import type { TruncatedSessionInfo } from "../api/types";
 import { ChatPageLayout } from "./ChatPageLayout";
 
 const meta = {
   title: "Nebula/ChatPageLayout",
-  component: Story,
+  component: Variant,
+  decorators: [
+    (Story) => (
+      <ThirdwebProvider>
+        <Story />
+      </ThirdwebProvider>
+    ),
+  ],
   parameters: {
     nextjs: {
       appDirectory: true,
     },
   },
-} satisfies Meta<typeof Story>;
+} satisfies Meta<typeof Variant>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
-  args: {},
+export const NoRecentChats: Story = {
+  args: {
+    sessions: [],
+  },
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
+export const ThreeChats: Story = {
+  args: {
+    sessions: generateRandomSessions(3),
+  },
+};
+
+export const ThirtyChats: Story = {
+  args: {
+    sessions: generateRandomSessions(30),
+  },
+};
+
+export const NoEmail: Story = {
+  args: {
+    sessions: generateRandomSessions(30),
+    noEmail: true,
   },
 };
 
@@ -39,48 +58,26 @@ function generateRandomSessions(count: number): TruncatedSessionInfo[] {
   }));
 }
 
-function Story() {
-  return (
-    <ThirdwebProvider>
-      <div className="flex flex-col gap-10 py-10 lg:container">
-        <Variant label="No Recent Chats" sessions={[]} />
-        <Variant label="3  Chats" sessions={generateRandomSessions(3)} />
-        <Variant label="30  Chats" sessions={generateRandomSessions(30)} />
-        <Variant
-          label="No Email"
-          sessions={generateRandomSessions(30)}
-          noEmail
-        />
-      </div>
-    </ThirdwebProvider>
-  );
-}
-
 function Variant(props: {
-  label: string;
   sessions: TruncatedSessionInfo[];
   noEmail?: boolean;
 }) {
   return (
-    <BadgeContainer label={props.label}>
-      <ChatPageLayout
-        accountAddress="0xC569B9FD77d132e10954cA5E6EF617414e314b11"
-        authToken="xxxxx"
-        sessions={props.sessions}
-        className="h-[200px] lg:h-[800px] lg:border"
-        account={accountStub(
-          props.noEmail
-            ? {
-                email: undefined,
-              }
-            : undefined,
-        )}
-      >
-        <div className="flex h-full w-full items-center justify-center">
-          CHILDREN
-        </div>
-      </ChatPageLayout>
-      <Toaster richColors />
-    </BadgeContainer>
+    <ChatPageLayout
+      accountAddress="0xC569B9FD77d132e10954cA5E6EF617414e314b11"
+      authToken="xxxxx"
+      sessions={props.sessions}
+      account={accountStub(
+        props.noEmail
+          ? {
+              email: undefined,
+            }
+          : undefined,
+      )}
+    >
+      <div className="flex h-full w-full items-center justify-center">
+        CHILDREN
+      </div>
+    </ChatPageLayout>
   );
 }

apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
+import { BadgeContainer } from "../../../../stories/utils";
 import { ChatBar } from "./ChatBar";
 
 const meta = {
@@ -15,20 +15,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
-    <div className="container flex max-w-[800px] flex-col gap-14 py-10">
+    <div className="container flex max-w-6xl flex-col gap-14 py-10">
       <BadgeContainer label="Not Streaming">
         <ChatBar
           abortChatStream={() => {}}

apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx

@@ -1,9 +1,8 @@
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Toaster } from "sonner";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { accountStub, randomLorem } from "../../../../stories/stubs";
-import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
+import { BadgeContainer } from "../../../../stories/utils";
 import { type ChatMessage, Chats } from "./Chats";
 
 const meta = {
@@ -19,17 +18,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const markdownExample = `\
 # Heading 1
 ## Heading 2
@@ -245,8 +237,6 @@ function Story() {
             ]}
           />
         </BadgeContainer>
-
-        <Toaster richColors />
       </div>
     </ThirdwebProvider>
   );

apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Toaster } from "sonner";
-import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
+import { BadgeContainer } from "../../../../stories/utils";
 import type { NebulaContext } from "../api/chat";
 import ContextFiltersButton from "./ContextFilters";
 
@@ -18,20 +17,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
-    <div className="container flex max-w-[1000px] flex-col gap-8 py-10 lg:p-10">
+    <div className="container flex max-w-6xl flex-col gap-8 py-10">
       <Variant contextFilters={undefined} label="No Filters Set" />
 
       <Variant
@@ -65,7 +57,6 @@ function Story() {
         }}
         label="chains + wallet"
       />
-      <Toaster richColors />
     </div>
   );
 }

apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx

@@ -199,6 +199,17 @@ export function ContextFiltersForm(props: {
                     onChange={(values) => {
                       form.setValue("chainIds", values.join(","));
                     }}
+                    priorityChains={[
+                      1, // ethereum
+                      56, // bnb smart chain mainnet (bsc)
+                      42161, // arbitrum one mainnet
+                      8453, // base mainnet
+                      43114, // avalanche mainnet
+                      146, // sonic
+                      137, // polygon
+                      80094, // berachain mainnet
+                      10, // optimism
+                    ]}
                   />
                 </FormControl>
                 <FormMessage />

apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { mobileViewport } from "../../../../stories/utils";
 import { EmptyStateChatPageContent } from "./EmptyStateChatPageContent";
 
 const meta = {
@@ -15,17 +14,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Default: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
     <div className="container flex max-w-[800px] grow flex-col justify-center overflow-hidden">

apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { accountStub } from "../../../../stories/stubs";
-import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
+import { BadgeContainer } from "../../../../stories/utils";
 import {
   ExecuteTransactionCardLayout,
   type TxStatus,
@@ -22,17 +22,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const client = getThirdwebClient();
 
 const exampleTxHash =

apps/dashboard/src/app/nebula-app/(app)/data/examplePrompts.ts

@@ -22,7 +22,7 @@ Send native and ERC-20 currencies
 
 ### Deploy
 Deploy published contracts
-- Deploy a Token ERC20 Contract
+- Deploy a Token ERC20 Contract with name "Hello World" and description "My Hello Contract" on Ethereum.
 - Deploy a Split contract with two recipients.
 - Deploy an ERC1155 Contract named 'Hello World' with description 'Hello badges on Ethereum'
 
@@ -30,7 +30,7 @@ Deploy published contracts
 Retrieve information about smart contracts.
 - What ERC standards are implemented by contract address 0x59325733eb952a92e069C87F0A6168b29E80627f on Ethereum?
 - What functions can I use to mint more of my contract's NFTs?
-- What is the total supply of NFTs for my contract?
+- What is the total supply of NFTs on 0x8a90CAb2b38dba80c64b7734e58Ee1dB38B8992e?
 
 ### Interact
 Query wallet balances, addresses, and token holdings.

apps/dashboard/src/app/team/[team_slug]/(team)/_components/BillingAlertBanner.stories.tsx

@@ -7,7 +7,6 @@ import {
 const meta = {
   title: "Banners/Billing Alerts",
   parameters: {
-    layout: "centered",
     nextjs: {
       appDirectory: true,
     },

apps/dashboard/src/app/team/[team_slug]/(team)/_components/TotalSponsoredCard.tsx

@@ -88,10 +88,10 @@ export async function TotalSponsoredChartCardUI({
     const filteredData = timeSeriesData.filter((d) => d.mainnet > 0);
     return (
       <div className={cn("rounded-lg border p-4 lg:p-6", className)}>
-        <h3 className="mb-1 font-semibold text-xl tracking-tight">
+        <h3 className="mb-0.5 font-semibold text-xl tracking-tight">
           {title || "Total Sponsored"}
         </h3>
-        <p className="text-muted-foreground"> {description}</p>
+        <p className="text-muted-foreground text-sm"> {description}</p>
         <BarChart
           isCurrency
           chartConfig={chartConfig}

apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx

@@ -1,7 +1,9 @@
 import { getProjects } from "@/api/projects";
-import { getTeamNebulaWaitList, getTeams } from "@/api/team";
+import { getTeams } from "@/api/team";
+import { AppFooter } from "@/components/blocks/app-footer";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { redirect } from "next/navigation";
+import { AnnouncementBanner } from "../../../../components/notices/AnnouncementBanner";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import { getAuthTokenWalletAddress } from "../../../api/lib/getAuthToken";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
@@ -37,11 +39,9 @@ export default async function TeamLayout(props: {
     })),
   );
 
-  const isOnNebulaWaitList = (await getTeamNebulaWaitList(team.slug))
-    ?.onWaitlist;
-
   return (
     <div className="flex h-full grow flex-col">
+      <AnnouncementBanner />
       <div className="bg-card">
         <TeamHeaderLoggedIn
           currentTeam={team}
@@ -71,14 +71,6 @@ export default async function TeamLayout(props: {
               path: `/team/${params.team_slug}/~/ecosystem`,
               name: "Ecosystems",
             },
-            ...(isOnNebulaWaitList
-              ? [
-                  {
-                    path: `/team/${params.team_slug}/~/nebula`,
-                    name: "Nebula",
-                  },
-                ]
-              : []),
             {
               path: `/team/${params.team_slug}/~/usage`,
               name: "Usage",
@@ -92,6 +84,7 @@ export default async function TeamLayout(props: {
       </div>
 
       <main className="flex grow flex-col">{props.children}</main>
+      <AppFooter />
     </div>
   );
 }

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { EcosystemWalletStats } from "types/analytics";
+import { EcosystemWalletUsersChartCard } from "./EcosystemWalletUsersChartCard";
+
+const meta = {
+  title: "Ecosystem/Analytics/EcosystemWalletUsersChartCard",
+  component: EcosystemWalletUsersChartCard,
+  decorators: [
+    (Story) => (
+      <div className="container max-w-7xl py-10">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof EcosystemWalletUsersChartCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const authMethods = [
+  "Email",
+  "Google",
+  "Apple",
+  "Discord",
+  "Twitter",
+  "GitHub",
+  "Facebook",
+  "Twitch",
+  "LinkedIn",
+  "TikTok",
+  "Coinbase",
+  "MetaMask",
+];
+
+function ecosystemWalletStatsStub(
+  length: number,
+  startDate = new Date(2024, 11, 1),
+): EcosystemWalletStats[] {
+  const stats: EcosystemWalletStats[] = [];
+
+  for (let i = 0; i < length; i++) {
+    const date = new Date(startDate);
+    date.setDate(date.getDate() + i);
+    const formattedDate = date.toISOString().split("T")[0] || "";
+
+    // each day, we pick between 1 and 4 auth methods
+    const authMethodsToPick = Math.floor(Math.random() * 4) + 1;
+
+    for (let j = 0; j < authMethodsToPick; j++) {
+      const authMethod =
+        authMethods[Math.floor(Math.random() * authMethods.length)];
+      stats.push({
+        date: formattedDate,
+        authenticationMethod: authMethod || "MetaMask",
+        uniqueWalletsConnected: Math.floor(Math.random() * 1000) + 1,
+      });
+    }
+  }
+
+  return stats;
+}
+
+// Empty data state
+export const EmptyData: Story = {
+  args: {
+    ecosystemWalletStats: [],
+    isPending: false,
+  },
+};
+
+// Loading state
+export const Loading: Story = {
+  args: {
+    ecosystemWalletStats: [],
+    isPending: true,
+  },
+};
+
+// 30 days of data
+export const ThirtyDaysData: Story = {
+  args: {
+    ecosystemWalletStats: ecosystemWalletStatsStub(30),
+    isPending: false,
+  },
+};
+
+// 60 days of data
+export const SixtyDaysData: Story = {
+  args: {
+    ecosystemWalletStats: ecosystemWalletStatsStub(60),
+    isPending: false,
+  },
+};
+
+// 120 days of data
+export const OneHundredTwentyDaysData: Story = {
+  args: {
+    ecosystemWalletStats: ecosystemWalletStatsStub(120),
+    isPending: false,
+  },
+};
+
+// Data with lots of authentication methods to test the "Others" category
+export const ManyAuthMethods: Story = {
+  args: {
+    ecosystemWalletStats: (() => {
+      // Generate data with 15 different auth methods to test "Others" category
+      const basicData = ecosystemWalletStatsStub(30);
+
+      return basicData.map((item, index) => ({
+        ...item,
+        authenticationMethod:
+          authMethods[index % authMethods.length] || "MetaMask",
+      }));
+    })(),
+    isPending: false,
+  },
+};
+
+// Zero values test
+export const ZeroValues: Story = {
+  args: {
+    ecosystemWalletStats: ecosystemWalletStatsStub(30).map((stat) => ({
+      ...stat,
+      uniqueWalletsConnected: 0,
+    })),
+    isPending: false,
+  },
+};

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx

@@ -1,26 +1,15 @@
 "use client";
 import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
-import {
-  EmptyChartState,
-  LoadingChartState,
-} from "components/analytics/empty-chart-state";
+import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
+import type { ChartConfig } from "@/components/ui/chart";
 import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
 import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
 import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
 import { DocLink } from "components/shared/DocLink";
-import { format } from "date-fns";
-import { formatTickerNumber } from "lib/format-utils";
+import { formatDate } from "date-fns";
 import { useMemo } from "react";
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import type { EcosystemWalletStats } from "types/analytics";
+import { formatTickerNumber } from "../../../../../../../../../../lib/format-utils";
 
 type ChartData = Record<string, number> & {
   time: string; // human readable date
@@ -47,7 +36,7 @@ export function EcosystemWalletUsersChartCard(props: {
       // if no data for current day - create new entry
       if (!chartData) {
         _chartDataMap.set(stat.date, {
-          time: format(new Date(stat.date), "MMM dd"),
+          time: stat.date,
           [authenticationMethod || defaultLabel]: stat.uniqueWalletsConnected,
         } as ChartData);
       } else if (chartData) {
@@ -114,128 +103,85 @@ export function EcosystemWalletUsersChartCard(props: {
     );
 
   return (
-    <div className="relative w-full rounded-lg border border-border bg-card p-4 md:p-6">
-      <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
-        Unique Users
-      </h3>
-      <p className="mb-3 text-muted-foreground text-sm">
-        The total number of active users in your ecosystem for each period.
-      </p>
+    <ThirdwebBarChart
+      chartClassName="aspect-[1.5] lg:aspect-[3.5]"
+      customHeader={
+        <div className="relative px-6 pt-6">
+          <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
+            Unique Users
+          </h3>
+          <p className="mb-3 text-muted-foreground text-sm">
+            The total number of active users in your ecosystem for each period.
+          </p>
 
-      <div className="top-6 right-6 mb-4 grid grid-cols-2 items-center gap-2 md:absolute md:mb-0 md:flex">
-        <ExportToCSVButton
-          className="bg-background"
-          fileName="Connect Wallets"
-          disabled={disableActions}
-          getData={async () => {
-            // Shows the number of each type of wallet connected on all dates
-            const header = ["Date", ...uniqueAuthMethods];
-            const rows = chartData.map((data) => {
-              const { time, ...rest } = data;
-              return [
-                time,
-                ...uniqueAuthMethods.map((w) => (rest[w] || 0).toString()),
-              ];
-            });
-            return { header, rows };
-          }}
+          <div className="top-6 right-6 mb-4 grid grid-cols-2 items-center gap-2 md:absolute md:mb-0 md:flex">
+            <ExportToCSVButton
+              className="bg-background"
+              fileName="Connect Wallets"
+              disabled={disableActions}
+              getData={async () => {
+                // Shows the number of each type of wallet connected on all dates
+                const header = ["Date", ...uniqueAuthMethods];
+                const rows = chartData.map((data) => {
+                  const { time, ...rest } = data;
+                  return [
+                    time,
+                    ...uniqueAuthMethods.map((w) => (rest[w] || 0).toString()),
+                  ];
+                });
+                return { header, rows };
+              }}
+            />
+          </div>
+        </div>
+      }
+      config={chartConfig}
+      data={chartData}
+      isPending={props.isPending}
+      emptyChartState={<EcosystemWalletUsersEmptyChartState />}
+      showLegend
+      hideLabel={false}
+      variant="stacked"
+      toolTipLabelFormatter={(_v, item) => {
+        if (Array.isArray(item)) {
+          const time = item[0].payload.time as number;
+          return formatDate(new Date(time), "MMM d, yyyy");
+        }
+        return undefined;
+      }}
+      toolTipValueFormatter={(value) => formatTickerNumber(Number(value))}
+    />
+  );
+}
+
+function EcosystemWalletUsersEmptyChartState() {
+  return (
+    <div className="flex flex-col items-center justify-center px-4">
+      <span className="mb-6 text-center text-lg">
+        Connect users to your app with social logins
+      </span>
+      <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
+        <DocLink
+          link="https://portal.thirdweb.com/typescript/v5/ecosystemWallet"
+          label="TypeScript"
+          icon={TypeScriptIcon}
+        />
+        <DocLink
+          link="https://portal.thirdweb.com/react/v5/ecosystem-wallet/get-started"
+          label="React"
+          icon={ReactIcon}
+        />
+        <DocLink
+          link="https://portal.thirdweb.com/react/v5/ecosystem-wallet/get-started"
+          label="React Native"
+          icon={ReactIcon}
+        />
+        <DocLink
+          link="https://portal.thirdweb.com/unity/v5/wallets/ecosystem-wallet"
+          label="Unity"
+          icon={UnityIcon}
         />
       </div>
-
-      {/* Chart */}
-      <ChartContainer
-        config={chartConfig}
-        className="h-[250px] w-full md:h-[350px]"
-      >
-        {props.isPending ? (
-          <LoadingChartState />
-        ) : chartData.length === 0 ||
-          uniqueAuthMethods.every((authMethod) =>
-            chartData.every((data) => data[authMethod] === 0),
-          ) ? (
-          <EmptyChartState>
-            <div className="flex flex-col items-center justify-center px-4">
-              <span className="mb-6 text-center text-lg">
-                Connect users to your app with social logins
-              </span>
-              <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
-                <DocLink
-                  link="https://portal.thirdweb.com/typescript/v5/ecosystemWallet"
-                  label="TypeScript"
-                  icon={TypeScriptIcon}
-                />
-                <DocLink
-                  link="https://portal.thirdweb.com/react/v5/ecosystem-wallet/get-started"
-                  label="React"
-                  icon={ReactIcon}
-                />
-                <DocLink
-                  link="https://portal.thirdweb.com/react/v5/ecosystem-wallet/get-started"
-                  label="React Native"
-                  icon={ReactIcon}
-                />
-                <DocLink
-                  link="https://portal.thirdweb.com/unity/v5/wallets/ecosystem-wallet"
-                  label="Unity"
-                  icon={UnityIcon}
-                />
-              </div>
-            </div>
-          </EmptyChartState>
-        ) : (
-          <BarChart
-            accessibilityLayer
-            data={chartData}
-            margin={{
-              top: 20,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-
-            <XAxis
-              dataKey="time"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-            />
-
-            <YAxis
-              dataKey={(data) =>
-                Object.entries(data)
-                  .filter(([key]) => key !== "time")
-                  .map(([, value]) => value)
-                  .reduce((acc, current) => Number(acc) + Number(current), 0)
-              }
-              tickLine={false}
-              axisLine={false}
-              tickFormatter={(value) => formatTickerNumber(value)}
-            />
-
-            <ChartTooltip
-              cursor={true}
-              content={
-                <ChartTooltipContent
-                  valueFormatter={(value) => formatTickerNumber(Number(value))}
-                />
-              }
-            />
-            <ChartLegend content={<ChartLegendContent />} />
-            {uniqueAuthMethods.map((authMethod) => {
-              return (
-                <Bar
-                  key={authMethod}
-                  dataKey={authMethod}
-                  fill={chartConfig[authMethod]?.color}
-                  radius={4}
-                  stackId="a"
-                  strokeWidth={1}
-                  className="stroke-background"
-                />
-              );
-            })}
-          </BarChart>
-        )}
-      </ChartContainer>
     </div>
   );
 }

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/Summary.tsx

@@ -1,4 +1,4 @@
-import { Stat } from "components/analytics/stat";
+import { StatCard } from "components/analytics/stat";
 import { ActivityIcon, UserIcon } from "lucide-react";
 import type { EcosystemWalletStats } from "types/analytics";
 
@@ -28,15 +28,17 @@ export function EcosystemWalletsSummary(props: {
 
   return (
     <div className="grid grid-cols-2 gap-4 lg:gap-6">
-      <Stat
+      <StatCard
         label="Total Users"
         value={allTimeStats?.uniqueWalletsConnected || 0}
         icon={ActivityIcon}
+        isPending={false}
       />
-      <Stat
+      <StatCard
         label="Monthly Active Users"
         value={monthlyStats?.uniqueWalletsConnected || 0}
         icon={UserIcon}
+        isPending={false}
       />
     </div>
   );