fix: show estimation warnings on Safes that require safeTxGas (#3825)

* fix: show error message for older Safes

* fix: `waitFor` test result

Author: Aaron Cook

src/logic/hooks/__tests__/useEstimateSafeTxGas.test.ts

@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/react'
 import { renderHook, act } from '@testing-library/react-hooks'
 import { useEstimateSafeTxGas } from 'src/logic/hooks/useEstimateSafeTxGas'
 import * as gas from 'src/logic/safe/transactions/gas'
@@ -20,26 +21,6 @@ const actResolve = async (callback: () => unknown): Promise<void> => {
 }
 
 describe('useEstimateSafeTxGas', () => {
-  it(`should return 0 if it is not a tx creation`, async () => {
-    const spy = jest.spyOn(gas, 'estimateSafeTxGas')
-
-    await actResolve(() => {
-      const { result } = renderHook(() =>
-        useEstimateSafeTxGas({
-          txAmount: '',
-          txData: '0x',
-          txRecipient: '',
-          isCreation: false,
-          isRejectTx: false,
-        }),
-      )
-
-      expect(result.current).toBe('0')
-    })
-
-    expect(spy).toHaveBeenCalledTimes(0)
-  })
-
   it(`should return 0 if it is a reject tx`, async () => {
     const spy = jest.spyOn(gas, 'estimateSafeTxGas')
 
@@ -49,11 +30,12 @@ describe('useEstimateSafeTxGas', () => {
           txAmount: '',
           txData: '0x',
           txRecipient: '',
-          isCreation: false,
           isRejectTx: true,
         }),
       )
-      expect(result.current).toBe('0')
+
+      expect(result.current.result).toBe('0')
+      expect(result.current.error).toBe(undefined)
     })
 
     expect(spy).toHaveBeenCalledTimes(0)
@@ -68,12 +50,12 @@ describe('useEstimateSafeTxGas', () => {
           txAmount: '',
           txData: '',
           txRecipient: '',
-          isCreation: true,
           isRejectTx: false,
         }),
       )
 
-      expect(result.current).toBe('0')
+      expect(result.current.result).toBe('0')
+      expect(result.current.error).toBe(undefined)
     })
 
     expect(spy).toHaveBeenCalledTimes(0)
@@ -88,7 +70,6 @@ describe('useEstimateSafeTxGas', () => {
           txAmount: '',
           txData: '0x',
           txRecipient: '',
-          isCreation: true,
           isRejectTx: false,
         }),
       )
@@ -97,22 +78,25 @@ describe('useEstimateSafeTxGas', () => {
     expect(spy).toHaveBeenCalledTimes(1)
   })
 
-  it(`returns 0 if estimateSafeTxGas throws`, async () => {
+  it(`returns 0 and the error if estimateSafeTxGas throws`, async () => {
     const spy = jest.spyOn(gas, 'estimateSafeTxGas').mockImplementation(() => {
-      throw new Error()
+      throw new Error('Estimation failed')
     })
 
-    await actResolve(() => {
+    await actResolve(async () => {
       const { result } = renderHook(() =>
         useEstimateSafeTxGas({
           txAmount: '',
           txData: '0x',
           txRecipient: '',
-          isCreation: true,
           isRejectTx: false,
         }),
       )
-      expect(result.current).toBe('0')
+
+      await waitFor(() => {
+        expect(result.current.result).toBe('0')
+        expect(result.current.error?.message).toBe('Estimation failed')
+      })
     })
 
     expect(spy).toHaveBeenCalledTimes(1)

src/logic/hooks/useEstimateSafeTxGas.tsx

@@ -7,7 +7,6 @@ import { currentSafe } from 'src/logic/safe/store/selectors'
 import useAsync from 'src/logic/hooks/useAsync'
 
 type UseEstimateSafeTxGasProps = {
-  isCreation: boolean
   isRejectTx: boolean
   txData: string
   txRecipient: string
@@ -16,18 +15,17 @@ type UseEstimateSafeTxGasProps = {
 }
 
 export const useEstimateSafeTxGas = ({
-  isCreation,
   isRejectTx,
   txData,
   txRecipient,
   txAmount,
   operation,
-}: UseEstimateSafeTxGasProps): string => {
+}: UseEstimateSafeTxGasProps): { result: string; error: Error | undefined } => {
   const defaultEstimation = '0'
   const { address: safeAddress, currentVersion: safeVersion } = useSelector(currentSafe)
 
   const requestSafeTxGas = useCallback((): Promise<string> => {
-    if (!isCreation || isRejectTx || !txData) return Promise.resolve(defaultEstimation)
+    if (isRejectTx || !txData) return Promise.resolve(defaultEstimation)
 
     return estimateSafeTxGas(
       {
@@ -39,9 +37,9 @@ export const useEstimateSafeTxGas = ({
       },
       safeVersion,
     )
-  }, [isCreation, isRejectTx, operation, safeAddress, safeVersion, txAmount, txData, txRecipient])
+  }, [isRejectTx, operation, safeAddress, safeVersion, txAmount, txData, txRecipient])
 
-  const { result } = useAsync<string>(requestSafeTxGas)
+  const { result, error } = useAsync<string>(requestSafeTxGas)
 
-  return result || defaultEstimation
+  return { result: result || defaultEstimation, error }
 }

src/routes/safe/components/Transactions/helpers/TxModalWrapper/index.tsx

@@ -117,8 +117,7 @@ export const TxModalWrapper = ({
 
   const approvalAndExecution = isApproveAndExecute(Number(threshold), confirmationsLen, txType, preApprovingOwner)
 
-  const safeTxGasEstimation = useEstimateSafeTxGas({
-    isCreation,
+  const { result: safeTxGasEstimation, error: safeTxGasError } = useEstimateSafeTxGas({
     isRejectTx,
     txData,
     txRecipient: txTo || safeAddress,
@@ -235,7 +234,7 @@ export const TxModalWrapper = ({
               isExecution={doExecute}
               isRejection={isRejectTx}
               safeNonce={txParameters.safeNonce}
-              txEstimationExecutionStatus={txEstimationExecutionStatus}
+              txEstimationExecutionStatus={safeTxGasError ? EstimationStatus.FAILURE : txEstimationExecutionStatus}
             />
           )}