complete basic handling for announcements bar

src/App/App.tsx

@@ -5,7 +5,6 @@ import SnackbarComponent from '../components/Global/SnackbarComponent/SnackbarCo
 
 /** ***** Import JSX Files *******/
 import PageHeader from './components/PageHeader/PageHeader';
-// import SidebarFooter from '../components/Global/Sidebar/SidebarFooter/SidebarFooter';
 
 /** * **** Import Local Files *******/
 import './App.css';

src/App/components/PageHeader/PageHeader.module.css

@@ -99,8 +99,13 @@
     max-height: 70%;
 }
 
-
-
+/* .announcement_bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    background-color: yellow;
+} */
 
 @media (max-width: 800px) {
     .primaryNavigation {

src/App/components/PageHeader/PageHeader.tsx

@@ -48,6 +48,7 @@ const PageHeader = function () {
     const { headerImage } = useContext<BrandContextIF>(BrandContext);
 
     const {
+        announcements,
         walletModal: { open: openWalletModal },
         appHeaderDropdown,
     } = useContext(AppStateContext);
@@ -349,7 +350,6 @@ const PageHeader = function () {
             <nav
                 className={styles.primaryNavigation}
                 id='primary_navigation'
-
             >
                 {linkData.map((link, idx) =>
                     link.shouldDisplay ? (
@@ -407,6 +407,8 @@ const PageHeader = function () {
         };
     }, []);
 
+
+
     return (
         <>
             <header
@@ -463,6 +465,27 @@ const PageHeader = function () {
                     )}
                 </div>
             </header>
+            { announcements.show &&
+                <div
+                    // TODO: move styling to a css module once this component
+                    // TODO: ... finds a permanent home in the hierarchy
+                    // className={styles.announcement_bar}
+                    style={{
+                        width: '100%',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        backgroundColor: 'yellow',
+                        color: 'black',
+                        position: 'sticky',
+                        top: '55px',
+                        zIndex: '99999',
+                    }}
+                >
+                    <p>Hi there!</p>
+                    <div onClick={() => announcements.close()}>X</div>
+                </div>
+            }
             {/* {isDevMenuEnabled && showDevMenu && <MobileDropdown />} */}
         </>
     );

src/contexts/AppStateContext.tsx

@@ -25,6 +25,10 @@ import { useTermsAgreed } from '../App/hooks/useTermsAgreed';
 import { useWeb3Modal } from '@web3modal/ethers/react';
 
 export interface AppStateContextIF {
+    announcements: {
+        show: boolean;
+        close: () => void;
+    },
     appOverlay: { isActive: boolean; setIsActive: (val: boolean) => void };
     appHeaderDropdown: {
         isActive: boolean;
@@ -134,8 +138,23 @@ export const AppStateContextProvider = (props: {
     const [_, hasAgreedTerms] = useTermsAgreed();
     const { open: openW3Modal } = useWeb3Modal();
 
+    // logic and handling for the announcements bar, needs to be centralized
+    // ... as the component is instantiated multiple times
+    const SHOW_ANNOUNCEMENTS = true;
+    const [
+        showAnnouncements,
+        setShowAnnouncements
+    ] = useState<boolean>(SHOW_ANNOUNCEMENTS);
+    function closeAnnouncements(): void {
+        setShowAnnouncements(false);
+    }
+
     const appStateContext = useMemo(
         () => ({
+            announcements: {
+                show: showAnnouncements,
+                close: closeAnnouncements,
+            },
             appOverlay: {
                 isActive: isAppOverlayActive,
                 setIsActive: setIsAppOverlayActive,
@@ -176,6 +195,7 @@ export const AppStateContextProvider = (props: {
         [
             // Dependency list includes the memoized use*() values from above and any primitives
             // directly references in above appState object
+            showAnnouncements,
             snackbar,
             globalPopup,
             isChatOpen,