From 0fb37869516077a163a979e0269b1eecacddd993 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Sat, 18 Nov 2023 20:36:33 +0300
Subject: [PATCH] fix: cleanup code + rename test

---
 .../EnableRecoveryFlowReview.tsx              | 29 +++++++++----------
 .../EnableRecoveryFlowSettings.tsx            |  7 +----
 .../tx-flow/flows/EnableRecovery/index.tsx    | 19 +++++-------
 src/services/recovery/__tests__/setup.test.ts |  2 +-
 4 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowReview.tsx b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowReview.tsx
index 97bb575dcb..245087b784 100644
--- a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowReview.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowReview.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo } from 'react'
+import { useContext, useEffect } from 'react'
 import type { ReactElement } from 'react'
 
 import SignOrExecuteForm from '@/components/tx/SignOrExecuteForm'
@@ -20,23 +20,27 @@ export function EnableRecoveryFlowReview({ params }: { params: EnableRecoveryFlo
   const { safe } = useSafeInfo()
   const { setSafeTx, safeTxError, setSafeTxError } = useContext(SafeTxContext)
 
-  const recoverySetup = useMemo(() => {
+  const guardian = params[EnableRecoveryFlowFields.guardians]
+  const delay = RecoveryDelayPeriods.find(({ value }) => value === params[EnableRecoveryFlowFields.txCooldown])!.label
+  const expiration = RecoveryExpirationPeriods.find(
+    ({ value }) => value === params[EnableRecoveryFlowFields.txExpiration],
+  )!.label
+  const emailAddress = params[EnableRecoveryFlowFields.emailAddress]
+
+  useEffect(() => {
     if (!web3) {
       return
     }
 
-    return getRecoverySetup({
+    const { transactions } = getRecoverySetup({
       ...params,
+      guardians: [guardian],
       safe,
       provider: web3,
     })
-  }, [params, safe, web3])
 
-  useEffect(() => {
-    if (recoverySetup) {
-      createMultiSendCallOnlyTx(recoverySetup.transactions).then(setSafeTx).catch(setSafeTxError)
-    }
-  }, [recoverySetup, setSafeTx, setSafeTxError])
+    createMultiSendCallOnlyTx(transactions).then(setSafeTx).catch(setSafeTxError)
+  }, [guardian, params, safe, setSafeTx, setSafeTxError, web3])
 
   useEffect(() => {
     if (safeTxError) {
@@ -44,13 +48,6 @@ export function EnableRecoveryFlowReview({ params }: { params: EnableRecoveryFlo
     }
   }, [safeTxError])
 
-  const guardian = params[EnableRecoveryFlowFields.guardians][0]
-  const delay = RecoveryDelayPeriods.find(({ value }) => value === params[EnableRecoveryFlowFields.txCooldown])!.label
-  const expiration = RecoveryExpirationPeriods.find(
-    ({ value }) => value === params[EnableRecoveryFlowFields.txExpiration],
-  )!.label
-  const emailAddress = params[EnableRecoveryFlowFields.emailAddress]
-
   return (
     <SignOrExecuteForm onSubmit={() => null}>
       <Typography>This transaction will enable the Account recovery feature once executed.</Typography>
diff --git a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
index a404ed6e73..5cd84668c9 100644
--- a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
@@ -59,12 +59,7 @@ export function EnableRecoveryFlowSettings({
               recovery process in the future.
             </Typography>
 
-            <AddressBookInput
-              label="Guardian address"
-              name={`${EnableRecoveryFlowFields.guardians}.0`}
-              required
-              fullWidth
-            />
+            <AddressBookInput label="Guardian address" name={EnableRecoveryFlowFields.guardians} required fullWidth />
 
             <Typography variant="h5">Recovery delay</Typography>
 
diff --git a/src/components/tx-flow/flows/EnableRecovery/index.tsx b/src/components/tx-flow/flows/EnableRecovery/index.tsx
index 376d70bead..18a5ea88ef 100644
--- a/src/components/tx-flow/flows/EnableRecovery/index.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/index.tsx
@@ -40,6 +40,8 @@ export const RecoveryExpirationPeriods = [
   ...RecoveryDelayPeriods,
 ] as const
 
+const Subtitles = ['How does recovery work?', 'Set up recovery settings', 'Set up account recovery']
+
 export enum EnableRecoveryFlowFields {
   guardians = 'guardians',
   txCooldown = 'txCooldown',
@@ -48,7 +50,7 @@ export enum EnableRecoveryFlowFields {
 }
 
 export type EnableRecoveryFlowProps = {
-  [EnableRecoveryFlowFields.guardians]: Array<string>
+  [EnableRecoveryFlowFields.guardians]: string
   [EnableRecoveryFlowFields.txCooldown]: string
   [EnableRecoveryFlowFields.txExpiration]: string
   [EnableRecoveryFlowFields.emailAddress]: string
@@ -56,8 +58,8 @@ export type EnableRecoveryFlowProps = {
 
 export function EnableRecoveryFlow(): ReactElement {
   const { data, step, nextStep, prevStep } = useTxStepper<EnableRecoveryFlowProps>({
-    [EnableRecoveryFlowFields.guardians]: [''],
-    [EnableRecoveryFlowFields.txCooldown]: `${60 * 60 * 24 * 28}`, // 28 days in seconds
+    [EnableRecoveryFlowFields.guardians]: '',
+    [EnableRecoveryFlowFields.txCooldown]: `${DAY_SECONDS * 28}`, // 28 days in seconds
     [EnableRecoveryFlowFields.txExpiration]: '0',
     [EnableRecoveryFlowFields.emailAddress]: '',
   })
@@ -65,24 +67,17 @@ export function EnableRecoveryFlow(): ReactElement {
   const steps = [
     <EnableRecoveryFlowIntro key={0} onSubmit={() => nextStep(data)} />,
     <EnableRecoveryFlowSettings key={1} params={data} onSubmit={(formData) => nextStep({ ...data, ...formData })} />,
-    <EnableRecoveryFlowReview key={1} params={data} />,
+    <EnableRecoveryFlowReview key={2} params={data} />,
   ]
 
   const isIntro = step === 0
-  const isSettings = step === 1
-
-  const subtitle = isIntro
-    ? 'How does recovery work?'
-    : isSettings
-    ? 'Set up account recovery settings'
-    : 'Set up account recovery'
 
   const icon = isIntro ? undefined : RecoveryPlus
 
   return (
     <TxLayout
       title="Account recovery"
-      subtitle={subtitle}
+      subtitle={Subtitles[step]}
       icon={icon}
       step={step}
       onBack={prevStep}
diff --git a/src/services/recovery/__tests__/setup.test.ts b/src/services/recovery/__tests__/setup.test.ts
index 258d9a1ab9..f2e4951b31 100644
--- a/src/services/recovery/__tests__/setup.test.ts
+++ b/src/services/recovery/__tests__/setup.test.ts
@@ -20,7 +20,7 @@ describe('getRecoverySetup', () => {
     jest.clearAllMocks()
   })
 
-  it('should deploy Delay Modifier, enable it on Safe and add a Guardian', () => {
+  it('should return deploy Delay Modifier, enable Safe guardian and add a Guardian transactions', () => {
     const txCooldown = faker.string.numeric()
     const txExpiration = faker.string.numeric()
     const guardians = [faker.finance.ethereumAddress()]