1  import { Trans } from '@lingui/macro';
  2  import CloseIcon from '@mui/icons-material/Close';
  3  import { useMediaQuery, useTheme } from '@mui/material';
  4  import AppBar from '@mui/material/AppBar';
  5  import Box from '@mui/material/Box';
  6  import Button from '@mui/material/Button';
  7  import Toolbar from '@mui/material/Toolbar';
  8  import Typography from '@mui/material/Typography';
  9  import { ReactNode, useEffect, useState } from 'react';
 10  import { MarketLogo } from 'src/components/MarketSwitcher';
 11  import { Link } from 'src/components/primitives/Link';
 12  import { useRootStore } from 'src/store/root';
 13  
 14  interface TopBarNotifyProps {
 15    notifyText: ReactNode;
 16    learnMoreLink?: string;
 17    buttonText?: string;
 18    bannerVersion: string;
 19    icon?: string;
 20    customIcon?: ReactNode;
 21  }
 22  
 23  export default function TopBarNotify({
 24    notifyText,
 25    learnMoreLink,
 26    buttonText,
 27    bannerVersion,
 28    icon,
 29    customIcon,
 30  }: TopBarNotifyProps) {
 31    const { breakpoints } = useTheme();
 32    const md = useMediaQuery(breakpoints.down('md'));
 33    const sm = useMediaQuery(breakpoints.down('sm'));
 34  
 35    const [showWarning, setShowWarning] = useState(true);
 36  
 37    const mobileDrawerOpen = useRootStore((state) => state.mobileDrawerOpen);
 38  
 39    useEffect(() => {
 40      const storedBannerVersion = localStorage.getItem('bannerVersion');
 41      const warningBarOpen = localStorage.getItem('warningBarOpen');
 42  
 43      if (storedBannerVersion !== bannerVersion) {
 44        localStorage.setItem('bannerVersion', bannerVersion);
 45        setShowWarning(true);
 46        localStorage.setItem('warningBarOpen', 'true');
 47      } else if (warningBarOpen === 'false') {
 48        setShowWarning(false);
 49      }
 50    }, [bannerVersion]);
 51  
 52    const handleClose = () => {
 53      localStorage.setItem('warningBarOpen', 'false');
 54      setShowWarning(false);
 55    };
 56  
 57    // Note: hide warnings when mobile menu is open
 58    if (mobileDrawerOpen) return null;
 59  
 60    if (showWarning) {
 61      return (
 62        <AppBar
 63          component="header"
 64          sx={{
 65            padding: `8px, 12px, 8px, 12px`,
 66            background: (theme) => theme.palette.gradients.newGradient,
 67            display: 'flex',
 68            alignItems: 'center',
 69            justifyContent: 'space-between',
 70            borderRadius: 0,
 71          }}
 72          position="static"
 73        >
 74          <Toolbar
 75            sx={{
 76              display: 'flex',
 77              paddingRight: md ? 0 : '',
 78              justifyContent: 'center',
 79              alignItems: 'center',
 80              width: '100%',
 81            }}
 82            variant="dense"
 83          >
 84            <Box sx={{ padding: md ? '20px 10px' : '', paddingRight: 0 }}>
 85              <Typography
 86                sx={{ display: 'flex', alignContent: 'center', alignItems: 'center' }}
 87                component="div"
 88              >
 89                <Trans>{notifyText}</Trans>
 90  
 91                {customIcon ? customIcon : null}
 92  
 93                {icon && !sm ? <MarketLogo sx={{ ml: 2 }} size={32} logo={icon} /> : ''}
 94  
 95                {learnMoreLink && md ? (
 96                  <Link
 97                    sx={{ color: 'white', textDecoration: 'underline', paddingLeft: 2 }}
 98                    // target={'_blank'} Todo option to pass as prop
 99                    href={learnMoreLink}
100                  >
101                    <Trans>{buttonText ? buttonText : `Learn more`}</Trans>
102                  </Link>
103                ) : null}
104              </Typography>
105            </Box>
106  
107            <Box>
108              {!md && learnMoreLink ? (
109                <Button
110                  component="a"
111                  // target={'_blank'} Todo option to pass as prop
112                  size="small"
113                  href={learnMoreLink}
114                  sx={{
115                    minWidth: '90px',
116                    marginLeft: 5,
117                    height: '24px',
118                    background: '#383D51',
119                    color: '#EAEBEF',
120                  }}
121                >
122                  <Trans> {buttonText ? buttonText.toUpperCase() : `LEARN MORE`}</Trans>
123                </Button>
124              ) : null}
125            </Box>
126            <Button
127              sx={{ color: 'white', paddingRight: 0 }}
128              onClick={handleClose}
129              startIcon={<CloseIcon />}
130            />
131          </Toolbar>
132        </AppBar>
133      );
134    }
135    return null;
136  }