Release 2.1.0 (#184)

package.json

@@ -2,7 +2,7 @@
   "name": "safe-dao-governance-app",
   "homepage": "https://github.com/safe-global/safe-dao-governance-app",
   "license": "GPL-3.0",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "scripts": {
     "build": "next build && next export",
     "lint": "tsc && next lint",

pages/index.tsx

@@ -1,9 +1,9 @@
 import type { NextPage } from 'next'
 
-import TokenLocking from '@/components/TokenLocking'
+import PointsPage from './points'
 
 const IndexPage: NextPage = () => {
-  return <TokenLocking />
+  return <PointsPage />
 }
 
 export default IndexPage

pages/points.tsx

@@ -0,0 +1,8 @@
+import Points from '@/components/Points'
+import type { NextPage } from 'next'
+
+const PointsPage: NextPage = () => {
+  return <Points />
+}
+
+export default PointsPage

src/analytics/navigation.ts

@@ -20,4 +20,7 @@ export const NAVIGATION_EVENTS = {
   OPEN_ACTIVITY_INFO: {
     action: 'Open activity info',
   },
+  OPEN_POINTS: {
+    action: 'Open points page',
+  },
 }

src/components/BoostCounter/index.tsx

@@ -99,7 +99,7 @@ const BoostCounter = ({
       >
         {digit}
       </Typography>
-      <Typography {...props} fontSize="44px">
+      <Typography fontSize="44px" {...props}>
         {decimals !== '' ? `${localeSeparator}${decimals}x` : 'x'}
       </Typography>
     </Box>

src/components/PageLayout/index.tsx

@@ -12,7 +12,7 @@ import { AppRoutes } from '@/config/routes'
 import { useRouter } from 'next/router'
 import { NAVIGATION_EVENTS } from '@/analytics/navigation'
 
-const RoutesWithNavigation = [AppRoutes.index, AppRoutes.activity, AppRoutes.governance]
+const RoutesWithNavigation = [AppRoutes.index, AppRoutes.points, AppRoutes.activity, AppRoutes.governance]
 
 export const PageLayout = ({
   children,
@@ -34,14 +34,19 @@ export const PageLayout = ({
 
       <BackgroundCircles />
 
-      <Box pt={7} pb={6} sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center' }} component="main">
+      <Box pt={7} pb={6} sx={{ minHeight: '100vh' }} component="main">
         <Box className={css.container}>
           {showNavigation && (
             <Box className={css.navigation}>
               <NavTabs
                 tabs={[
                   {
-                    label: 'Activity & Rewards',
+                    label: 'Activities & Points',
+                    href: AppRoutes.points,
+                    event: NAVIGATION_EVENTS.OPEN_POINTS,
+                  },
+                  {
+                    label: 'Locking',
                     href: AppRoutes.activity,
                     event: NAVIGATION_EVENTS.OPEN_LOCKING,
                   },

src/components/Points/ActivityList.tsx

@@ -0,0 +1,31 @@
+import { Campaign } from '@/hooks/useCampaigns'
+import { InfoOutlined } from '@mui/icons-material'
+import { Grid, Stack, Tooltip, Typography } from '@mui/material'
+
+export const ActivityList = ({ campaign }: { campaign?: Campaign }) => {
+  const { activitiesMetadata } = campaign ?? {}
+  return (
+    <Grid container direction="row" spacing={2}>
+      {activitiesMetadata?.map((activity) => (
+        <Grid key={activity.name} item xs={12}>
+          <Stack
+            direction="row"
+            alignItems="center"
+            justifyContent="center"
+            spacing={1}
+            sx={{
+              border: ({ palette }) => `1px solid ${palette.border.light}`,
+              padding: 2,
+              borderRadius: '6px',
+            }}
+          >
+            <Typography>{activity.name}</Typography>
+            <Tooltip title={activity.description}>
+              <InfoOutlined fontSize="small" color="border" />
+            </Tooltip>
+          </Stack>
+        </Grid>
+      ))}
+    </Grid>
+  )
+}