feat: add announcements popover (#204)

Co-authored-by: martines3000 <[email protected]>

apps/frontend/src/app/(core)/layout.tsx

@@ -1,7 +1,9 @@
+import { AnnouncementPopover } from '@/components/AnnouncementPopover';
 import { Footer } from '@/components/Footer';
 import { IntroductionDialog } from '@/components/IntroductionDialog';
 import { Navbar } from '@/components/Navbar';
 import { Providers } from '@/components/Providers';
+import { appConfig } from '@/configs';
 import { isMobile } from '@/utils/isMobile';
 import { headers } from 'next/headers';
 
@@ -18,6 +20,9 @@ export default function AppLayout({
         <Navbar mobile={mobile} />
         <div className="bg-background flex-1">{children}</div>
         <Footer />
+        {!mobile && appConfig.client.announcementEnabled && (
+          <AnnouncementPopover />
+        )}
         <IntroductionDialog />
       </div>
     </Providers>

apps/frontend/src/components/AnnouncementPopover/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { X } from 'lucide-react';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import Logo from '/public/icons/sway-icon-logo.svg?url';
+import { Button } from '../ui/button';
+import { Dialog, DialogClose, DialogContent } from '../ui/dialog';
+
+export const AnnouncementPopover = () => {
+  const [open, setOpen] = useState(false);
+  const announcementId = 0;
+
+  // OPEN modal if announcement with this Id has not yet been viewed
+  useEffect(() => {
+    // Check local storage for this announcement (if user has seen it)
+    const announcement = localStorage.getItem(`announcement-${announcementId}`);
+    if (!announcement) {
+      setOpen(true);
+    }
+  }, []);
+
+  const handleClose = () => {
+    localStorage.setItem(`announcement-${announcementId}`, 'true');
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} modal={false}>
+      <DialogContent
+        className="w-full sm:w-auto flex bg-muted top-[15%]"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <DialogClose asChild>
+          <Button
+            onMouseDown={() => handleClose()}
+            className="absolute w-[30px] h-[30px] p-0 right-[9px] top-[9px]"
+            variant="ghost"
+          >
+            <X className="w-5 h-5" />
+          </Button>
+        </DialogClose>
+        <div className="flex">
+          <Image src={Logo} height={50} alt="logo" className="pr-2" />
+          <div className="w-auto mr-4 px-4 text-center">
+            We've made minor adjustments to the interest rate curves to better
+            align with the current market conditions.
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/frontend/src/components/Navbar/index.tsx

@@ -59,7 +59,6 @@ export const Navbar = ({ mobile = false }: { mobile?: boolean }) => {
 
   return (
     <>
-      {/* DESKTOP */}
       <div className="w-full text-center bg-primary font-medium text-md text-primary-foreground py-2 px-4">
         Start earning Fuel Activity Points by Lending and Borrowing!
         <a
@@ -71,6 +70,7 @@ export const Navbar = ({ mobile = false }: { mobile?: boolean }) => {
           Learn more
         </a>
       </div>
+      {/* DESKTOP */}
       <div className="max-lg:hidden">
         <div className="flex justify-between items-center px-16 min-h-[93px]">
           <div className="flex items-center gap-x-[70px]">

apps/frontend/src/configs/envs/mainnet.ts

@@ -15,6 +15,8 @@ export function createMainnetConfig() {
       fuelNodeUrl: process.env.NEXT_PUBLIC_FUEL_NODE_URL ?? '',
       alchemyId: process.env.NEXT_PUBLIC_ALCHEMY_ID ?? '',
       fuelOblApi: process.env.NEXT_PUBLIC_FUEL_OBL_API ?? '',
+      announcementEnabled:
+        process.env.NEXT_PUBLIC_ANNOUNCEMENT_ENABLED === 'true',
     },
     server: {
       sentioApi: process.env.SENTIO_API_URL ?? '',

apps/frontend/src/configs/envs/testnet.ts

@@ -15,6 +15,8 @@ export function createTestnetConfig() {
       fuelNodeUrl: process.env.NEXT_PUBLIC_FUEL_NODE_URL ?? '',
       alchemyId: process.env.NEXT_PUBLIC_ALCHEMY_ID ?? '',
       fuelOblApi: process.env.NEXT_PUBLIC_FUEL_OBL_API ?? '',
+      announcementEnabled:
+        process.env.NEXT_PUBLIC_ANNOUNCEMENT_ENABLED === 'true',
     },
     server: {
       sentioApi: process.env.SENTIO_API_URL ?? '',

apps/frontend/src/configs/types.ts

@@ -22,6 +22,7 @@ export const AppConfigSchema = z.object({
     fuelExplorerUrl: z.string(),
     alchemyId: z.string(),
     fuelOblApi: z.string(),
+    announcementEnabled: z.boolean(),
   }),
   server: z.object({
     sentioApi: z.string(),