feat: recovery dashboard widget

cypress/e2e/safe-apps/tx-builder.spec.cy.js

@@ -146,8 +146,8 @@ describe('Tx-builder Safe App tests', { defaultCommandTimeout: 20000 }, () => {
       getBody().findByText(safeapps.createBatchStr).click()
       getBody().findByText(safeapps.sendBatchStr).click()
     })
-    cy.get('p').contains('1').should('be.visible')
-    cy.get('p').contains('2').should('be.visible')
+    cy.get('p').contains('1').should('exist')
+    cy.get('p').contains('2').should('exist')
   })
 
   it('Verify a batch cannot be created with invalid address [C56617]', () => {

src/components/dashboard/Recovery/index.tsx

@@ -0,0 +1,45 @@
+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 css from './styles.module.css'
+
+export function Recovery(): ReactElement {
+  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="primary" 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/utils/chains.ts

@@ -16,6 +16,7 @@ export enum FEATURES {
   RISK_MITIGATION = 'RISK_MITIGATION',
   PUSH_NOTIFICATIONS = 'PUSH_NOTIFICATIONS',
   NATIVE_WALLETCONNECT = 'NATIVE_WALLETCONNECT',
+  RECOVERY = 'RECOVERY',
 }
 
 export const hasFeature = (chain: ChainInfo, feature: FEATURES): boolean => {