[TOOL-4892] Dashboard Project navigation updates

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

@@ -15,8 +15,6 @@ function Story() {
             icon: <ArrowRightIcon className="size-4" />,
             link: "#",
           }}
-          trackingCategory="storybook"
-          trackingLabel="green"
           icon={<RocketIcon className="size-5" />}
           accentColor="green"
         />
@@ -31,8 +29,6 @@ function Story() {
             icon: <ArrowRightIcon className="size-4" />,
             link: "#",
           }}
-          trackingCategory="storybook"
-          trackingLabel="blue"
           icon={<StarIcon className="size-5" />}
           accentColor="blue"
         />
@@ -47,8 +43,6 @@ function Story() {
             icon: <ArrowRightIcon className="size-4" />,
             link: "#",
           }}
-          trackingCategory="storybook"
-          trackingLabel="purple"
           accentColor="purple"
         />
       </BadgeContainer>

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/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx

@@ -53,8 +53,6 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
               target: "_blank",
               link: `/${chainSlug}/${contract.address}`,
             }}
-            trackingCategory="erc20-contract"
-            trackingLabel="view-asset-page"
             accentColor="blue"
           />
         )}

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

@@ -24,8 +24,6 @@ export function FreePlanUpsellBannerUI(props: {
           props.highlightPlan || "growth"
         }`,
       }}
-      trackingCategory="billingBanner"
-      trackingLabel="freePlan_viewPlans"
       icon={<RocketIcon className="size-5" />}
       accentColor="green"
     />

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

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

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

@@ -9,15 +9,15 @@ 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,
 } from "lucide-react";
 import Link from "next/link";
 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";
@@ -233,39 +233,34 @@ function ProductsSection(props: {
     description: string;
     href: string;
     icon: React.FC<{ className?: string }>;
-    trackingLabel: string;
   }> = [
     {
-      title: "Engine",
+      title: "Transactions",
       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,
-      trackingLabel: "engine",
+      href: `/team/${props.teamSlug}/${props.projectSlug}/transactions`,
+      icon: ArrowLeftRightIcon,
     },
     {
       title: "Contracts",
       description:
         "Deploy your own contracts or leverage existing solutions for onchain implementation",
       href: `/team/${props.teamSlug}/${props.projectSlug}/contracts`,
       icon: ContractIcon,
-      trackingLabel: "contracts",
     },
     {
       title: "Insight",
       description:
         "Add indexing capabilities to retrieve real-time onchain data",
       href: `/team/${props.teamSlug}/${props.projectSlug}/insight`,
       icon: InsightIcon,
-      trackingLabel: "insight",
     },
     {
-      title: "Nebula",
+      title: "Universal Bridge",
       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,
-      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,
     },
   ];
 
@@ -290,7 +285,6 @@ function ProductsSection(props: {
             description={product.description}
             href={product.href}
             icon={product.icon}
-            trackingLabel={product.trackingLabel}
           />
         ))}
       </section>
@@ -303,7 +297,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

@@ -2,18 +2,18 @@
 import { FullWidthSidebarLayout } from "@/components/blocks/SidebarLayout";
 import { Badge } from "@/components/ui/badge";
 import {
+  ArrowLeftRightIcon,
   BellIcon,
   BookTextIcon,
   BoxIcon,
   CoinsIcon,
   HomeIcon,
+  LockIcon,
   SettingsIcon,
   WalletIcon,
 } from "lucide-react";
 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";
 
@@ -33,7 +33,7 @@ export function ProjectSidebarLayout(props: {
           icon: HomeIcon,
         },
         {
-          label: "In-App Wallets",
+          label: "Wallets",
           href: `${layoutPath}/connect/in-app-wallets`,
           icon: WalletIcon,
         },
@@ -53,29 +53,31 @@ export function ProjectSidebarLayout(props: {
           icon: ContractIcon,
         },
         {
-          href: `${layoutPath}/assets`,
+          href: `${layoutPath}/tokens`,
           label: (
             <span className="flex items-center gap-2">
-              Assets <Badge>New</Badge>
+              Tokens <Badge>New</Badge>
             </span>
           ),
           icon: CoinsIcon,
         },
         {
           href: `${layoutPath}/engine`,
-          label: "Engine",
-          icon: EngineIcon,
+          label: "Transactions",
+          icon: ArrowLeftRightIcon,
         },
         {
           href: `${layoutPath}/insight`,
           label: "Insight",
           icon: InsightIcon,
         },
         {
-          href: `${layoutPath}/nebula`,
-          label: "Nebula",
-          icon: NebulaIcon,
+          href: `${layoutPath}/vault`,
+          label: "Vault",
+          icon: LockIcon,
         },
+      ]}
+      footerSidebarLinks={[
         {
           href: `${layoutPath}/webhooks`,
           label: (
@@ -85,8 +87,6 @@ export function ProjectSidebarLayout(props: {
           ),
           icon: BellIcon,
         },
-      ]}
-      footerSidebarLinks={[
         {
           href: `${layoutPath}/settings`,
           label: "Project Settings",

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/users/page.tsx

@@ -4,7 +4,6 @@ import { InAppWalletUsersPageContent } from "components/embedded-wallets/Users";
 import { redirect } from "next/navigation";
 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 }>;
@@ -33,7 +32,6 @@ export default async function Page(props: {
   return (
     <InAppWalletUsersPageContent
       projectClientId={project.publishableKey}
-      trackingCategory={TRACKING_CATEGORY}
       authToken={authToken}
       client={client}
     />

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

@@ -5,9 +5,9 @@ import { type Step, StepsCard } from "components/dashboard/StepsCard";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
+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/tx-chart/tx-chart-ui.tsx

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

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

@@ -35,12 +35,12 @@ function TransactionsLayout(props: {
           <div className="flex flex-row items-center justify-between">
             <div className="flex flex-col">
               <h1 className="mb-0.5 flex items-center gap-2 font-semibold text-3xl tracking-tight">
-                Engine{" "}
+                Transactions{" "}
                 <Badge
                   variant="success"
                   className="mt-0.5 flex items-center gap-2 text-sm"
                 >
-                  <EngineIcon className="size-4" /> Cloud
+                  <EngineIcon className="size-4" /> Engine Cloud
                 </Badge>
                 <Badge
                   variant="outline"
@@ -85,10 +85,6 @@ function TransactionsLayout(props: {
               name: "Server Wallets",
               path: `${engineLayoutSlug}/server-wallets`,
             },
-            {
-              name: "Vault",
-              path: `${engineLayoutSlug}/vault`,
-            },
           ]}
         />
       </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/components/create-server-wallet.client.tsx

@@ -86,9 +86,7 @@ export default function CreateServerWallet(props: {
 
   const handleCreateServerWallet = async () => {
     if (!props.managementAccessToken) {
-      router.push(
-        `/team/${props.teamSlug}/${props.project.slug}/engine/cloud/vault`,
-      );
+      router.push(`/team/${props.teamSlug}/${props.project.slug}/vault`);
     } else {
       await createEoaMutation.mutateAsync({
         managementAccessToken: props.managementAccessToken,
@@ -106,9 +104,7 @@ export default function CreateServerWallet(props: {
         onClick={() =>
           props.managementAccessToken
             ? setModalOpen(true)
-            : router.push(
-                `/team/${props.teamSlug}/${props.project.slug}/engine/cloud/vault`,
-              )
+            : router.push(`/team/${props.teamSlug}/${props.project.slug}/vault`)
         }
         className="flex flex-row items-center gap-2"
       >