feat: AnnouncementDialog

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { PostHogPageViews } from "@/components/Providers/PostHogPageViews"
 import { dystopian, inter } from "fonts"
 import { type ReactNode, Suspense } from "react"
 import "./globals.css"
+import { AnnouncementDialog } from "@/components/AnnouncementDialog"
 import { TermsOfUseUpdateDialog } from "@/components/TermsOfUseUpdateDialog"
 import { cn } from "@/lib/utils"
 import type { Metadata, Viewport } from "next"
@@ -50,6 +51,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
           {children}
 
           <TermsOfUseUpdateDialog />
+          <AnnouncementDialog />
           <Suspense>
             <PostHogPageViews />
           </Suspense>

src/pages/_app.tsx

@@ -18,6 +18,7 @@ import { WagmiProvider } from "wagmi"
 import { wagmiConfig } from "wagmiConfig"
 import "../app/globals.css"
 import { AccountModal } from "@/components/Account/components/AccountModal"
+import { AnnouncementDialog } from "@/components/AnnouncementDialog"
 import AppErrorBoundary from "@/components/AppErrorBoundary"
 import { IntercomProvider } from "@/components/Providers/IntercomProvider"
 import { TermsOfUseUpdateDialog } from "@/components/TermsOfUseUpdateDialog"
@@ -88,6 +89,7 @@ const App = ({
 
                       <LegacyWeb3ConnectionManager />
                       <TermsOfUseUpdateDialog />
+                      <AnnouncementDialog />
                     </LegacyPostHogProvider>
                   </FuelProvider>
                 </QueryClientProvider>

src/v2/components/AnnouncementDialog.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { useDisclosure } from "@/hooks/useDisclosure"
+import { useEffect } from "react"
+import { useIsClient, useLocalStorage } from "usehooks-ts"
+import { Button } from "./ui/Button"
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/Dialog"
+
+const ANNOUNCEMENT_LOCALSTORAGE_ID = "announcement-lowered-nft-fees-2024-dec-11"
+
+export const AnnouncementDialog = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const isClient = useIsClient()
+
+  const [hasSeenAnnouncement, setHasSeenAnnouncement] = useLocalStorage(
+    ANNOUNCEMENT_LOCALSTORAGE_ID,
+    false
+  )
+
+  useEffect(() => {
+    if (!isClient || hasSeenAnnouncement) return
+    onOpen()
+  }, [isClient, hasSeenAnnouncement, onOpen])
+
+  return (
+    <Dialog open={isOpen}>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>Minting fees reduced by 60% 🎉</DialogTitle>
+        </DialogHeader>
+
+        <DialogBody className="prose text-foreground">
+          <p>
+            Building your onchain identity just got easier. Collect Guild Pins and
+            NFT rewards and show off your favorite communities!
+          </p>
+        </DialogBody>
+
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              setHasSeenAnnouncement(true)
+              onClose()
+            }}
+            colorScheme="primary"
+            className="w-full"
+          >
+            LFG 🚀
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}