Merge pull request #1756 from nymtech/feature-457-banner

Feature 457 banner

explorer/src/components/MobileNav.tsx

@@ -17,6 +17,7 @@ import {
 } from '@mui/material';
 import { Menu } from '@mui/icons-material';
 import { NymLogo } from '@nymproject/react/logo/NymLogo';
+import { MaintenanceBanner } from '@nymproject/react/banners/MaintenanceBanner';
 import { useMainContext } from '../context/main';
 import { MobileDrawerClose } from '../icons/MobileDrawerClose';
 import { Footer } from './Footer';
@@ -32,6 +33,8 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
   const theme = useTheme();
   const { navState, updateNavState } = useMainContext();
   const [drawerOpen, setDrawerOpen] = React.useState(false);
+  // Set maintenance banner to false by default to don't display it
+  const [openMaintenance, setOpenMaintenance] = React.useState(true);
 
   const toggleDrawer = () => {
     setDrawerOpen(!drawerOpen);
@@ -51,8 +54,10 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
       <AppBar
         sx={{
           background: theme.palette.nym.networkExplorer.topNav.appBar,
+          borderRadius: 0,
         }}
       >
+        <MaintenanceBanner open={openMaintenance} onClick={() => setOpenMaintenance(false)} />
         <Toolbar
           disableGutters
           sx={{

explorer/src/components/Nav.tsx

@@ -15,6 +15,7 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { NymLogo } from '@nymproject/react/logo/NymLogo';
+import { MaintenanceBanner } from '@nymproject/react/banners/MaintenanceBanner';
 import { NYM_WEBSITE } from '../api/constants';
 import { useMainContext } from '../context/main';
 import { MobileDrawerClose } from '../icons/MobileDrawerClose';
@@ -24,6 +25,7 @@ import { DarkLightSwitchDesktop } from './Switch';
 import { NavOptionType } from '../context/nav';
 
 const drawerWidth = 255;
+const bannerHeight = 113;
 
 const openedMixin = (theme: Theme): CSSObject => ({
   width: drawerWidth,
@@ -232,6 +234,8 @@ export const Nav: React.FC = ({ children }) => {
   const { updateNavState, navState } = useMainContext();
   const [drawerIsOpen, setDrawerToOpen] = React.useState(false);
   const [fixedOpen, setFixedOpen] = React.useState(false);
+  // Set maintenance banner to false by default to don't display it
+  const [openMaintenance, setOpenMaintenance] = React.useState(true);
   const theme = useTheme();
 
   const setToActive = (id: number) => {
@@ -268,6 +272,7 @@ export const Nav: React.FC = ({ children }) => {
           borderRadius: 0,
         }}
       >
+        <MaintenanceBanner open={openMaintenance} onClick={() => setOpenMaintenance(false)} height={bannerHeight} />
         <Toolbar
           disableGutters
           sx={{
@@ -332,6 +337,7 @@ export const Nav: React.FC = ({ children }) => {
           style: {
             background: theme.palette.nym.networkExplorer.nav.background,
             borderRadius: 0,
+            top: openMaintenance ? bannerHeight : 0,
           },
         }}
       >

ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx

@@ -0,0 +1,57 @@
+import { Box, Collapse, Alert, IconButton, Typography, Divider } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { SxProps } from '@mui/system';
+
+export interface BannerProps {
+  open: boolean;
+  onClick: () => void;
+  height?: number;
+  sx?: SxProps;
+}
+
+export const MaintenanceBanner = (props: BannerProps) => {
+  const { open, onClick, height, sx } = props;
+
+  return (
+    <Box sx={{ width: '100%', ...sx }}>
+      <Collapse in={open}>
+        <Alert
+          id="maintenance-banner"
+          action={
+            <IconButton aria-label="close" color="inherit" size="small" onClick={onClick}>
+              <CloseIcon fontSize="inherit" cursor="pointer" />
+            </IconButton>
+          }
+          severity="success"
+          icon={false}
+          sx={{
+            width: '100%',
+            backgroundColor: (t) => t.palette.nym.highlight,
+            borderRadius: 0,
+            color: (t) => t.palette.nym.networkExplorer.nav.text,
+            height: height || 'auto',
+          }}
+        >
+          <Box display="flex">
+            <Typography variant="body1" fontWeight={700}>
+              SCHEDULED MAINTENANCE
+            </Typography>
+            <Divider orientation="vertical" flexItem sx={{ mx: '16px', borderRightWidth: 2 }} />
+            <Typography variant="body2">
+              On Tuesday 15th of November 10AM GMT, the migration to the new mixnet contract begins. This means all Nym
+              apps and services{' '}
+              <Box sx={{ fontWeight: 700 }} display="inline">
+                will be temporarily on hold while the upgrade takes place.
+              </Box>{' '}
+              Bonding/unbonding, delegating/delegating{' '}
+              <Box sx={{ fontWeight: 700 }} display="inline">
+                will be frozen for up to 36 hours.
+              </Box>{' '}
+              You will still be able to transfer tokens between accounts, and use IBC.
+            </Typography>
+          </Box>
+        </Alert>
+      </Collapse>
+    </Box>
+  );
+};