fix: Remove StatusProgress and add individual first step cards

src/components/dashboard/FirstSteps/index.tsx

@@ -1,62 +1,72 @@
 import useBalances from '@/hooks/useBalances'
 import { useAppSelector } from '@/store'
 import { selectOutgoingTransactions } from '@/store/txHistorySlice'
-import { type ReactNode, useMemo } from 'react'
+import { useMemo } from 'react'
 import { Card, WidgetBody, WidgetContainer } from '@/components/dashboard/styled'
-import { LinearProgress, List, ListItem, ListItemIcon, Typography } from '@mui/material'
+import { Button, CircularProgress, Grid, Link, Typography } from '@mui/material'
 import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined'
 import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'
-
-const StatusItem = ({ children, completed = false }: { children: ReactNode; completed?: boolean }) => {
-  return (
-    <ListItem disableGutters>
-      <ListItemIcon sx={{ minWidth: 24, mr: 1, color: (theme) => theme.palette.primary.main }}>
-        {completed ? <CheckCircleRoundedIcon /> : <CircleOutlinedIcon />}
-      </ListItemIcon>
-      {children}
-    </ListItem>
-  )
-}
-
-type StatusProgressItems = Array<{
-  name: string
-  completed: boolean
-}>
+import css from './styles.module.css'
 
 const calculateProgress = (items: StatusProgressItems) => {
   const totalNumberOfItems = items.length
   const completedItems = items.filter((item) => item.completed)
   return Math.round((completedItems.length / totalNumberOfItems) * 100)
 }
 
