feat: recovery dashboard widget

src/components/dashboard/Recovery/index.tsx

@@ -0,0 +1,48 @@
+import { Box, Button, Card, Chip, Grid, Typography } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import RecoveryLogo from '@/public/images/common/recovery.svg'
+import { WidgetBody, WidgetContainer } from '@/components/dashboard/styled'
+import { useDarkMode } from '@/hooks/useDarkMode'
+
+import css from './styles.module.css'
+
+export function Recovery(): ReactElement {
+  const isDarkMode = useDarkMode()
+
+  const onClick = () => {
+    // TODO: Open enable recovery flow
+  }
+
+  return (
+    <WidgetContainer>
+      <Typography component="h2" variant="subtitle1" className={css.label}>
+        New in {'Safe{Wallet}'}
+      </Typography>
+
+      <WidgetBody>
+        <Card className={css.card}>
+          <Grid container className={css.grid}>
+            <Grid item>
+              <RecoveryLogo alt="Vault with a circular arrow around it" />
+            </Grid>
+            <Grid item xs>
+              <Box className={css.wrapper}>
+                <Typography variant="h4" className={css.title}>
+                  Introducing account recovery{' '}
+                </Typography>
+                <Chip label="New" color={isDarkMode ? 'primary' : 'secondary'} size="small" className={css.chip} />
+              </Box>
+              <Typography mt={1} mb={3}>
+                Ensure that you never lose access to your funds by choosing a guardian to recover your account.
+              </Typography>
+              <Button variant="contained" onClick={onClick}>
+                Set up recovery
+              </Button>
+            </Grid>
+          </Grid>
+        </Card>
+      </WidgetBody>
+    </WidgetContainer>
+  )
+}

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

@@ -0,0 +1,32 @@
+.label {
+  font-weight: 700;
+  margin-bottom: var(--space-2);
+}
+
+.card {
+  padding: var(--space-4);
+  height: inherit;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  height: inherit;
+  gap: var(--space-3);
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.title {
+  font-weight: 700;
+  display: inline;
+}
+
+.chip {
+  border-radius: 4px;
+  font-size: 12px;
+}

src/components/dashboard/index.tsx

@@ -7,14 +7,14 @@ import SafeAppsDashboardSection from '@/components/dashboard/SafeAppsDashboardSe
 import GovernanceSection from '@/components/dashboard/GovernanceSection/GovernanceSection'
 import CreationDialog from '@/components/dashboard/CreationDialog'
 import { useRouter } from 'next/router'
-import Relaying from '@/components/dashboard/Relaying'
+import { Recovery } from './Recovery'
 import { FEATURES } from '@/utils/chains'
 import { useHasFeature } from '@/hooks/useChains'
 import { CREATION_MODAL_QUERY_PARM } from '../new-safe/create/logic'
 
 const Dashboard = (): ReactElement => {
   const router = useRouter()
-  const supportsRelaying = useHasFeature(FEATURES.RELAYING)
+  const supportsRecovery = useHasFeature(FEATURES.RECOVERY)
   const { [CREATION_MODAL_QUERY_PARM]: showCreationModal = '' } = router.query
 
   return (
@@ -28,13 +28,13 @@ const Dashboard = (): ReactElement => {
           <PendingTxsList />
         </Grid>
 
-        <Grid item xs={12} lg={supportsRelaying ? 6 : undefined}>
-          <FeaturedApps stackedLayout={!!supportsRelaying} />
+        <Grid item xs={12} lg={supportsRecovery ? 6 : undefined}>
+          <FeaturedApps stackedLayout={!!supportsRecovery} />
         </Grid>
 
-        {supportsRelaying ? (
+        {supportsRecovery ? (
           <Grid item xs={12} lg={6}>
-            <Relaying />
+            <Recovery />
           </Grid>
         ) : null}
 

src/hooks/__tests__/useLoadRecovery.test.ts

@@ -127,6 +127,12 @@ describe('useLoadRecovery', () => {
             txNonce,
             queueNonce,
             queue: [
+              {
+                ...transactionsAdded[0],
+                timestamp: 69,
+                validFrom: BigNumber.from(69).add(txCooldown),
+                expiresAt: null,
+              },
               {
                 ...transactionsAdded[1],
                 timestamp: 420,