feat(tx builder): use cgw for simulation configs (#801)

Instead of using a hardcoded list of chains where simulation isn't supported, use CGW

apps/tx-builder/package.json

@@ -10,6 +10,7 @@
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@safe-global/safe-apps-provider": "^0.18.0",
     "@safe-global/safe-deployments": "^1.26.0",
+    "@safe-global/safe-gateway-typescript-sdk": "^3.19.0",
     "axios": "^1.6.0",
     "evm-proxy-detection": "1.0.0",
     "localforage": "^1.10.0",

apps/tx-builder/src/hooks/useAsync.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useState } from 'react'
+
+export type AsyncResult<T> = [result: T | undefined, error: Error | undefined, loading: boolean]
+
+const useAsync = <T>(
+  asyncCall: () => Promise<T> | undefined,
+  dependencies: unknown[],
+  clearData = true,
+): AsyncResult<T> => {
+  const [data, setData] = useState<T | undefined>()
+  const [error, setError] = useState<Error>()
+  const [loading, setLoading] = useState<boolean>(false)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const callback = useCallback(asyncCall, dependencies)
+
+  useEffect(() => {
+    setError(undefined)
+
+    const promise = callback()
+
+    // Not a promise, exit early
+    if (!promise) {
+      setData(undefined)
+      setLoading(false)
+      return
+    }
+
+    let isCurrent = true
+    clearData && setData(undefined)
+    setLoading(true)
+
+    promise
+      .then((val: T) => {
+        isCurrent && setData(val)
+      })
+      .catch(err => {
+        isCurrent && setError(err as Error)
+      })
+      .finally(() => {
+        isCurrent && setLoading(false)
+      })
+
+    return () => {
+      isCurrent = false
+    }
+  }, [callback, clearData])
+
+  return [data, error, loading]
+}
+
+export default useAsync

apps/tx-builder/src/hooks/useSimulation.ts

@@ -10,6 +10,7 @@ import {
 import { useNetwork } from '../store/networkContext'
 import { useTransactions } from '../store'
 import { FETCH_STATUS } from '../utils'
+import useAsync from './useAsync'
 
 type UseSimulationReturn =
   | {
@@ -38,7 +39,10 @@ const useSimulation = (): UseSimulationReturn => {
     [simulation],
   )
   const { safe, web3 } = useNetwork()
-  const simulationSupported = useMemo(() => isSimulationSupported(safe.chainId.toString()), [safe])
+  const [simulationSupported = false] = useAsync(
+    () => isSimulationSupported(safe.chainId.toString()),
+    [safe.chainId],
+  )
 
   const simulateTransaction = useCallback(async () => {
     if (!web3) return

apps/tx-builder/src/lib/simulation/simulation.ts

@@ -3,6 +3,7 @@ import Web3 from 'web3'
 import { BaseTransaction } from '@safe-global/safe-apps-sdk'
 import { TenderlySimulatePayload, TenderlySimulation, StateObject } from './types'
 import { encodeMultiSendCall, getMultiSendCallOnlyAddress } from './multisend'
+import { getChainConfig, FEATURES } from '@safe-global/safe-gateway-typescript-sdk'
 
 type OptionalExceptFor<T, TRequired extends keyof T = keyof T> = Partial<
   Pick<T, Exclude<keyof T, TRequired>>
@@ -14,24 +15,10 @@ const TENDERLY_SIMULATE_ENDPOINT_URL = process.env.REACT_APP_TENDERLY_SIMULATE_E
 const TENDERLY_PROJECT_NAME = process.env.REACT_APP_TENDERLY_PROJECT_NAME || ''
 const TENDERLY_ORG_NAME = process.env.REACT_APP_TENDERLY_ORG_NAME || ''
 
-const NON_SUPPORTED_CHAINS = [
-  // Energy web chain
-  '246',
-  // zkSync Era Testnet
-  '280',
-  //zkSync Era Mainnet
-  '324',
-  // Polygon zkEVM
-  '1101',
-  // Celo
-  '42220',
-  // Volta
-  '73799',
-  // Aurora
-  '1313161554',
-]
-
-const isSimulationSupported = (chainId: string) => !NON_SUPPORTED_CHAINS.includes(chainId)
+const isSimulationSupported = async (chainId: string) => {
+  const config = await getChainConfig(chainId)
+  return config.features.includes(FEATURES.TX_SIMULATION)
+}
 
 const getSimulation = async (tx: TenderlySimulatePayload): Promise<TenderlySimulation> => {
   const response = await axios.post<TenderlySimulation>(TENDERLY_SIMULATE_ENDPOINT_URL, tx)