show wrong chain message instead of throwing on incorrect chain connection (#3153)

src/lib/components/Error/ErrorGenerator.tsx

-import { ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
-import { ChainIdError, IntegrationError } from 'lib/errors'
-import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
+import { IntegrationError } from 'lib/errors'
 import { SwapWidgetProps } from 'lib/index'
 import { useEffect } from 'react'
 
@@ -14,13 +12,6 @@ export default function ErrorGenerator(swapWidgetProps: SwapWidgetProps) {
     }
   }, [provider, jsonRpcEndpoint])
 
-  const { chainId } = useActiveWeb3React()
-  useEffect(() => {
-    if (chainId && !ALL_SUPPORTED_CHAIN_IDS.includes(chainId)) {
-      throw new ChainIdError('Switch to a network supported by the Uniswap Protocol.')
-    }
-  }, [chainId])
-
   // size constraints
   const { width } = swapWidgetProps
   useEffect(() => {

src/lib/components/Swap/Toolbar.tsx

 import { Trans } from '@lingui/macro'
+import { ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
 import { useAtomValue } from 'jotai/utils'
+import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import { AlertTriangle, Info, largeIconCss, Spinner } from 'lib/icons'
 import { Field, Input, inputAtom, outputAtom, stateAtom, swapAtom } from 'lib/state/swap'
 import styled, { ThemedText, ThemeProvider } from 'lib/theme'
@@ -65,6 +67,7 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
   const input = useAtomValue(inputAtom)
   const output = useAtomValue(outputAtom)
   const balance = mockBalance
+  const { chainId } = useActiveWeb3React()
 
   const caption = useMemo(() => {
     const filledInput = asFilledInput(input)
@@ -77,6 +80,14 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
         </>
       )
     }
+    if (chainId && !ALL_SUPPORTED_CHAIN_IDS.includes(chainId)) {
+      return (
+        <>
+          <AlertTriangle color="secondary" />
+          <Trans>Unsupported network&#8211;switch to another to trade.</Trans>
+        </>
+      )
+    }
     if (activeInput === Field.INPUT ? filledInput && output.token : filledOutput && input.token) {
       if (!swap) {
         return (
@@ -109,7 +120,7 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
         <Trans>Enter an amount</Trans>
       </>
     )
-  }, [activeInput, balance, disabled, input, output, swap])
+  }, [activeInput, balance, chainId, disabled, input, output, swap])
 
   return (
     <>

src/lib/errors.ts

@@ -4,10 +4,3 @@ export class IntegrationError extends Error {
     this.name = 'Integration Error'
   }
 }
-
-export class ChainIdError extends Error {
-  constructor(message: string) {
-    super(message)
-    this.name = 'Unsupported network'
-  }
-}