feat: intro step

src/components/tx-flow/common/TxLayout/index.tsx

@@ -55,6 +55,7 @@ type TxLayoutProps = {
   txSummary?: TransactionSummary
   onBack?: () => void
   hideNonce?: boolean
+  hideProgress?: boolean
   isBatch?: boolean
   isReplacement?: boolean
   isMessage?: boolean
@@ -69,6 +70,7 @@ const TxLayout = ({
   txSummary,
   onBack,
   hideNonce = false,
+  hideProgress = false,
   isBatch = false,
   isReplacement = false,
   isMessage = false,
@@ -117,9 +119,11 @@ const TxLayout = ({
                   </div>
 
                   <Paper className={css.header}>
-                    <Box className={css.progressBar}>
-                      <ProgressBar value={progress} />
-                    </Box>
+                    {!hideProgress && (
+                      <Box className={css.progressBar}>
+                        <ProgressBar value={progress} />
+                      </Box>
+                    )}
 
                     <TxLayoutHeader subtitle={subtitle} icon={icon} hideNonce={hideNonce} />
                   </Paper>

src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowIntro.tsx

@@ -1,7 +1,70 @@
-import type { ReactElement } from 'react'
+import { Button, CardActions, Divider, Grid, Typography } from '@mui/material'
+import type { ReactElement, ReactNode } from 'react'
 
 import TxCard from '../../common/TxCard'
+import RecoveryGuardians from '@/public/images/settings/spending-limit/beneficiary.svg'
+import RecoveryGuardian from '@/public/images/transactions/recovery-guardian.svg'
+import RecoveryDelay from '@/public/images/settings/spending-limit/time.svg'
+import RecoveryExecution from '@/public/images/transactions/recovery-execution.svg'
 
-export function EnableRecoveryFlowIntro(): ReactElement {
-  return <TxCard>EnableRecoveryFlowIntro</TxCard>
+import commonCss from '@/components/tx-flow/common/styles.module.css'
+
+const RecoverySteps: Array<{ icon: ReactElement; title: string; subtitle: ReactNode }> = [
+  {
+    icon: <RecoveryGuardians />,
+    title: 'Choose a guardian and set a delay',
+    subtitle:
+      'Only your chosen guardian can initiate the recovery process. The process can be cancelled at any time during the delay period.',
+  },
+  {
+    icon: <RecoveryGuardian />,
+    title: 'Lost access? Let the guardian connect',
+    subtitle: 'The recovery process can be initiated by a trusted guardian when connected to your Safe Account.',
+  },
+  {
+    icon: <RecoveryDelay />,
+    title: 'Start the recovery process',
+    subtitle: (
+      <>
+        Your <b>guardian</b> chooses new Safe Account owner(s) that you control and can initiates the recovery
+        transaction.
+      </>
+    ),
+  },
+  {
+    icon: <RecoveryExecution />,
+    title: 'All done! The Account is yours again',
+    subtitle:
+      'Once the delay period has passed, you can execute the recovery transaction and regain access to your Safe Account.',
+  },
+]
+
+export function EnableRecoveryFlowIntro({ onSubmit }: { onSubmit: () => void }): ReactElement {
+  return (
+    <TxCard>
+      <Grid container display="flex" gap={4}>
+        {RecoverySteps.map(({ icon, title, subtitle }, index) => (
+          <Grid item xs={12} key={index}>
+            <Grid container display="flex" gap={3}>
+              <Grid item>{icon}</Grid>
+              <Grid item xs>
+                <Typography variant="h5" mb={0.5}>
+                  {title}
+                </Typography>
+                <Typography variant="body2">{subtitle}</Typography>
+              </Grid>
+            </Grid>
+          </Grid>
+        ))}
+      </Grid>
+
+      <Divider className={commonCss.nestedDivider} />
+
+      <CardActions sx={{ mt: 'var(--space-1) !important' }}>
+        <Button variant="contained" onClick={onSubmit}>
+          Next
+        </Button>
+      </CardActions>
+    </TxCard>
+  )
 }

src/components/tx-flow/flows/EnableRecovery/index.tsx

@@ -27,7 +27,7 @@ export function EnableRecoveryFlow(): ReactElement {
   })
 
   const steps = [
-    <EnableRecoveryFlowIntro key={0} />,
+    <EnableRecoveryFlowIntro key={0} onSubmit={() => nextStep(data)} />,
     <EnableRecoveryFlowSettings key={1} params={data} onSubmit={(formData) => nextStep({ ...data, ...formData })} />,
     <EnableRecoveryFlowReview key={1} params={data} />,
   ]
@@ -51,6 +51,7 @@ export function EnableRecoveryFlow(): ReactElement {
       step={step}
       onBack={prevStep}
       hideNonce={isIntro}
+      hideProgress={isIntro}
     >
       {steps}
     </TxLayout>