fix: get Safe address on-chain for ZK creations

src/components/new-safe/create/steps/ReviewStep/index.tsx

@@ -26,6 +26,7 @@ import classnames from 'classnames'
 import { hasRemainingRelays } from '@/utils/relaying'
 import { BigNumber } from 'ethers'
 import { usePendingSafe } from '../StatusStep/usePendingSafe'
+import { useIsZkEvmChain } from '../StatusStep/useIsZkEvmChain'
 
 const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafeFormData>) => {
   const isWrongChain = useIsWrongChain()
@@ -37,6 +38,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
   const saltNonce = useMemo(() => Date.now(), [])
   const [_, setPendingSafe] = usePendingSafe()
   const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)
+  const isZkEvmChain = useIsZkEvmChain()
 
   const ownerAddresses = useMemo(() => data.owners.map((owner) => owner.address), [data.owners])
   const [minRelays] = useLeastRemainingRelays(ownerAddresses)
@@ -91,7 +93,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
       },
     }
 
-    const safeAddress = await computeNewSafeAddress(provider, props)
+    const safeAddress = isZkEvmChain ? undefined : await computeNewSafeAddress(provider, props)
 
     const pendingSafe = {
       ...data,

src/components/new-safe/create/steps/StatusStep/StatusStepper.tsx

@@ -1,40 +1,82 @@
 import { Box, Step, StepConnector, Stepper, Typography } from '@mui/material'
+import { useEffect } from 'react'
 import css from '@/components/new-safe/create/steps/StatusStep/styles.module.css'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import { SafeCreationStatus } from '@/components/new-safe/create/steps/StatusStep/useSafeCreation'
 import StatusStep from '@/components/new-safe/create/steps/StatusStep/StatusStep'
 import { usePendingSafe } from './usePendingSafe'
+import { useIsZkEvmChain } from './useIsZkEvmChain'
+import { useWeb3ReadOnly } from '@/hooks/wallets/web3'
+
+// TODO: Remove when we update SDK
+const useSyncZkEvmSafeAddress = (status: SafeCreationStatus) => {
+  const isZkEvmChain = useIsZkEvmChain()
+  const [pendingSafe, setPendingSafe] = usePendingSafe()
+  const web3ReadOnly = useWeb3ReadOnly()
+
+  useEffect(() => {
+    if (
+      !isZkEvmChain ||
+      status !== SafeCreationStatus.SUCCESS ||
+      !pendingSafe ||
+      !pendingSafe.txHash ||
+      pendingSafe.safeAddress ||
+      !web3ReadOnly
+    ) {
+      return
+    }
+
+    let isCurrent = true
+
+    web3ReadOnly
+      .getTransactionReceipt(pendingSafe.txHash)
+      .then((receipt) => {
+        if (isCurrent) {
+          const safeAddress = receipt.logs[0].address
+          setPendingSafe(pendingSafe ? { ...pendingSafe, safeAddress } : undefined)
+        }
+      })
+      .catch(() => null)
+
+    return () => {
+      isCurrent = false
+    }
+  }, [status, web3ReadOnly, pendingSafe, pendingSafe?.txHash, pendingSafe?.safeAddress, isZkEvmChain, setPendingSafe])
+}
 
 const StatusStepper = ({ status }: { status: SafeCreationStatus }) => {
   const [pendingSafe] = usePendingSafe()
-  if (!pendingSafe?.safeAddress) return null
+
+  useSyncZkEvmSafeAddress(status)
 
   return (
     <Stepper orientation="vertical" nonLinear connector={<StepConnector className={css.connector} />}>
+      {pendingSafe?.safeAddress && (
+        <Step>
+          <StatusStep isLoading={!pendingSafe.safeAddress} safeAddress={pendingSafe.safeAddress}>
+            <Box>
+              <Typography variant="body2" fontWeight="700">
+                Your Safe Account address
+              </Typography>
+              <EthHashInfo
+                address={pendingSafe.safeAddress}
+                hasExplorer
+                showCopyButton
+                showName={false}
+                shortAddress={false}
+                showAvatar={false}
+              />
+            </Box>
+          </StatusStep>
+        </Step>
+      )}
       <Step>
-        <StatusStep isLoading={!pendingSafe.safeAddress} safeAddress={pendingSafe.safeAddress}>
-          <Box>
-            <Typography variant="body2" fontWeight="700">
-              Your Safe Account address
-            </Typography>
-            <EthHashInfo
-              address={pendingSafe.safeAddress}
-              hasExplorer
-              showCopyButton
-              showName={false}
-              shortAddress={false}
-              showAvatar={false}
-            />
-          </Box>
-        </StatusStep>
-      </Step>
-      <Step>
-        <StatusStep isLoading={!(pendingSafe.txHash || pendingSafe.taskId)} safeAddress={pendingSafe.safeAddress}>
+        <StatusStep isLoading={!(pendingSafe?.txHash || pendingSafe?.taskId)} safeAddress={pendingSafe?.safeAddress}>
           <Box>
             <Typography variant="body2" fontWeight="700">
               Validating transaction
             </Typography>
-            {pendingSafe.txHash && (
+            {pendingSafe?.txHash && (
               <EthHashInfo
                 address={pendingSafe.txHash}
                 hasExplorer
@@ -48,14 +90,14 @@ const StatusStepper = ({ status }: { status: SafeCreationStatus }) => {
         </StatusStep>
       </Step>
       <Step>
-        <StatusStep isLoading={status < SafeCreationStatus.SUCCESS} safeAddress={pendingSafe.safeAddress}>
+        <StatusStep isLoading={status < SafeCreationStatus.SUCCESS} safeAddress={pendingSafe?.safeAddress}>
           <Typography variant="body2" fontWeight="700">
             Indexing
           </Typography>
         </StatusStep>
       </Step>
       <Step>
-        <StatusStep isLoading={status !== SafeCreationStatus.INDEXED} safeAddress={pendingSafe.safeAddress}>
+        <StatusStep isLoading={status !== SafeCreationStatus.INDEXED} safeAddress={pendingSafe?.safeAddress}>
           <Typography variant="body2" fontWeight="700">
             Safe Account is ready
           </Typography>

src/components/new-safe/create/steps/StatusStep/useIsZkEvmChain.ts

@@ -0,0 +1,13 @@
+import useChainId from '@/hooks/useChainId'
+
+enum ZkChains {
+  ZKSYNC_ERA_MAINNET = '324',
+  POLYGON_ZKEVM = '1101',
+}
+
+// TODO: Remove when we update SDK
+export const useIsZkEvmChain = (): boolean => {
+  const chainId = useChainId()
+
+  return Object.values(ZkChains).includes(chainId as ZkChains)
+}