feat: add dashboard footer

packages/dashboard/src/components/DashboardFrame/index.tsx

@@ -6,6 +6,7 @@ import { MaskColorVar } from '@masknet/theme'
 import { ErrorBoundary } from '@masknet/shared'
 import { DashboardContext } from './context'
 import { Navigation } from './Navigation'
+import { NavigationVersionFooter } from '../NavigationVersionFooter'
 
 const Root = styled(Grid)(({ theme }) => ({
     backgroundColor: MaskColorVar.primaryBackground,
@@ -17,6 +18,10 @@ const LeftContainer = styled(Grid)(({ theme }) => ({
         // Just meet the design size
         minWidth: 232,
     },
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    paddingBottom: '22px',
 }))
 
 export interface DashboardFrameProps extends React.PropsWithChildren<{}> {}
@@ -44,6 +49,7 @@ export const DashboardFrame = memo((props: DashboardFrameProps) => {
                 {isLargeScreen && (
                     <LeftContainer item xs={2}>
                         <Navigation />
+                        <NavigationVersionFooter />
                     </LeftContainer>
                 )}
                 <Grid container direction="column" item xs={isLargeScreen ? 10 : 12}>

packages/dashboard/src/components/NavigationVersionFooter/index.tsx

@@ -0,0 +1,16 @@
+import { MaskColorVar } from '@masknet/theme'
+import { styled } from '@mui/system'
+import { memo } from 'react'
+import { useDashboardI18N } from '../../locales'
+
+const VersionContainer = styled('div')(() => ({
+    color: MaskColorVar.textSecondary,
+    textAlign: 'center',
+    fontSize: '12px',
+}))
+
+export const NavigationVersionFooter = memo(() => {
+    const t = useDashboardI18N()
+    const version = globalThis.browser?.runtime.getManifest()?.version ?? process.env.TAG_NAME.slice(1)
+    return <VersionContainer>{version && t.version_of_stable({ version })}</VersionContainer>
+})

packages/dashboard/src/components/PageFrame/index.tsx

@@ -25,6 +25,7 @@ import { Navigation } from '../DashboardFrame/Navigation'
 import { MaskBannerIcon, MaskNotSquareIcon } from '@masknet/icons'
 import { FeaturePromotions } from './FeaturePromotions'
 import { RoutePaths } from '../../type'
+import { NavigationVersionFooter } from '../NavigationVersionFooter'
 
 const featurePromotionsEnabled = [RoutePaths.Wallets, RoutePaths.WalletsTransfer, RoutePaths.WalletsHistory]
 
@@ -66,9 +67,13 @@ const NavigationDrawer = styled(Drawer)(({ theme }) => ({
     [`& > .${paperClasses.root}`]: {
         width: 232,
         top: theme.mixins.toolbar.minHeight,
-        paddingTop: theme.spacing(7.5),
+        paddingTop: '28px',
         background: new Color(theme.palette.background.paper).alpha(0.8).toString(),
         backdropFilter: 'blur(4px)',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        paddingBottom: `calc( 22px + ${theme.mixins.toolbar.minHeight}px)`,
     },
 }))
 
@@ -164,6 +169,7 @@ export const PageFrame = memo((props: PageFrameProps) => {
                         variant="temporary"
                         elevation={0}>
                         <Navigation onClose={toggleDrawer} />
+                        <NavigationVersionFooter />
                     </NavigationDrawer>
                 )}
                 <ShapeHelper>