From 7244e2e4432f56d3ce0355d9e2ebdfe383a652a5 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Mon, 20 Nov 2023 11:58:49 +0100
Subject: [PATCH] fix: rerender + spacing

---
 .../EnableRecovery/EnableRecoveryFlowEmailHint.tsx   |  2 +-
 .../EnableRecovery/EnableRecoveryFlowReview.tsx      |  7 ++++---
 .../EnableRecovery/EnableRecoveryFlowSettings.tsx    | 12 ++++++++----
 src/services/recovery/__tests__/setup.test.ts        | 12 +++---------
 src/services/recovery/setup.ts                       | 11 +++++------
 5 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowEmailHint.tsx b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowEmailHint.tsx
index 8a9ad8655e..4f5c81551e 100644
--- a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowEmailHint.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowEmailHint.tsx
@@ -3,7 +3,7 @@ import type { ReactElement } from 'react'
 
 import LightbulbIcon from '@/public/images/common/lightbulb.svg'
 
-import infoWidgetCss from 'src/components/new-safe/create/InfoWidget/styles.module.css'
+import infoWidgetCss from '@/components/new-safe/create/InfoWidget/styles.module.css'
 
 export function EnableRecoveryFlowEmailHint(): ReactElement {
   return (
diff --git a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowReview.tsx b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowReview.tsx
index 245087b784..0b5322c5c9 100644
--- a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowReview.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowReview.tsx
@@ -17,7 +17,7 @@ import type { EnableRecoveryFlowProps } from '.'
 
 export function EnableRecoveryFlowReview({ params }: { params: EnableRecoveryFlowProps }): ReactElement {
   const web3 = useWeb3()
-  const { safe } = useSafeInfo()
+  const { safe, safeAddress } = useSafeInfo()
   const { setSafeTx, safeTxError, setSafeTxError } = useContext(SafeTxContext)
 
   const guardian = params[EnableRecoveryFlowFields.guardians]
@@ -35,12 +35,13 @@ export function EnableRecoveryFlowReview({ params }: { params: EnableRecoveryFlo
     const { transactions } = getRecoverySetup({
       ...params,
       guardians: [guardian],
-      safe,
+      chainId: safe.chainId,
+      safeAddress,
       provider: web3,
     })
 
     createMultiSendCallOnlyTx(transactions).then(setSafeTx).catch(setSafeTxError)
-  }, [guardian, params, safe, setSafeTx, setSafeTxError, web3])
+  }, [guardian, params, safe.chainId, safeAddress, setSafeTx, setSafeTxError, web3])
 
   useEffect(() => {
     if (safeTxError) {
diff --git a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
index 7bbac1363f..8ea926cf03 100644
--- a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
@@ -122,11 +122,15 @@ export function EnableRecoveryFlowSettings({
               <Typography variant="caption">Recommended</Typography>
             </div>
 
-            <Typography variant="h5">Receive email updates</Typography>
+            <div>
+              <Typography variant="h5" gutterBottom>
+                Receive email updates
+              </Typography>
 
-            <Typography variant="body2" mb={1}>
-              Get notified about any recovery initiations and their statuses.
-            </Typography>
+              <Typography variant="body2" mb={1}>
+                Get notified about any recovery initiations and their statuses.
+              </Typography>
+            </div>
 
             <Controller
               control={formMethods.control}
diff --git a/src/services/recovery/__tests__/setup.test.ts b/src/services/recovery/__tests__/setup.test.ts
index f2e4951b31..3b2ea34373 100644
--- a/src/services/recovery/__tests__/setup.test.ts
+++ b/src/services/recovery/__tests__/setup.test.ts
@@ -2,7 +2,6 @@ import { getModuleInstance, KnownContracts, deployAndSetUpModule } from '@gnosis
 import { faker } from '@faker-js/faker'
 import { BigNumber } from 'ethers'
 import type { Web3Provider } from '@ethersproject/providers'
-import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 import { getRecoverySetup } from '@/services/recovery/setup'
 
@@ -26,12 +25,6 @@ describe('getRecoverySetup', () => {
     const guardians = [faker.finance.ethereumAddress()]
     const safeAddress = faker.finance.ethereumAddress()
     const chainId = faker.string.numeric()
-    const safe = {
-      address: {
-        value: safeAddress,
-      },
-      chainId,
-    } as SafeInfo
     const provider = {} as Web3Provider
 
     const expectedModuleAddress = faker.finance.ethereumAddress()
@@ -54,7 +47,8 @@ describe('getRecoverySetup', () => {
       txCooldown,
       txExpiration,
       guardians,
-      safe,
+      chainId,
+      safeAddress,
       provider,
     })
 
@@ -72,7 +66,7 @@ describe('getRecoverySetup', () => {
         ],
       },
       provider,
-      Number(safe.chainId),
+      Number(chainId),
       expect.any(String),
     )
 
diff --git a/src/services/recovery/setup.ts b/src/services/recovery/setup.ts
index 6e8291468a..643b3708e9 100644
--- a/src/services/recovery/setup.ts
+++ b/src/services/recovery/setup.ts
@@ -1,27 +1,26 @@
 import { getModuleInstance, KnownContracts, deployAndSetUpModule } from '@gnosis.pm/zodiac'
 import { Interface } from 'ethers/lib/utils'
 import type { Web3Provider } from '@ethersproject/providers'
-import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import type { MetaTransactionData } from '@safe-global/safe-core-sdk-types'
 
 export function getRecoverySetup({
   txCooldown,
   txExpiration,
   guardians,
-  safe,
+  chainId,
+  safeAddress,
   provider,
 }: {
   txCooldown: string
   txExpiration: string
   guardians: Array<string>
-  safe: SafeInfo
+  chainId: string
+  safeAddress: string
   provider: Web3Provider
 }): {
   expectedModuleAddress: string
   transactions: Array<MetaTransactionData>
 } {
-  const safeAddress = safe.address.value
-
   const setupArgs: Parameters<typeof deployAndSetUpModule>[1] = {
     types: ['address', 'address', 'address', 'uint256', 'uint256'],
     values: [
@@ -39,7 +38,7 @@ export function getRecoverySetup({
     KnownContracts.DELAY,
     setupArgs,
     provider,
-    Number(safe.chainId),
+    Number(chainId),
     saltNonce,
   )