Add Modular contracts banner on dashboard and portal (#4560)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to introduce a new `AnnouncementBanner` component in the dashboard and portal pages.

### Detailed summary
- Added `AnnouncementBanner` component to display announcements in dashboard and portal
- Updated announcement content and link in `AnnouncementBanner`
- Updated `Banner` component in portal
- Reorganized imports in `layout.tsx` and made minor changes in layout components

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

<!-- end pr-codex -->

Author: MananTank

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

@@ -5,7 +5,7 @@ import { Heading, TrackedLink } from "tw-components";
 
 export const AnnouncementBanner = () => {
   const [hasDismissedAnnouncement, setHasDismissedAnnouncement] =
-    useLocalStorage("dismissed-blocktorch-announcement", false, true);
+    useLocalStorage("dismissed-modular-contracts-announcement", false, true);
 
   if (hasDismissedAnnouncement) {
     return null;
@@ -27,7 +27,7 @@ export const AnnouncementBanner = () => {
       >
         <Box display={{ base: "none", md: "block" }} />
         <TrackedLink
-          href="https://onchainolympics.com"
+          href="https://thirdweb.com/explore/modular-contracts"
           category="announcement"
           label="onchain-olympics"
           isExternal
@@ -47,8 +47,8 @@ export const AnnouncementBanner = () => {
                 color="white"
                 fontWeight={500}
               >
-                The Onchain Olympics ⛓️🏅 — Mint an NFT on your preferred chain
-                to unlock builder perks on thirdweb
+                Modular Contracts Beta: Secure, Customizable, and Easy to
+                Integrate contracts
               </Heading>
               <Icon display={{ base: "none", md: "block" }} as={FiArrowRight} />
             </Flex>

apps/dashboard/src/pages/_app.tsx

@@ -23,6 +23,7 @@ import type { ThirdwebNextPage } from "utils/types";
 import chakraTheme from "../theme";
 import "@/styles/globals.css";
 import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter";
+import { AnnouncementBanner } from "../components/notices/AnnouncementBanner";
 
 const inter = interConstructor({
   subsets: ["latin"],
@@ -273,7 +274,7 @@ const ConsoleApp = memo(function ConsoleApp({
 
       <TailwindTheme>
         <ChakraProvider theme={chakraThemeWithFonts}>
-          {/* <AnnouncementBanner /> */}
+          <AnnouncementBanner />
           {isFallback && Component.fallback
             ? Component.fallback
             : getLayout(<Component {...pageProps} />, pageProps)}

apps/portal/src/app/layout.tsx

@@ -1,14 +1,14 @@
 import "./globals.css";
-import { Inter, Fira_Code } from "next/font/google";
-import { Header } from "./Header";
-import NextTopLoader from "nextjs-toploader";
+import { createMetadata } from "@/components/Document";
 import { PosthogHeadSetup, PosthogPageView } from "@/lib/posthog/Posthog";
+import { Fira_Code, Inter } from "next/font/google";
 import Script from "next/script";
-import { createMetadata } from "@/components/Document";
-import { SetStoredTheme } from "../components/others/theme/theme";
-import { Banner } from "../components/others/Banner";
+import NextTopLoader from "nextjs-toploader";
 import { StickyTopContainer } from "../components/Document/StickyTopContainer";
+import { Banner } from "../components/others/Banner";
 import { EnableSmoothScroll } from "../components/others/SmoothScroll";
+import { SetStoredTheme } from "../components/others/theme/theme";
+import { Header } from "./Header";
 
 const sansFont = Inter({
 	subsets: ["latin"],
@@ -65,9 +65,9 @@ export default function RootLayout({
 					<StickyTopContainer>
 						{/* Note: Please change id as well when changing text or href so that new banner is shown to user even if user dismissed the older one  */}
 						<Banner
-							id="v5-stable"
-							text="Connect SDK v5 has been released. See documentation."
-							href="https://portal.thirdweb.com/typescript/v5"
+							id="modular-contracts"
+							text="Modular Contracts Beta: Secure, Customizable, and Easy to Integrate contracts"
+							href="https://thirdweb.com/explore/modular-contracts"
 						/>
 						<Header />
 					</StickyTopContainer>

apps/portal/src/components/others/Banner.tsx

@@ -1,8 +1,8 @@
 "use client";
-import Link from "next/link";
 import { XIcon } from "lucide-react";
-import { Button } from "../ui/button";
+import Link from "next/link";
 import { useEffect, useState } from "react";
+import { Button } from "../ui/button";
 
 export function Banner(props: { text: string; href: string; id: string }) {
 	const [showBanner, setShowBanner] = useState(false);
@@ -21,13 +21,14 @@ export function Banner(props: { text: string; href: string; id: string }) {
 
 	return (
 		<div
-			className="flex items-center justify-center gap-2 p-3 pr-20 transition-opacity duration-700 animate-in fade-in-0"
+			className="animate-in fade-in-0 flex items-center justify-center gap-2 p-3 pr-20 transition-opacity duration-700"
 			style={{
 				background: `linear-gradient(145.96deg, rgb(65, 10, 182) 5.07%, rgb(60 132 246) 100%)`,
 			}}
 		>
 			<Link
 				href={props.href}
+				target={props.href.startsWith("http") ? "_blank" : undefined}
 				className="font-bold hover:underline"
 				style={{
 					color: "white",