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