thirdweb-dev · graphite-app · Oct 10, 2024 · Oct 10, 2024
@@ -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 />

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

@@ -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 />

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

@@ -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 />

@@ -15,7 +15,7 @@ import { doLogin, doLogout, getLoginPayload, isLoggedIn } from "./auth-actions";
 export default function LoginPage() {
   return (
     <div className="relative grid h-screen place-items-center bg-muted/30">
-      <nav className="fixed top-0 z-20 flex w-full flex-row items-center justify-between px-6 py-4">
+      <nav className="absolute top-0 z-20 flex w-full flex-row items-center justify-between px-6 py-4">
         <ThirdwebMiniLogo className="max-h-7" />
         <ColorModeToggle />
       </nav>

@@ -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 />

@@ -4,7 +4,7 @@ import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { ChevronRightIcon, XIcon } from "lucide-react";
 
-export function AnnouncementBanner(props: {
+function AnnouncementBanner(props: {
   href: string;
   label: string;
   trackingLabel: string;
@@ -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"
+    />
+  );
+}
@@ -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 items-center gap-2">
         <Text size="body.md">

@@ -22,7 +22,7 @@ import type { ThirdwebNextPage } from "utils/types";
 import chakraTheme from "../theme";
 import "@/styles/globals.css";
 import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter";
-import { TryTeamsUIBanner } from "../app/components/DashboardTypeBanner";
+import { UnlimitedWalletsBanner } from "../components/notices/AnnouncementBanner";
 
 const inter = interConstructor({
   subsets: ["latin"],
@@ -260,8 +260,7 @@ const ConsoleApp = memo(function ConsoleApp({
       />
 
       <DashboardRouterTopProgressBar />
-
-      <TryTeamsUIBanner />
+      <UnlimitedWalletsBanner />
 
       <TailwindTheme>
         <ChakraProvider theme={chakraThemeWithFonts}>