fix(widgets): fix broken unsupported network message (#3256)

* fix(widgets): fix broken unsupported network message

* require that the user be on a Uniswap chainId AND a token-list supported chainID before fetching swap info

* use .some instead of .reduce

src/lib/components/Swap/Toolbar/Caption.tsx

@@ -28,7 +28,7 @@ export function ConnectWallet() {
   return <Caption caption={<Trans>Connect wallet to swap</Trans>} />
 }
 export function UnsupportedNetwork() {
-  return <Caption caption={<Trans>Unsupported network - switch to another network to swap</Trans>} />
+  return <Caption caption={<Trans>Unsupported network - switch to another to trade.</Trans>} />
 }
 export function InsufficientBalance({ currency }: { currency: Currency }) {
   return <Caption caption={<Trans>Insufficient {currency?.symbol} balance</Trans>} />

src/lib/components/Swap/index.tsx

 import { Trans } from '@lingui/macro'
 import { TokenInfo } from '@uniswap/token-lists'
+import { ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
 import { useAtom } from 'jotai'
 import { SwapInfoUpdater } from 'lib/hooks/swap/useSwapInfo'
 import useSyncConvenienceFee from 'lib/hooks/swap/useSyncConvenienceFee'
@@ -9,7 +10,7 @@ import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import useTokenList from 'lib/hooks/useTokenList'
 import { displayTxHashAtom } from 'lib/state/swap'
 import { SwapTransactionInfo, Transaction, TransactionType } from 'lib/state/transactions'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import Dialog from '../Dialog'
 import Header from '../Header'
@@ -47,20 +48,25 @@ export interface SwapProps {
 }
 
 export default function Swap(props: SwapProps) {
-  useTokenList(props.tokenList)
+  const list = useTokenList(props.tokenList)
   useSyncSwapDefaults(props)
   useSyncConvenienceFee(props)
 
-  const { active, account } = useActiveWeb3React()
+  const { active, account, chainId } = useActiveWeb3React()
   const [boundary, setBoundary] = useState<HTMLDivElement | null>(null)
 
   const [displayTxHash, setDisplayTxHash] = useAtom(displayTxHashAtom)
   const pendingTxs = usePendingTransactions()
   const displayTx = getSwapTx(pendingTxs, displayTxHash)
 
+  const onSupportedChain = useMemo(
+    () => chainId && ALL_SUPPORTED_CHAIN_IDS.includes(chainId) && list.some((token) => token.chainId === chainId),
+    [chainId, list]
+  )
+
   return (
     <SwapPropValidator {...props}>
-      <SwapInfoUpdater />
+      {onSupportedChain && <SwapInfoUpdater />}
       <Header title={<Trans>Swap</Trans>}>
         {active && <Wallet disabled={!account} />}
         <Settings disabled={!active} />