Dashboard Project sidebar changes

Author: MananTank

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

@@ -9,6 +9,7 @@ export type SidebarBaseLink = {
   label: React.ReactNode;
   exactMatch?: boolean;
   icon?: React.FC<{ className?: string }>;
+  isActive?: (pathname: string) => boolean;
 };
 
 export type SidebarLink =

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

@@ -123,6 +123,7 @@ function RenderSidebarGroup(props: {
                   className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent"
                   exactMatch={link.exactMatch}
                   href={link.href}
+                  isActive={link.isActive}
                   onClick={() => {
                     sidebar.setOpenMobile(false);
                   }}

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

@@ -17,8 +17,6 @@ function Story() {
           description="Upgrade to increase limits and access advanced features."
           icon={<RocketIcon className="size-5" />}
           title="Unlock more with thirdweb"
-          trackingCategory="storybook"
-          trackingLabel="green"
         />
       </BadgeContainer>
 
@@ -33,8 +31,6 @@ function Story() {
           description="Add additional space to your account."
           icon={<StarIcon className="size-5" />}
           title="Need more storage?"
-          trackingCategory="storybook"
-          trackingLabel="blue"
         />
       </BadgeContainer>
 
@@ -48,8 +44,6 @@ function Story() {
           }}
           description="Get early access to experimental features."
           title="Join the beta"
-          trackingCategory="storybook"
-          trackingLabel="purple"
         />
       </BadgeContainer>
     </div>

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

@@ -44,8 +44,6 @@ type UpsellBannerCardProps = {
     target?: "_blank";
     link: string;
   };
-  trackingCategory: string;
-  trackingLabel: string;
   accentColor?: keyof typeof ACCENT;
   icon?: React.ReactNode;
 };

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

@@ -10,15 +10,18 @@ export type NavButtonProps = {
   href: string;
   exactMatch?: boolean;
   onClick?: () => void;
+  isActive?: (pathname: string) => boolean;
 };
 
 export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
   const pathname = usePathname();
-  const isActive = pathname
-    ? props.exactMatch
-      ? pathname === props.href
-      : pathname.startsWith(props.href)
-    : false;
+  const isActive = props.isActive
+    ? props.isActive(pathname)
+    : pathname
+      ? props.exactMatch
+        ? pathname === props.href
+        : pathname.startsWith(props.href)
+      : false;
   return (
     <Link
       className={cn(props.className, isActive && props.activeClassName)}

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

@@ -50,12 +50,10 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
               icon: <ExternalLinkIcon className="size-4" />,
               link: `/${chainSlug}/${contract.address}`,
               target: "_blank",
-              text: "View asset page",
+              text: "View token page",
             }}
-            description="A public page is available for this contract for anyone to buy this asset"
-            title="Public asset page available"
-            trackingCategory="erc20-contract"
-            trackingLabel="view-asset-page"
+            description="A public page is available for this contract for anyone to buy this token"
+            title="Public token page available"
           />
         )}
 

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

