fix: Only watch safe creation tx once

src/components/create-safe/logic/__tests__/index.test.ts

@@ -64,8 +64,15 @@ describe('checkSafeCreationTx', () => {
     expect(result).toBe(SafeCreationStatus.REVERTED)
   })
 
-  it('returns TIMEOUT if transaction couldnt be found within the timout limit', async () => {
-    waitForTxSpy.mockImplementationOnce(() => Promise.reject(new Error()))
+  it('returns TIMEOUT if transaction couldnt be found within the timeout limit', async () => {
+    const mockEthersError = {
+      ...new Error(),
+      receipt: {
+        status: 1,
+      },
+    }
+
+    waitForTxSpy.mockImplementationOnce(() => Promise.reject(mockEthersError))
 
     const result = await checkSafeCreationTx(provider, mockPendingTx, '0x0')
 
@@ -178,4 +185,19 @@ describe('handleSafeCreationError', () => {
 
     expect(result).toEqual(SafeCreationStatus.TIMEOUT)
   })
+
+  it('returns REVERTED if the tx failed', () => {
+    const mockEthersError = {
+      ...new Error(),
+      code: ErrorCode.UNKNOWN_ERROR,
+      reason: '' as EthersTxReplacedReason,
+      receipt: {
+        status: 0,
+      } as TransactionReceipt,
+    }
+
+    const result = handleSafeCreationError(mockEthersError)
+
+    expect(result).toEqual(SafeCreationStatus.REVERTED)
+  })
 })

src/components/create-safe/logic/index.ts

@@ -172,6 +172,10 @@ export const handleSafeCreationError = (error: EthersError) => {
     }
   }
 
+  if (didRevert(error.receipt)) {
+    return SafeCreationStatus.REVERTED
+  }
+
   return SafeCreationStatus.TIMEOUT
 }
 

src/components/create-safe/status/__tests__/useSafeCreation.test.ts

@@ -9,6 +9,7 @@ import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import type { ChainInfo } from '@gnosis.pm/safe-react-gateway-sdk'
 import { BigNumber } from '@ethersproject/bignumber'
 import { waitFor } from '@testing-library/react'
+import type Safe from '@gnosis.pm/safe-core-sdk'
 
 const mockSafeInfo = {
   data: '0x',
@@ -50,7 +51,7 @@ describe('useSafeCreation', () => {
   })
 
   it('should create a safe if there is no txHash and status is AWAITING', async () => {
-    const createSafeSpy = jest.spyOn(logic, 'createNewSafe')
+    const createSafeSpy = jest.spyOn(logic, 'createNewSafe').mockReturnValue(Promise.resolve({} as Safe))
 
     renderHook(() => useSafeCreation(mockPendingSafe, mockSetPendingSafe, mockStatus, mockSetStatus))
 

src/components/new-safe/steps/Step4/logic/index.ts

@@ -180,6 +180,10 @@ export const handleSafeCreationError = (error: EthersError) => {
     }
   }
 
+  if (didRevert(error.receipt)) {
+    return SafeCreationStatus.REVERTED
+  }
+
   return SafeCreationStatus.TIMEOUT
 }
 

src/components/new-safe/steps/Step4/useSafeCreation.ts

@@ -48,10 +48,11 @@ export const useSafeCreation = (
 
   const createSafeCallback = useCallback(
     async (txHash: string, tx: PendingSafeTx) => {
+      setStatus(SafeCreationStatus.PROCESSING)
       trackEvent(CREATE_SAFE_EVENTS.SUBMIT_CREATE_SAFE)
       setPendingSafe((prev) => (prev ? { ...prev, txHash, tx } : undefined))
     },
-    [setPendingSafe],
+    [setStatus, setPendingSafe],
   )
 
   const createSafe = useCallback(async () => {
@@ -74,6 +75,7 @@ export const useSafeCreation = (
       )
 
       await createNewSafe(provider, safeParams)
+      setStatus(SafeCreationStatus.SUCCESS)
     } catch (err) {
       const _err = err as EthersError
       const status = handleSafeCreationError(_err)
@@ -102,13 +104,13 @@ export const useSafeCreation = (
   useEffect(() => {
     if (status !== SafeCreationStatus.AWAITING) return
 
-    if (pendingSafe?.txHash) {
+    if (pendingSafe?.txHash && !isCreating) {
       void watchSafeTx()
       return
     }
 
     void createSafe()
-  }, [createSafe, watchSafeTx, pendingSafe?.txHash, status])
+  }, [createSafe, watchSafeTx, isCreating, pendingSafe?.txHash, status])
 
   return {
     createSafe,