[TOOL-4842] Dashboard navigation changes

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 → 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 → 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 → 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/page.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/page.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/settings/page.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/settings/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 }>;