[TOOL-4842] Dashboard navigation changes (#7395)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on restructuring and renaming various components and pages within the application, particularly transitioning terminology from "assets" to "tokens" and reorganizing file paths for clarity. It also includes the deletion of unused files and adjustments in imports.

### Detailed summary
- Deleted unused files related to `nebula` and `in-app-wallets`.
- Renamed components and pages from "assets" to "tokens".
- Updated file paths to reflect the new structure.
- Adjusted imports for consistency with new paths.
- Enhanced UI elements for better user experience.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/vault/components/create-vault-account.client.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/layout.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/ftux.client.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/layout.tsx`, `apps/dashboard/redirects.js`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/contract-webhooks/contract-webhooks-page.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/components/try-it-out.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/layout.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/key-management.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx`, `apps/dashboard/src/components/pay/PayAnalytics/PayEmbedFTUX.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table-ui.client.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx`, `packages/nebula/package.json`, `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a Vault section for secure key management, including a new layout and key management UI.
  - Added contract webhooks management with improved pages and navigation.

- **Improvements**
  - Renamed "Assets" to "Tokens" and "In-App Wallets" to "Wallets" throughout the dashboard.
  - Updated sidebar navigation labels, icons, and link destinations for clarity and consistency.
  - Enhanced "Transactions" section, replacing previous "Engine" references and updating related routes and UI.
  - Refined onboarding and FTUX experiences with clearer terminology and improved instructional content.
  - Improved contract import and table UI with updated labels and empty state messages.
  - Enhanced Pay analytics with richer code examples and a more flexible FTUX component.
  - Streamlined redirects and updated URL paths to remove deprecated segments for smoother navigation.
  - Improved pagination display and active link detection in navigation components.
  - Adjusted layout spacing, button sizes, and typography for improved visual consistency.
  - Updated footer and sidebar styling for better user experience.

- **Bug Fixes**
  - Fixed various redirect and navigation paths to align with new route structures.
  - Improved handling of pagination and active link states in navigation components.

- **Removals**
  - Removed Nebula analytics pages, components, and related tracking utilities.
  - Deleted unused tracking properties and constants.
  - Removed outdated Vault key management component replaced by new implementation.

- **Documentation**
  - Updated terminology in documentation and UI to reflect the shift from "assets" to "tokens".
  - Revised analytics event descriptions to use "token page" terminology.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/redirects.js

@@ -62,6 +62,56 @@ const legacyDashboardToTeamRedirects = [
   },
 ];
 
+const projectRoute = "/team/:team_slug/:project_slug";
+
+const projectPageRedirects = [
+  {
+    destination: `${projectRoute}/universal-bridge/:path*`,
+    permanent: false,
+    source: `${projectRoute}/connect/pay/:path*`,
+  },
+  {
+    destination: `${projectRoute}/universal-bridge/:path*`,
+    permanent: false,
+    source: `${projectRoute}/connect/universal-bridge/:path*`,
+  },
+  {
+    destination: `${projectRoute}/account-abstraction/:path*`,
+    permanent: false,
+    source: `${projectRoute}/connect/account-abstraction/:path*`,
+  },
+  {
+    destination: `${projectRoute}/wallets/:path*`,
+    permanent: false,
+    source: `${projectRoute}/connect/in-app-wallets/:path*`,
+  },
+  {
+    destination: `${projectRoute}/vault/:path*`,
+    permanent: false,
+    source: `${projectRoute}/engine/cloud/vault/:path*`,
+  },
+  {
+    destination: `${projectRoute}/transactions/:path*`,
+    permanent: false,
+    source: `${projectRoute}/engine/cloud/:path*`,
+  },
+  {
+    destination: `${projectRoute}/tokens/:path*`,
+    permanent: false,
+    source: `${projectRoute}/assets/:path*`,
+  },
+  {
+    destination: projectRoute,
+    permanent: false,
+    source: `${projectRoute}/nebula/:path*`,
+  },
+  {
+    source: `${projectRoute}/connect/analytics`,
+    destination: `${projectRoute}`,
+    permanent: false,
+  },
+];
+
 /** @type {import('next').NextConfig['redirects']} */
 async function redirects() {
   return [
@@ -326,14 +376,6 @@ async function redirects() {
       permanent: false,
       source: "/unlimited-wallets",
     },
-    // pay > universal-bridge redirect
-    {
-      destination:
-        "/team/:team_slug/:project_slug/connect/universal-bridge/:path*",
-      permanent: false,
-      source: "/team/:team_slug/:project_slug/connect/pay/:path*",
-    },
-
     // all /learn/tutorials (and sub-routes) -> /learn/guides
     {
       destination: "/learn/guides/:path*",
@@ -382,8 +424,8 @@ async function redirects() {
       permanent: false,
       source: "/engine",
     },
-
     ...legacyDashboardToTeamRedirects,
+    ...projectPageRedirects,
   ];
 }
 

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

@@ -10,7 +10,7 @@ import type { Team } from "../api/team";
  * ### Why do we need to report this event?
  * - To track the number of contracts deployed
  * - To track the number of contracts deployed on each chain
- * - To track if the contract was deployed on the asset page vs on the deploy page
+ * - To track if the contract was deployed on the token page vs on the deploy page
  *
  * ### Who is responsible for this event?
  * @jnsdls
@@ -226,7 +226,7 @@ type AssetContractType = "DropERC20" | "DropERC1155" | "DropERC721";
 
 /**
  * ### Why do we need to report this event?
- * - To track number of successful asset purchases from the asset page
+ * - To track number of successful asset purchases from the token page
  * - To track which asset and contract types are being purchased the most
  *
  * ### Who is responsible for this event?
@@ -246,7 +246,7 @@ export function reportAssetBuySuccessful(properties: {
 
 /**
  * ### Why do we need to report this event?
- * - To track number of failed asset purchases from the asset page
+ * - To track number of failed asset purchases from the token page
  * - To track the errors that users encounter when trying to purchase an asset
  *
  * ### Who is responsible for this event?

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]/_layout/primary-dashboard-button.tsx

@@ -90,7 +90,7 @@ export const PrimaryDashboardButton: React.FC<AddToDashboardCardProps> = ({
           rel="noopener noreferrer"
           target="_blank"
         >
-          View Asset Page <ExternalLinkIcon className="size-3.5" />
+          View Token Page <ExternalLinkIcon className="size-3.5" />
         </Link>
       </Button>
     );

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)/account/contracts/DeployedContractsPageHeader.tsx

@@ -15,7 +15,7 @@ export function DeployedContractsPageHeader(props: {
   const [importModalOpen, setImportModalOpen] = useState(false);
 
   return (
-    <div className="border-b">
+    <div>
       <ImportModal
         client={props.client}
         isOpen={importModalOpen}
@@ -27,24 +27,28 @@ export function DeployedContractsPageHeader(props: {
         type="contract"
       />
 
-      <div className="container flex max-w-7xl flex-col gap-3 py-10 lg:flex-row lg:items-center lg:justify-between">
+      <div className="container flex max-w-7xl flex-col gap-3 pt-6 pb-5 lg:flex-row lg:items-center lg:justify-between">
         <div>
-          <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
+          <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
             Contracts
           </h1>
+          <p className="text-muted-foreground text-sm">
+            Deploy and manage contracts for your project
+          </p>
         </div>
         <div className="flex gap-3 [&>*]:grow">
           <Button
-            className="gap-2 bg-card"
+            className="gap-1.5 bg-card"
             onClick={() => {
               setImportModalOpen(true);
             }}
+            size="sm"
             variant="outline"
           >
-            <DownloadIcon className="size-4" />
+            <DownloadIcon className="size-4 text-muted-foreground" />
             Import contract
           </Button>
-          <Button asChild className="gap-2">
+          <Button asChild className="gap-1.5" size="sm">
             <Link href="/explore">
               <PlusIcon className="size-4" />
               Deploy contract

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

@@ -3,7 +3,6 @@ import { Suspense } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { ClientOnly } from "@/components/blocks/client-only";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { DeployedContractsPageHeader } from "../DeployedContractsPageHeader";
 import { DeployViaCLIOrImportCard } from "./DeployViaCLIOrImportCard";
 import { getSortedDeployedContracts } from "./getSortedDeployedContracts";
 
@@ -16,24 +15,16 @@ export function DeployedContractsPage(props: {
   projectSlug: string;
 }) {
   return (
-    <div className="flex grow flex-col">
-      <DeployedContractsPageHeader
+    <div className="container flex max-w-7xl grow flex-col">
+      <Suspense fallback={<Loading />}>
+        <DeployedContractsPageAsync {...props} />
+      </Suspense>
+      <div className="h-8" />
+      <DeployViaCLIOrImportCard
         client={props.client}
         projectId={props.projectId}
         teamId={props.teamId}
       />
-      <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
-          client={props.client}
-          projectId={props.projectId}
-          teamId={props.teamId}
-        />
-      </div>
     </div>
   );
 }

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)/connect/account-abstraction/AAFooterSection.tsx renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/AAFooterSection.tsx

@@ -1,4 +1,4 @@
-import { FooterLinksSection } from "../../components/footer/FooterLinksSection";
+import { FooterLinksSection } from "../components/footer/FooterLinksSection";
 
 export function AAFooter() {
   return (

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/AccountAbstractionPage.tsx renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/AccountAbstractionPage.tsx

@@ -17,7 +17,7 @@ export function AccountAbstractionLayout(props: {
   children: React.ReactNode;
   hasSmartWalletsWithoutBilling: boolean;
 }) {
-  const smartWalletsLayoutSlug = `/team/${props.teamSlug}/${props.projectSlug}/connect/account-abstraction`;
+  const smartWalletsLayoutSlug = `/team/${props.teamSlug}/${props.projectSlug}/account-abstraction`;
 
   return (
     <div className="flex grow flex-col">
@@ -37,7 +37,7 @@ export function AccountAbstractionLayout(props: {
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                Learn more about Account Abstraction
+                Learn more
               </UnderlineLink>
             </p>
           </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/factories/page.tsx renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/factories/page.tsx

@@ -1,3 +1,6 @@
+import { getSortedDeployedContracts } from "@app/account/contracts/_components/getSortedDeployedContracts";
+import { getAuthToken } from "@app/api/lib/getAuthToken";
+import { loginRedirect } from "@app/login/loginRedirect";
 import { DefaultFactoriesSection } from "components/smart-wallets/AccountFactories";
 import { FactoryContracts } from "components/smart-wallets/AccountFactories/factory-contracts";
 import { PlusIcon } from "lucide-react";
@@ -14,9 +17,6 @@ import { Button } from "@/components/ui/button";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { getSortedDeployedContracts } from "../../../../../../../account/contracts/_components/getSortedDeployedContracts";
-import { getAuthToken } from "../../../../../../../api/lib/getAuthToken";
-import { loginRedirect } from "../../../../../../../login/loginRedirect";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -31,7 +31,7 @@ export default async function Page(props: {
 
   if (!authToken) {
     loginRedirect(
-      `/team/${params.team_slug}/${params.project_slug}/connect/account-abstraction/factories`,
+      `/team/${params.team_slug}/${params.project_slug}/account-abstraction/factories`,
     );
   }
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/layout.tsx renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/layout.tsx

@@ -1,3 +1,4 @@
+import { getAuthToken } from "@app/api/lib/getAuthToken";
 import {
   getLastNDaysRange,
   type Range,
@@ -10,7 +11,6 @@ import { getUserOpUsage } from "@/api/analytics";
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
 import { searchParamLoader } from "./search-params";
 
 interface PageParams {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/page.tsx renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/page.tsx

@@ -1,3 +1,5 @@
+import { getAuthToken } from "@app/api/lib/getAuthToken";
+import { getValidTeamPlan } from "@app/team/components/TeamHeader/getValidTeamPlan";
 import { AccountAbstractionSettingsPage } from "components/smart-wallets/SponsorshipPolicies";
 import { CircleAlertIcon } from "lucide-react";
 import { redirect } from "next/navigation";
@@ -7,8 +9,6 @@ import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import { getAuthToken } from "../../../../../../../api/lib/getAuthToken";
-import { getValidTeamPlan } from "../../../../../../components/TeamHeader/getValidTeamPlan";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;