@@ -26,8 +26,6 @@ export function FreePlanUpsellBannerUI(props: {
       description="Upgrade to increase limits and access advanced features."
       icon={<RocketIcon className="size-5" />}
       title="Unlock more with thirdweb"
-      trackingCategory="billingBanner"
-      trackingLabel="freePlan_viewPlans"
     />
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx

@@ -62,14 +62,14 @@ export function Cards(props: {
       />
 
       <CardLink
-        description="Import tokens or NFTs you own to the project"
+        description="Import coins or NFTs you own to the project"
         href={undefined}
         icon={ArrowDownToLineIcon}
         onClick={() => {
           reportAssetImportStarted();
           setImportModalOpen(true);
         }}
-        title="Import Existing Asset"
+        title="Import Existing Token"
       />
     </div>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/page.tsx

@@ -53,9 +53,9 @@ export default async function Page(props: {
         />
 
         <div className="mt-10 mb-3">
-          <h2 className="font-semibold text-2xl tracking-tight">Your assets</h2>
+          <h2 className="font-semibold text-2xl tracking-tight">Your Tokens</h2>
           <p className="text-muted-foreground">
-            List of all assets created or imported into this project
+            List of all tokens created or imported into this project
           </p>
         </div>
 
@@ -79,7 +79,7 @@ function AssetsHeader() {
     <div className="border-b">
       <div className="container max-w-7xl py-10">
         <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
-          Assets
+          Tokens
         </h1>
         <p className="text-muted-foreground">
           Create and Manage tokens for your project

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx

@@ -5,6 +5,7 @@ import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
 import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
 import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
 import {
+  ArrowLeftRightIcon,
   ChevronRightIcon,
   CircleAlertIcon,
   ExternalLinkIcon,
@@ -15,9 +16,8 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { CodeServer } from "@/components/ui/code/code.server";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { ContractIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/ContractIcon";
-import { EngineIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
 import { InsightIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/InsightIcon";
-import { NebulaIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/NebulaIcon";
+import { PayIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/PayIcon";
 import { ClientIDSection } from "./ClientIDSection";
 import { IntegrateAPIKeyCodeTabs } from "./IntegrateAPIKeyCodeTabs";
 import { SecretKeySection } from "./SecretKeySection";
@@ -230,39 +230,34 @@ function ProductsSection(props: { teamSlug: string; projectSlug: string }) {
     description: string;
     href: string;
     icon: React.FC<{ className?: string }>;
-    trackingLabel: string;
   }> = [
     {
       description:
         "Scale your application with a backend server to read, write, and deploy contracts at production-grade.",
-      href: `/team/${props.teamSlug}/${props.projectSlug}/engine`,
-      icon: EngineIcon,
-      title: "Engine",
-      trackingLabel: "engine",
+      href: `/team/${props.teamSlug}/${props.projectSlug}/transactions`,
+      icon: ArrowLeftRightIcon,
+      title: "Transactions",
     },
     {
       description:
         "Deploy your own contracts or leverage existing solutions for onchain implementation",
       href: `/team/${props.teamSlug}/${props.projectSlug}/contracts`,
       icon: ContractIcon,
       title: "Contracts",
-      trackingLabel: "contracts",
     },
     {
       description:
         "Add indexing capabilities to retrieve real-time onchain data",
       href: `/team/${props.teamSlug}/${props.projectSlug}/insight`,
       icon: InsightIcon,
       title: "Insight",
-      trackingLabel: "insight",
     },
     {
       description:
-        "Integrate a blockchain AI model to improve your users insight into your application and the blockchain",
-      href: `/team/${props.teamSlug}/${props.projectSlug}/nebula`,
-      icon: NebulaIcon,
-      title: "Nebula",
-      trackingLabel: "nebula",
+        "Bridge, swap, and purchase cryptocurrencies with any fiat options or tokens via cross-chain routing",
+      href: `/team/${props.teamSlug}/${props.projectSlug}/universal-bridge`,
+      icon: PayIcon,
+      title: "Universal Bridge",
     },
   ];
 
@@ -287,7 +282,6 @@ function ProductsSection(props: { teamSlug: string; projectSlug: string }) {
             icon={product.icon}
             key={product.title}
             title={product.title}
-            trackingLabel={product.trackingLabel}
           />
         ))}
       </section>
@@ -300,7 +294,6 @@ function ProductCard(props: {
   description: string;
   href: string;
   icon: React.FC<{ className?: string }>;
-  trackingLabel: string;
 }) {
   return (
     <div className="relative flex flex-col rounded-lg border bg-card p-4 hover:border-active-border">

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx

@@ -1,27 +1,28 @@
 "use client";
 import {
+  ArrowLeftRightIcon,
   BellIcon,
   BookTextIcon,
   BoxIcon,
   CoinsIcon,
   HomeIcon,
+  LockIcon,
   SettingsIcon,
   WalletIcon,
 } from "lucide-react";
 import { FullWidthSidebarLayout } from "@/components/blocks/SidebarLayout";
 import { Badge } from "@/components/ui/badge";
 import { ContractIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/ContractIcon";
-import { EngineIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
 import { InsightIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/InsightIcon";
-import { NebulaIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/NebulaIcon";
 import { PayIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/PayIcon";
 import { SmartAccountIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/SmartAccountIcon";
 
 export function ProjectSidebarLayout(props: {
   layoutPath: string;
+  engineLinkType: "cloud" | "dedicated";
   children: React.ReactNode;
 }) {
-  const { layoutPath, children } = props;
+  const { layoutPath, engineLinkType, children } = props;
 
   return (
     <FullWidthSidebarLayout
@@ -33,17 +34,17 @@ export function ProjectSidebarLayout(props: {
           label: "Overview",
         },
         {
-          href: `${layoutPath}/connect/in-app-wallets`,
+          href: `${layoutPath}/wallets`,
           icon: WalletIcon,
-          label: "In-App Wallets",
+          label: "Wallets",
         },
         {
-          href: `${layoutPath}/connect/account-abstraction`,
+          href: `${layoutPath}/account-abstraction`,
           icon: SmartAccountIcon,
           label: "Account Abstraction",
         },
         {
-          href: `${layoutPath}/connect/universal-bridge`,
+          href: `${layoutPath}/universal-bridge`,
           icon: PayIcon,
           label: "Universal Bridge",
         },
@@ -53,29 +54,40 @@ export function ProjectSidebarLayout(props: {
           label: "Contracts",
         },
         {
-          href: `${layoutPath}/assets`,
+          href: `${layoutPath}/tokens`,
           icon: CoinsIcon,
           label: (
             <span className="flex items-center gap-2">
-              Assets <Badge>New</Badge>
+              Tokens <Badge>New</Badge>
             </span>
           ),
         },
         {
-          href: `${layoutPath}/engine`,
-          icon: EngineIcon,
-          label: "Engine",
+          href:
+            engineLinkType === "cloud"
+              ? `${layoutPath}/transactions`
+              : `${layoutPath}/engine/dedicated`,
+          icon: ArrowLeftRightIcon,
+          isActive: (pathname) => {
+            return (
+              pathname.startsWith(`${layoutPath}/transactions`) ||
+              pathname.startsWith(`${layoutPath}/engine/dedicated`)
+            );
+          },
+          label: "Transactions",
         },
         {
           href: `${layoutPath}/insight`,
           icon: InsightIcon,
           label: "Insight",
         },
         {
-          href: `${layoutPath}/nebula`,
-          icon: NebulaIcon,
-          label: "Nebula",
+          href: `${layoutPath}/vault`,
+          icon: LockIcon,
+          label: "Vault",
         },
+      ]}
+      footerSidebarLinks={[
         {
           href: `${layoutPath}/webhooks`,
           icon: BellIcon,
@@ -85,8 +97,6 @@ export function ProjectSidebarLayout(props: {
             </span>
           ),
         },
-      ]}
-      footerSidebarLinks={[
         {
           href: `${layoutPath}/settings`,
           icon: SettingsIcon,

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/_components/header.tsx

@@ -4,7 +4,7 @@ export async function InAppWalletsHeader() {
   return (
     <div className="">
       <h1 className="mb-2 font-semibold text-2xl tracking-tighter lg:text-3xl">
-        In-App Wallets
+        Wallets
       </h1>
       <p className="max-w-2xl text-muted-foreground text-sm leading-relaxed">
         A wallet infrastructure that enables apps to create, manage, and control

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/_constants.ts

@@ -4,7 +4,6 @@ import { getProject } from "@/api/projects";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { getAuthToken } from "../../../../../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../../../../../login/loginRedirect";
-import { TRACKING_CATEGORY } from "../_constants";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -35,7 +34,6 @@ export default async function Page(props: {
       authToken={authToken}
       client={client}
       projectClientId={project.publishableKey}
-      trackingCategory={TRACKING_CATEGORY}
     />
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/users/page.tsx

@@ -5,9 +5,9 @@ import { useMemo, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import type { Project } from "@/api/projects";
 import { Button } from "@/components/ui/button";
+import { CreateVaultAccountButton } from "../../../vault/components/create-vault-account.client";
 import CreateServerWallet from "../server-wallets/components/create-server-wallet.client";
 import type { Wallet } from "../server-wallets/wallet-table/types";
-import CreateVaultAccountButton from "../vault/components/create-vault-account.client";
 import { SendTestTransaction } from "./send-test-tx.client";
 import { deleteUserAccessToken } from "./utils";
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/ftux.client.tsx

@@ -184,7 +184,7 @@ function EmptyChartContent(props: {
             <Button
               onClick={() => {
                 router.push(
-                  `/team/${props.teamSlug}/${props.project.slug}/engine/cloud/vault`,
+                  `/team/${props.teamSlug}/${props.project.slug}/vault`,
                 );
               }}
               variant="primary"