Add Unlimited wallets Banner, Add Team & Legacy dashboard links in headers

Author: MananTank

apps/dashboard/src/app/(dashboard)/layout.tsx

@@ -1,13 +1,11 @@
 import { AppFooter } from "@/components/blocks/app-footer";
 import { ErrorProvider } from "../../contexts/error-handler";
-import { TryTeamsUIBanner } from "../components/DashboardTypeBanner";
 import { DashboardHeader } from "../components/Header/DashboardHeader";
 
 export default function DashboardLayout(props: { children: React.ReactNode }) {
   return (
     <ErrorProvider>
       <div className="flex min-h-screen flex-col bg-background">
-        <TryTeamsUIBanner />
         <DashboardHeader />
         <main className="grow">{props.children}</main>
         <AppFooter />

apps/dashboard/src/app/account/layout.tsx

@@ -4,7 +4,6 @@ import { DashboardTypeCookieSetter } from "@/components/DashboardTypeCookieSette
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
 import { AppFooter } from "@/components/blocks/app-footer";
 import type React from "react";
-import { TeamsUIBanner } from "../components/DashboardTypeBanner";
 import { TWAutoConnect } from "../components/autoconnect";
 import { AccountHeader } from "./components/AccountHeader";
 
@@ -13,7 +12,6 @@ export default async function AccountLayout(props: {
 }) {
   return (
     <div className="flex min-h-screen flex-col bg-background">
-      <TeamsUIBanner />
       <div className="flex grow flex-col">
         <HeaderAndNav />
         <div className="border-border border-b py-10">

apps/dashboard/src/app/components/DashboardTypeBanner.tsx

@@ -1,4 +1,5 @@
 import { NavLink } from "@/components/ui/NavLink";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import { CmdKSearch } from "components/cmd-k-search";
@@ -25,6 +26,19 @@ export const DashboardHeader: React.FC = () => {
 
         {/* Right */}
         <div className="flex items-center gap-2">
+          <NavLink
+            href="/team"
+            tracking={{
+              category: "header",
+              action: "click",
+              label: "team-dashboard",
+            }}
+            className="hidden items-center gap-1.5 px-2.5 text-muted-foreground text-sm hover:text-foreground md:inline-flex"
+            activeClassName="text-foreground"
+          >
+            Team Dashboard <Badge className="px-1.5"> BETA </Badge>
+          </NavLink>
+
           <div className="hidden gap-2 md:flex">
             <Suspense fallback={null}>
               <CreditsButton />

apps/dashboard/src/app/components/Header/DashboardHeader.tsx

@@ -1,4 +1,6 @@
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { ArrowUpDownIcon } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
 import { ResourcesDropdownButton } from "./ResourcesDropdownButton";
@@ -11,6 +13,23 @@ export function SecondaryNav(props: {
 }) {
   return (
     <div className="flex items-center gap-6">
+      <ToolTipLabel
+        label={
+          <span>
+            You are exploring the new dashboard. <br /> Click here to go back to
+            the legacy dashboard.
+          </span>
+        }
+      >
+        <Link
+          href="/dashboard"
+          className="inline-flex items-center gap-1.5 text-muted-foreground text-sm hover:text-foreground"
+        >
+          <ArrowUpDownIcon className="size-4" />
+          Switch To Legacy Dashboard
+        </Link>
+      </ToolTipLabel>
+
       <ResourcesDropdownButton />
 
       <Link

apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx

@@ -7,6 +7,7 @@ import PlausibleProvider from "next-plausible";
 import dynamic from "next/dynamic";
 import { Inter } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
+import { UnlimitedWalletsBanner } from "../components/notices/AnnouncementBanner";
 import { PostHogProvider } from "./components/root-providers";
 import { AppRouterProviders } from "./providers";
 
@@ -70,6 +71,7 @@ export default function RootLayout({
           )}
         >
           <PostHogPageView />
+          <UnlimitedWalletsBanner />
           <AppRouterProviders>{children}</AppRouterProviders>
           <Toaster richColors />
           <DashboardRouterTopProgressBar />

apps/dashboard/src/app/layout.tsx

@@ -1,6 +1,5 @@
 import { DashboardTypeCookieSetter } from "@/components/DashboardTypeCookieSetter";
 import { AppFooter } from "@/components/blocks/app-footer";
-import { TeamsUIBanner } from "../../components/DashboardTypeBanner";
 import { TWAutoConnect } from "../../components/autoconnect";
 
 export default function RootTeamLayout(props: {
@@ -9,7 +8,6 @@ export default function RootTeamLayout(props: {
 }) {
   return (
     <div className="flex min-h-screen flex-col">
-      <TeamsUIBanner />
       <div className="flex grow flex-col">{props.children}</div>
       <TWAutoConnect />
       <AppFooter />

apps/dashboard/src/app/team/[team_slug]/layout.tsx

@@ -29,9 +29,9 @@ export function AnnouncementBanner(props: {
         category="announcement"
         label={props.trackingLabel}
         target={props.href.startsWith("http") ? "_blank" : undefined}
-        className="container flex cursor-pointer items-center gap-2 lg:justify-center"
+        className="!text-white container flex cursor-pointer items-center gap-2 lg:justify-center "
       >
-        <span className="inline-block font-semibold text-white leading-normal hover:underline">
+        <span className="inline-block font-semibold leading-normal hover:underline">
           {props.label}
         </span>
         <ChevronRightIcon className="hidden size-5 opacity-80 lg:block" />
@@ -49,3 +49,13 @@ export function AnnouncementBanner(props: {
     </div>
   );
 }
+
+export function UnlimitedWalletsBanner() {
+  return (
+    <AnnouncementBanner
+      href="/dashboard/settings/billing?coupon=FREEWALLETS"
+      label='Get 12 months of unlimited in-app wallets by applying the "FREEWALLETS" coupon in the billing dashboard'
+      trackingLabel="unlimited-wallets"
+    />
+  );
+}

apps/dashboard/src/components/notices/AnnouncementBanner.tsx

@@ -1,6 +1,6 @@
 import { Flex, Icon } from "@chakra-ui/react";
 import { FiAlertCircle, FiCheckCircle, FiInfo } from "react-icons/fi";
-import { Badge, Heading, Text } from "tw-components";
+import { Badge, Text } from "tw-components";
 
 interface BillingHeaderProps {
   validPayment: boolean;
@@ -12,10 +12,8 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
   paymentVerification,
 }) => {
   return (
-    <Flex direction="column" gap={2}>
-      <Heading size="title.lg" as="h1">
-        Billing Info
-      </Heading>
+    <Flex direction="column" gap={1}>
+      <h1 className="font-semibold text-xl tracking-tight">Billing Info</h1>
 
       <div className="flex flex-row">
         <Text size="body.md">
@@ -29,7 +27,7 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
           py={1.5}
           textTransform="capitalize"
         >
-          <span className="flex flex-row">
+          <span className="flex flex-row gap-1.5">
             <Icon
               as={
                 validPayment

apps/dashboard/src/components/settings/Account/Billing/Header.tsx

@@ -20,7 +20,7 @@ export const BillingPlan: React.FC<BillingPlanProps> = ({
 }) => {
   return (
     <Flex direction={direction} gap={3}>
-      <div className="flex flex-row">
+      <div className="flex flex-row items-center">
         <Text color={titleColor} size={titleSize}>
           Your current plan is
         </Text>