feat: introduce notifications page

packages/web/src/components/Layout/index.tsx

@@ -7,6 +7,7 @@ import AppsIcon from '@mui/icons-material/Apps';
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 import HistoryIcon from '@mui/icons-material/History';
 import ExploreIcon from '@mui/icons-material/Explore';
+import NotificationsIcon from '@mui/icons-material/Notifications';
 
 import * as URLS from 'config/urls';
 import AppBar from 'components/AppBar';
@@ -39,6 +40,14 @@ const drawerLinks = [
   },
 ];
 
+const drawerBottomLinks = [
+  {
+    Icon: NotificationsIcon,
+    primary: 'settingsDrawer.notifications',
+    to: URLS.UPDATES,
+  },
+]
+
 export default function PublicLayout({ children }: PublicLayoutProps): React.ReactElement {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { noSsr: true });
@@ -54,6 +63,7 @@ export default function PublicLayout({ children }: PublicLayoutProps): React.Rea
       <Box sx={{ display: 'flex', }}>
         <Drawer
           links={drawerLinks}
+          bottomLinks={drawerBottomLinks}
           open={isDrawerOpen}
           onOpen={openDrawer}
           onClose={closeDrawer}

packages/web/src/components/NotificationCard/index.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import { DateTime } from 'luxon';
+
+import useFormatMessage from 'hooks/useFormatMessage';
+
+interface NotificationCardProps {
+  name: string;
+  createdAt: string;
+  documentationUrl: string;
+  description: string;
+}
+
+const getHumanlyDate = (timestamp: number) => DateTime.fromMillis(timestamp).toRelative();
+
+export default function NotificationCard(props: NotificationCardProps) {
+  const {
+    name,
+    createdAt,
+    documentationUrl,
+    description,
+  } = props;
+
+  const formatMessage = useFormatMessage();
+  const relativeCreatedAt = getHumanlyDate((new Date(createdAt)).getTime());
+  const subheader = formatMessage('notification.releasedAt', { relativeDate: relativeCreatedAt });
+
+  return (
+    <Card>
+      <CardActionArea
+        component={'a'}
+        href={documentationUrl}
+        target="_blank"
+      >
+        <CardHeader
+          title={name}
+          titleTypographyProps={{ variant: 'h6' }}
+          subheader={subheader}
+          sx={{ borderBottom: '1px solid', borderColor: 'divider'}}
+        />
+
+        <CardContent>
+          <Typography
+            variant="body1"
+            color="text.secondary"
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+}

packages/web/src/components/PageTitle/index.tsx

@@ -1,16 +1,10 @@
 import * as React from 'react';
-import Typography from '@mui/material/Typography';
+import Typography, { TypographyProps } from '@mui/material/Typography';
 
-type PageTitleProps = {
-  children: React.ReactNode;
-};
+type PageTitleProps = TypographyProps;
 
 export default function PageTitle(props: PageTitleProps): React.ReactElement {
-  const { children } = props;
-
   return (
-    <Typography variant="h3">
-      {children}
-    </Typography>
+    <Typography variant="h3" {...props} />
   );
 }