-const StatusProgress = ({ items }: { items: StatusProgressItems }) => {
-  const progress = calculateProgress(items)
-
+const StatusCard = ({
+  badge,
+  step,
+  title,
+  content,
+  completed,
+}: {
+  badge: string
+  step: number
+  title: string
+  content: string
+  completed: boolean
+}) => {
   return (
-    <>
-      <List disablePadding sx={{ py: 3 }}>
-        {items.map(({ name, completed }) => {
-          return (
-            <StatusItem key={name} completed={completed}>
-              {name}
-            </StatusItem>
-          )
-        })}
-      </List>
-      <LinearProgress color="secondary" variant="determinate" value={progress} sx={{ borderRadius: 1 }} />
-      <Typography variant="body2" mt={0.5}>
-        {progress}% completed
+    <Card className={css.card}>
+      <div className={css.topBadge}>
+        <Typography variant="body2">{badge}</Typography>
+      </div>
+      <div className={css.status}>
+        {completed ? (
+          <CheckCircleRoundedIcon color="primary" fontSize="medium" />
+        ) : (
+          <CircleOutlinedIcon color="inherit" fontSize="medium" />
+        )}
+      </div>
+      <Typography variant="h4" fontWeight="bold" mb={2}>
+        <span className={css.circleBadge}>{step}</span>
+        {title}
       </Typography>
-    </>
+      <Typography>{content}</Typography>
+    </Card>
   )
 }
 
-enum FirstStepNames {
-  AddFunds = 'Add funds',
-  CreateFirstTx = 'Create your first transaction',
-  SafeReady = 'Safe is ready',
+type StatusProgressItem = {
+  title: string
+  content: string
+  completed?: boolean
 }
 
+type StatusProgressItems = Array<StatusProgressItem>
+
+const FirstStepsContent: StatusProgressItems = [
+  {
+    title: 'Add funds',
+    content: 'Receive assets to start interacting with your account.',
+  },
+  {
+    title: 'Create your first transaction',
+    content: 'Do a simple transfer or use a safe app to create your first transaction.',
+  },
+]
+
 const FirstSteps = () => {
   const { balances } = useBalances()
   const outgoingTransactions = useAppSelector(selectOutgoingTransactions)
@@ -66,22 +76,81 @@ const FirstSteps = () => {
 
   const items = useMemo(
     () => [
-      { name: FirstStepNames.AddFunds, completed: hasNonZeroBalance },
-      { name: FirstStepNames.CreateFirstTx, completed: hasOutgoingTransactions },
-      { name: FirstStepNames.SafeReady, completed: hasNonZeroBalance && hasOutgoingTransactions },
+      { ...FirstStepsContent[0], completed: hasNonZeroBalance },
+      { ...FirstStepsContent[1], completed: hasOutgoingTransactions },
     ],
     [hasNonZeroBalance, hasOutgoingTransactions],
   )
 
+  const activateAccount = () => {
+    // TODO: Open safe deployment flow
+  }
+
+  const progress = calculateProgress(items)
+  const stepsCompleted = items.filter((item) => item.completed).length
+  const isCounterfactual = false // TODO: Add real check here
+
+  if (!isCounterfactual) return null
+
   return (
     <WidgetContainer>
       <WidgetBody>
-        <Card>
-          <Typography variant="h4" fontWeight="bold">
-            First steps
-          </Typography>
-          <StatusProgress items={items} />
-        </Card>
+        <Grid container gap={3} mb={2} flexWrap="nowrap">
+          <Grid item position="relative">
+            <CircularProgress variant="determinate" value={100} className={css.circleBg} size={60} thickness={5} />
+            <CircularProgress
+              variant="determinate"
+              value={progress}
+              className={css.circleProgress}
+              size={60}
+              thickness={5}
+            />
+          </Grid>
+          <Grid item>
+            <Typography component="div" variant="h2" fontWeight={700} mb={1}>
+              Activate your Safe Account
+            </Typography>
+            <Typography variant="body2">
+              <strong>
+                {stepsCompleted} of {items.length} steps completed.
+              </strong>{' '}
+              {progress === 100 ? (
+                <>
+                  Congratulations! You finished the first steps. <Link>Hide this section</Link>
+                </>
+              ) : (
+                'Finish the next steps to start using all Safe Account features:'
+              )}
+            </Typography>
+          </Grid>
+        </Grid>
+        <Grid container spacing={3}>
+          {items.map((item, index) => {
+            return (
+              <Grid item xs={12} md={4} key={item.title}>
+                <StatusCard
+                  badge="First steps"
+                  step={index + 1}
+                  title={item.title}
+                  content={item.content}
+                  completed={item.completed}
+                />
+              </Grid>
+            )
+          })}
+
+          <Grid item xs={12} md={4}>
+            <Card className={css.card}>
+              <Typography variant="h4" fontWeight="bold" mb={2}>
+                Skip first steps
+              </Typography>
+              <Typography mb={2}>Pay a network fee to immediately access all Safe Account features.</Typography>
+              <Button variant="contained" onClick={activateAccount}>
+                Activate Safe Account
+              </Button>
+            </Card>
+          </Grid>
+        </Grid>
       </WidgetBody>
     </WidgetContainer>
   )

src/components/dashboard/FirstSteps/styles.module.css

@@ -0,0 +1,43 @@
+.circleProgress {
+  color: var(--color-secondary-main);
+}
+
+.circleBg {
+  color: var(--color-border-light);
+  position: absolute;
+}
+
+.circleBadge {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--color-secondary-light);
+  text-align: center;
+  font-weight: normal;
+  font-size: 16px;
+  display: inline-block;
+  margin-right: var(--space-1);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  min-height: 240px;
+}
+
+.topBadge {
+  position: absolute;
+  top: 0;
+  right: 24px;
+  background-color: var(--color-secondary-light);
+  border-radius: 0 0 4px 4px;
+  padding: 4px var(--space-1);
+}
+
+.status {
+  align-self: flex-start;
+  margin-bottom: auto;
+  color: var(--color-border-light);
+}

src/components/dashboard/index.tsx

@@ -34,11 +34,7 @@ const Dashboard = (): ReactElement => {
         </Grid>
 
         <Grid item xs={12}>
-          <Grid container>
-            <Grid item xs={12} lg={4}>
-              <FirstSteps />
-            </Grid>
-          </Grid>
+          <FirstSteps />
         </Grid>
 
         <Grid item xs={12} lg={6}>