[Multichain] fix: Check all fallbackHandler deployments [SW-236]

src/components/settings/FallbackHandler/__tests__/index.test.tsx

@@ -1,3 +1,4 @@
+import { TWAP_FALLBACK_HANDLER } from '@/features/swap/helpers/utils'
 import { chainBuilder } from '@/tests/builders/chains'
 import { render, waitFor } from '@/tests/test-utils'
 
@@ -238,4 +239,50 @@ describe('FallbackHandler', () => {
 
     expect(fbHandler.container).toBeEmptyDOMElement()
   })
+
+  it('should display a message in case it is a TWAP fallback handler', () => {
+    jest.spyOn(useSafeInfoHook, 'default').mockImplementation(
+      () =>
+        ({
+          safe: {
+            version: '1.3.0',
+            chainId: '1',
+            fallbackHandler: {
+              value: TWAP_FALLBACK_HANDLER,
+            },
+          },
+        } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+    )
+
+    const { getByText } = render(<FallbackHandler />)
+
+    expect(
+      getByText(
+        "This is CoW's fallback handler. It is needed for this Safe to be able to use the TWAP feature for Swaps.",
+      ),
+    ).toBeInTheDocument()
+  })
+
+  it('should not display a message in case it is a TWAP fallback handler on an unsupported network', () => {
+    jest.spyOn(useSafeInfoHook, 'default').mockImplementation(
+      () =>
+        ({
+          safe: {
+            version: '1.3.0',
+            chainId: '10',
+            fallbackHandler: {
+              value: TWAP_FALLBACK_HANDLER,
+            },
+          },
+        } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+    )
+
+    const { queryByText } = render(<FallbackHandler />)
+
+    expect(
+      queryByText(
+        "This is CoW's fallback handler. It is needed for this Safe to be able to use the TWAP feature for Swaps.",
+      ),
+    ).not.toBeInTheDocument()
+  })
 })

src/components/settings/FallbackHandler/index.tsx

@@ -1,4 +1,5 @@
-import { TWAP_FALLBACK_HANDLER } from '@/features/swap/helpers/utils'
+import { TWAP_FALLBACK_HANDLER, TWAP_FALLBACK_HANDLER_NETWORKS } from '@/features/swap/helpers/utils'
+import { getCompatibilityFallbackHandlerDeployments } from '@safe-global/safe-deployments'
 import NextLink from 'next/link'
 import { Typography, Box, Grid, Paper, Link, Alert } from '@mui/material'
 import semverSatisfies from 'semver/functions/satisfies'
@@ -7,7 +8,6 @@ import type { ReactElement } from 'react'
 
 import EthHashInfo from '@/components/common/EthHashInfo'
 import useSafeInfo from '@/hooks/useSafeInfo'
-import { getFallbackHandlerContractDeployment } from '@/services/contracts/deployments'
 import { HelpCenterArticle } from '@/config/constants'
 import ExternalLink from '@/components/common/ExternalLink'
 import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
@@ -22,11 +22,12 @@ export const FallbackHandler = (): ReactElement | null => {
 
   const supportsFallbackHandler = !!safe.version && semverSatisfies(safe.version, FALLBACK_HANDLER_VERSION)
 
-  const fallbackHandlerDeployment = useMemo(() => {
-    if (!chain) {
+  const fallbackHandlerDeployments = useMemo(() => {
+    if (!chain || !safe.version) {
       return undefined
     }
-    return getFallbackHandlerContractDeployment(chain, safe.version)
+
+    return getCompatibilityFallbackHandlerDeployments({ network: chain?.chainId, version: safe.version })
   }, [safe.version, chain])
 
   if (!supportsFallbackHandler) {
@@ -35,8 +36,10 @@ export const FallbackHandler = (): ReactElement | null => {
 
   const hasFallbackHandler = !!safe.fallbackHandler
   const isOfficial =
-    hasFallbackHandler && safe.fallbackHandler?.value === fallbackHandlerDeployment?.networkAddresses[safe.chainId]
-  const isTWAPFallbackHandler = safe.fallbackHandler?.value === TWAP_FALLBACK_HANDLER
+    safe.fallbackHandler &&
+    fallbackHandlerDeployments?.networkAddresses[safe.chainId].includes(safe.fallbackHandler.value)
+  const isTWAPFallbackHandler =
+    safe.fallbackHandler?.value === TWAP_FALLBACK_HANDLER && TWAP_FALLBACK_HANDLER_NETWORKS.includes(safe.chainId)
 
   const warning = !hasFallbackHandler ? (
     <>
@@ -101,7 +104,7 @@ export const FallbackHandler = (): ReactElement | null => {
               {safe.fallbackHandler && (
                 <EthHashInfo
                   shortAddress={false}
-                  name={safe.fallbackHandler.name || fallbackHandlerDeployment?.contractName}
+                  name={safe.fallbackHandler.name || fallbackHandlerDeployments?.contractName}
                   address={safe.fallbackHandler.value}
                   customAvatar={safe.fallbackHandler.logoUri}
                   showCopyButton

src/features/swap/helpers/utils.ts

@@ -24,6 +24,9 @@ function asDecimal(amount: number | bigint, decimals: number): number {
 
 export const TWAP_FALLBACK_HANDLER = '0x2f55e8b20D0B9FEFA187AA7d00B6Cbe563605bF5'
 
+// https://github.com/cowprotocol/composable-cow/blob/main/networks.json
+export const TWAP_FALLBACK_HANDLER_NETWORKS = ['1', '100', '11155111', '42161']
+
 export const getExecutionPrice = (
   order: Pick<SwapOrder, 'executedSellAmount' | 'executedBuyAmount' | 'buyToken' | 'sellToken'>,
 ): number => {