feat: block/warn about bridges accordingly

src/components/walletconnect/ProposalForm/CompatibilityWarning.tsx

@@ -0,0 +1,43 @@
+import { Alert, Typography } from '@mui/material'
+import type { ReactElement } from 'react'
+import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+
+import ChainIndicator from '@/components/common/ChainIndicator'
+import { useCompatibilityWarning } from './useCompatibilityWarning'
+import useSafeInfo from '@/hooks/useSafeInfo'
+
+import css from './styles.module.css'
+
+export const CompatibilityWarning = ({
+  proposal,
+  chainIds,
+}: {
+  proposal: Web3WalletTypes.SessionProposal
+  chainIds: Array<string>
+}): ReactElement => {
+  const { safe } = useSafeInfo()
+  const isUnsupportedChain = !chainIds.includes(safe.chainId)
+  const { severity, message } = useCompatibilityWarning(proposal, isUnsupportedChain)
+
+  return (
+    <>
+      <Alert severity={severity} className={css.alert}>
+        {message}
+      </Alert>
+
+      {isUnsupportedChain && (
+        <>
+          <Typography mt={3} mb={1}>
+            Supported networks
+          </Typography>
+
+          <div>
+            {chainIds.map((chainId) => (
+              <ChainIndicator inline chainId={chainId} key={chainId} className={css.chain} />
+            ))}
+          </div>
+        </>
+      )}
+    </>
+  )
+}

src/components/walletconnect/ProposalForm/__tests__/useCompatibilityWarning.test.ts

