feat: include package version in the website footer (#444)

* feat: include package version in the website footer * feat: add missing page links to the footer section * styles: fix margins * fix: hydration error on Wallet page * feat: add LegalDisclaimer to `components/commonCMS` folder * refactor: use commonCMS CenteredTextBlock * v1.4.43 * fix: center align GitHub icon
safe-global · Sep 2, 2024 · bb1b55b · bb1b55b
1 parent 2d198f3
commit bb1b55b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 15 deletions.
diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
@@ -1,4 +1,4 @@
-import { Badge, ButtonBase, Container, Divider, Grid, Typography } from '@mui/material'
+import { Badge, ButtonBase, Container, Divider, Grid, SvgIcon, Typography } from '@mui/material'
 import type { ComponentType, SyntheticEvent } from 'react'
 
 import { AppRoutes } from '@/config/routes'
@@ -26,20 +26,29 @@ import {
 import { useCookieBannerContext } from '@/contexts/CookieBannerContext'
 import Logo from '@/public/images/logo.svg'
 import { useOpenPositions } from '@/hooks/useOpenPositions'
+import packageJson from 'package.json'
 
 const COOKIE_PREFERENCES = '#cookies'
 
-const safeProtocolItems = [
+const developersItems = [
   {
     label: 'Safe{Core}',
     href: AppRoutes.core,
   },
   {
-    label: 'Docs',
+    label: 'Documentation',
     href: DOCS_LINK,
     target: '_blank',
     rel: 'noreferrer',
   },
+  {
+    label: 'Gas station',
+    href: AppRoutes.gasStation,
+  },
+  {
+    label: 'Safe{Foundry}',
+    href: AppRoutes.foundry,
+  },
 ]
 
 const ecosystemItems = [
@@ -78,25 +87,25 @@ const communityItems = [
 
 const resourcesItems = [
   {
-    label: 'Help Center',
-    href: HELP_LINK,
-    target: '_blank',
-    rel: 'noreferrer',
+    label: 'Careers',
+    href: AppRoutes.careers,
   },
   {
     label: 'Press Room',
     href: AppRoutes.press,
   },
-  {
-    label: 'Careers',
-    href: AppRoutes.careers,
-  },
   {
     label: 'Brand Kit',
     href: PRESS_LINK,
     target: '_blank',
     rel: 'noreferrer',
   },
+  {
+    label: 'Help Center',
+    href: HELP_LINK,
+    target: '_blank',
+    rel: 'noreferrer',
+  },
 ]
 
 const subFooterItems = [
@@ -174,7 +183,7 @@ const Footer = () => {
             Developers
           </Typography>
           <ul className={css.list}>
-            {safeProtocolItems.map((item) => (
+            {developersItems.map((item) => (
               <li className={css.listItem} key={item.href}>
                 <Link href={item.href} target="_blank" rel="noreferrer">
                   {item.label}
@@ -255,9 +264,9 @@ const Footer = () => {
         </Grid>
       </Grid>
 
-      <Divider sx={{ mt: 5, mb: { xs: 3, md: 0 } }} />
+      <Divider sx={{ mt: 5 }} />
 
-      <Grid container alignItems="center" justifyContent="space-between" gap="8px">
+      <Grid container alignItems="center" justifyContent="space-between">
         <Grid item>
           <ul className={css.subList}>
             {subFooterItems.map((item) => {
@@ -276,6 +285,15 @@ const Footer = () => {
                 </li>
               )
             })}
+
+            {/* Package version */}
+            <li className={css.subListItem}>
+              <a href={`${packageJson.homepage}/releases/tag/v${packageJson.version}`} target="_blank" rel="noreferrer">
+                <div className={css.subListItemContent}>
+                  <SvgIcon component={GithubIcon} inheritViewBox fontSize="inherit" />v{packageJson.version}
+                </div>
+              </a>
+            </li>
           </ul>
         </Grid>
 

diff --git a/src/components/common/Footer/styles.module.css b/src/components/common/Footer/styles.module.css
@@ -40,6 +40,12 @@
   color: var(--mui-palette-primary-light);
 }
 
+.subListItemContent {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
 .socials {
   display: flex;
   flex-wrap: wrap;
@@ -69,7 +75,8 @@
   }
 
   .subList {
-    gap: 32px;
+    column-gap: 32px;
+    row-gap: 0;
   }
 
   .subListItem {