diff --git a/public/images/transactions/recovery-execution.svg b/public/images/transactions/recovery-execution.svg
new file mode 100644
index 0000000000..cc395ac152
--- /dev/null
+++ b/public/images/transactions/recovery-execution.svg
@@ -0,0 +1,8 @@
+
diff --git a/public/images/transactions/recovery-guardian.svg b/public/images/transactions/recovery-guardian.svg
new file mode 100644
index 0000000000..0522763c01
--- /dev/null
+++ b/public/images/transactions/recovery-guardian.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/components/tx-flow/common/TxLayout/index.tsx b/src/components/tx-flow/common/TxLayout/index.tsx
index c31b676db4..58863b306e 100644
--- a/src/components/tx-flow/common/TxLayout/index.tsx
+++ b/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 = ({
-
-
-
+ {!hideProgress && (
+
+
+
+ )}
diff --git a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowIntro.tsx b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowIntro.tsx
index 6d8296c2c8..6e75d7aa85 100644
--- a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowIntro.tsx
+++ b/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 EnableRecoveryFlowIntro
+import commonCss from '@/components/tx-flow/common/styles.module.css'
+
+const RecoverySteps: Array<{ icon: ReactElement; title: string; subtitle: ReactNode }> = [
+ {
+ icon: ,
+ 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: ,
+ 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: ,
+ title: 'Start the recovery process',
+ subtitle: (
+ <>
+ Your guardian chooses new Safe Account owner(s) that you control and can initiates the recovery
+ transaction.
+
+ ),
+ },
+ {
+ icon: ,
+ 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 (
+
+
+ {RecoverySteps.map(({ icon, title, subtitle }, index) => (
+
+
+ {icon}
+
+
+ {title}
+
+ {subtitle}
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ )
}
diff --git a/src/components/tx-flow/flows/EnableRecovery/index.tsx b/src/components/tx-flow/flows/EnableRecovery/index.tsx
index 2f092732c7..2784c3441a 100644
--- a/src/components/tx-flow/flows/EnableRecovery/index.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/index.tsx
@@ -27,7 +27,7 @@ export function EnableRecoveryFlow(): ReactElement {
})
const steps = [
- ,
+ nextStep(data)} />,
nextStep({ ...data, ...formData })} />,
,
]
@@ -51,6 +51,7 @@ export function EnableRecoveryFlow(): ReactElement {
step={step}
onBack={prevStep}
hideNonce={isIntro}
+ hideProgress={isIntro}
>
{steps}