@@ -0,0 +1,118 @@
+import { renderHook } from '@/tests/test-utils'
+import type { ChainInfo, SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+
+import * as bridges from '../bridges'
+import { useCompatibilityWarning } from '../useCompatibilityWarning'
+
+describe('useCompatibilityWarning', () => {
+  it('should return an error for a dangerous bridge', () => {
+    jest.spyOn(bridges, 'isDangerousBridge').mockReturnValue(true)
+
+    const proposal = {
+      params: { proposer: { metadata: { name: 'Fake Bridge' } } },
+      verifyContext: { verified: { origin: '' } },
+    } as unknown as Web3WalletTypes.SessionProposal
+
+    const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
+
+    expect(result.current).toEqual({
+      message:
+        'Fake Bridge is a bridge that is unusable in Safe{Wallet} due to the current implementation of WalletConnect — the bridged funds will be lost. Consider using a different bridge.',
+      severity: 'error',
+    })
+  })
+
+  it('should return a warning for a risky bridge', () => {
+    jest.spyOn(bridges, 'isDangerousBridge').mockReturnValue(false)
+    jest.spyOn(bridges, 'isRiskyBridge').mockReturnValue(true)
+
+    const proposal = {
+      params: { proposer: { metadata: { name: 'Fake Bridge' } } },
+      verifyContext: { verified: { origin: '' } },
+    } as unknown as Web3WalletTypes.SessionProposal
+
+    const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
+
+    expect(result.current).toEqual({
+      message:
+        'While using Fake Bridge, please make sure that the desination address you send funds to matches the Safe address you have on the respective chain. Otherwise, the funds will be lost.',
+      severity: 'warning',
+    })
+  })
+
+  it('should return an error for an unsupported chain', () => {
+    jest.spyOn(bridges, 'isDangerousBridge').mockReturnValue(false)
+    jest.spyOn(bridges, 'isRiskyBridge').mockReturnValue(false)
+
+    const proposal = {
+      params: { proposer: { metadata: { name: 'Fake dApp' } } },
+      verifyContext: { verified: { origin: '' } },
+    } as unknown as Web3WalletTypes.SessionProposal
+
+    const { result } = renderHook(() => useCompatibilityWarning(proposal, true))
+
+    expect(result.current).toEqual({
+      message:
+        'Fake dApp does not support the Safe Account network. If you want to interact with Fake dApp, please switch to a Safe Account on a supported network.',
+      severity: 'error',
+    })
+  })
+
+  describe('should otherwise return info', () => {
+    it('if chains are loaded', () => {
+      jest.spyOn(bridges, 'isDangerousBridge').mockReturnValue(false)
+      jest.spyOn(bridges, 'isRiskyBridge').mockReturnValue(false)
+
+      const proposal = {
+        params: { proposer: { metadata: { name: 'Fake dApp' } } },
+        verifyContext: { verified: { origin: '' } },
+      } as unknown as Web3WalletTypes.SessionProposal
+
+      const { result } = renderHook(() => useCompatibilityWarning(proposal, false), {
+        initialReduxState: {
+          chains: {
+            loading: false,
+            error: undefined,
+            data: [
+              {
+                chainId: '1',
+                chainName: 'Ethereum',
+              },
+            ] as unknown as Array<ChainInfo>,
+          },
+          safeInfo: {
+            loading: false,
+            error: undefined,
+            data: {
+              address: {},
+              chainId: '1',
+            } as unknown as SafeInfo,
+          },
+        },
+      })
+
+      expect(result.current).toEqual({
+        message: 'Please make sure that the dApp is connected to Ethereum.',
+        severity: 'info',
+      })
+    })
+
+    it("if chains aren't loaded", () => {
+      jest.spyOn(bridges, 'isDangerousBridge').mockReturnValue(false)
+      jest.spyOn(bridges, 'isRiskyBridge').mockReturnValue(false)
+
+      const proposal = {
+        params: { proposer: { metadata: { name: 'Fake dApp' } } },
+        verifyContext: { verified: { origin: '' } },
+      } as unknown as Web3WalletTypes.SessionProposal
+
+      const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
+
+      expect(result.current).toEqual({
+        message: 'Please make sure that the dApp is connected to this network.',
+        severity: 'info',
+      })
+    })
+  })
+})

src/components/walletconnect/ProposalForm/bridges.ts

@@ -0,0 +1,43 @@
+const DangerousBridges = [
+  'bridge.arbitrum.io',
+  'bridge.base.org',
+  'cbridge.celer.network',
+  'www.orbiter.finance',
+  'zksync-era.l2scan.co',
+  'app.optimism.io',
+  'www.portalbridge.com',
+  'wallet.polygon.technology',
+  'app.rhino.fi',
+]
+
+const RiskyBridges = [
+  'across.to',
+  'app.allbridge.io',
+  'core.allbridge.io',
+  'bungee.exchange',
+  'www.carrier.so',
+  'app.chainport.io',
+  'bridge.gnosischain.com',
+  'app.hop.exchange',
+  'app.interport.fi',
+  'jumper.exchange',
+  'www.layerswap.io',
+  'meson.fi',
+  'satellite.money',
+  'stargate.finance',
+  'app.squidrouter.com',
+  'app.symbiosis.finance',
+  'www.synapseprotocol.com',
+  'app.thevoyager.io',
+  'portal.txsync.io',
+  'bridge.wanchain.org',
+  'app.xy.finance',
+]
+
+export const isDangerousBridge = (origin: string) => {
+  return DangerousBridges.some((bridge) => origin.includes(bridge))
+}
+
+export const isRiskyBridge = (origin: string) => {
+  return RiskyBridges.some((bridge) => origin.includes(bridge))
+}

src/components/walletconnect/ProposalForm/index.tsx

@@ -6,10 +6,11 @@ import type { Web3WalletTypes } from '@walletconnect/web3wallet'
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
 import css from './styles.module.css'
 import ProposalVerification from './ProposalVerification'
-import { ChainWarning } from './ChainWarning'
+import { CompatibilityWarning } from './CompatibilityWarning'
 import useChains from '@/hooks/useChains'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { getSupportedChainIds } from '@/services/walletconnect/utils'
+import { isDangerousBridge, isRiskyBridge } from './bridges'
 
 type ProposalFormProps = {
   proposal: Web3WalletTypes.SessionProposal
@@ -22,13 +23,13 @@ const ProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): Rea
   const { safe } = useSafeInfo()
   const [understandsRisk, setUnderstandsRisk] = useState(false)
   const { proposer } = proposal.params
-  const { isScam } = proposal.verifyContext.verified
+  const { isScam, origin } = proposal.verifyContext.verified
 
   const chainIds = useMemo(() => getSupportedChainIds(configs, proposal.params), [configs, proposal.params])
-  const supportsCurrentChain = chainIds.includes(safe.chainId)
+  const isUnsupportedChain = !chainIds.includes(safe.chainId)
 
-  const isHighRisk = proposal.verifyContext.verified.validation === 'INVALID'
-  const disabled = !supportsCurrentChain || isScam || (isHighRisk && !understandsRisk)
+  const isHighRisk = proposal.verifyContext.verified.validation === 'INVALID' || isRiskyBridge(origin)
+  const disabled = isUnsupportedChain || isScam || isDangerousBridge(origin) || (isHighRisk && !understandsRisk)
 
   return (
     <div className={css.container}>
@@ -54,14 +55,14 @@ const ProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): Rea
       <div className={css.info}>
         <ProposalVerification proposal={proposal} />
 
-        <ChainWarning proposal={proposal} chainIds={chainIds} />
+        <CompatibilityWarning proposal={proposal} chainIds={chainIds} />
       </div>
 
-      {supportsCurrentChain && isHighRisk && (
+      {!isUnsupportedChain && isHighRisk && (
         <FormControlLabel
           className={css.checkbox}
           control={<Checkbox checked={understandsRisk} onChange={(_, checked) => setUnderstandsRisk(checked)} />}
-          label="I understand the risks of interacting with this dApp and would like to continue."
+          label="I understand the risks associated with interacting with this dApp and would like to continue."
         />
       )}
 

src/components/walletconnect/ProposalForm/useCompatibilityWarning.ts

@@ -0,0 +1,64 @@
+import { useMemo } from 'react'
+import type { AlertColor } from '@mui/material'
+import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+
+import useChains from '@/hooks/useChains'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { isDangerousBridge, isRiskyBridge } from './bridges'
+
+const NAME_PLACEHOLDER = '%%name%%'
+const CHAIN_PLACEHOLDER = '%%chain%%'
+
+const Warnings: Record<string, { severity: AlertColor; message: string }> = {
+  DANGEROUS_BRIDGE: {
+    severity: 'error',
+    message: `${NAME_PLACEHOLDER} is a bridge that is unusable in Safe{Wallet} due to the current implementation of WalletConnect — the bridged funds will be lost. Consider using a different bridge.`,
+  },
+  RISKY_BRIDGE: {
+    severity: 'warning',
+    message: `While using ${NAME_PLACEHOLDER}, please make sure that the desination address you send funds to matches the Safe address you have on the respective chain. Otherwise, the funds will be lost.`,
+  },
+  UNSUPPORTED_CHAIN: {
+    severity: 'error',
+    message: `${NAME_PLACEHOLDER} does not support the Safe Account network. If you want to interact with ${NAME_PLACEHOLDER}, please switch to a Safe Account on a supported network.`,
+  },
+  WRONG_CHAIN: {
+    severity: 'info',
+    message: `Please make sure that the dApp is connected to ${CHAIN_PLACEHOLDER}.`,
+  },
+}
+
+export const useCompatibilityWarning = (
+  proposal: Web3WalletTypes.SessionProposal,
+  isUnsupportedChain: boolean,
+): (typeof Warnings)[string] => {
+  const { configs } = useChains()
+  const { safe } = useSafeInfo()
+
+  return useMemo(() => {
+    const { origin } = proposal.verifyContext.verified
+    const { proposer } = proposal.params
+
+    let { message, severity } = isDangerousBridge(origin)
+      ? Warnings.DANGEROUS_BRIDGE
+      : isRiskyBridge(origin)
+      ? Warnings.RISKY_BRIDGE
+      : isUnsupportedChain
+      ? Warnings.UNSUPPORTED_CHAIN
+      : Warnings.WRONG_CHAIN
+
+    if (message.includes(NAME_PLACEHOLDER)) {
+      message = message.replaceAll(NAME_PLACEHOLDER, proposer.metadata.name)
+    }
+
+    if (message.includes(CHAIN_PLACEHOLDER)) {
+      const chainName = configs.find((chain) => chain.chainId === safe.chainId)?.chainName ?? 'this network'
+      message = message.replaceAll(CHAIN_PLACEHOLDER, chainName)
+    }
+
+    return {
+      message,
+      severity,
+    }
+  }, [configs, isUnsupportedChain, proposal.params, proposal.verifyContext.verified, safe.chainId])
+}