fix: only switch chain once (#219)

* fix: do not flood chain switching

* fix: message

* test: fix rerender

e2e/connect.test.tsx

@@ -57,22 +57,23 @@ describe('connect', () => {
   })
 
   describe('with provider', () => {
+    const HARDHAT_ACCOUNT_DISPLAY_STRING = `${hardhat.account.address?.substring(
+      0,
+      6
+    )}...${hardhat.account.address?.substring(hardhat.account.address.length - 4)}`
+
     // The real hardhat.provider relies on real timeouts when providing data.
     jest.useRealTimers()
 
     const renderWidget = () => render(<SwapWidget provider={hardhat.provider} />)
 
     it('displays connected account chip', async () => {
-      const HARDHAT_ACCOUNT_DISPLAY_STRING = `${hardhat.account.address?.substring(
-        0,
-        6
-      )}...${hardhat.account.address?.substring(hardhat.account.address.length - 4)}`
-
       const widget = renderWidget()
       const toolbar = await widget.findByTestId('toolbar')
       // The toolbar will reflect a pending connection until it connects.
       await waitFor(() => expect(toolbar.textContent).not.toBe('Connecting…'), { timeout: 10000 })
 
+      widget.rerender(<SwapWidget provider={hardhat.provider} />)
       const account = await widget.findByTestId('account')
       await waitFor(() => expect(account.textContent?.toLowerCase()).toBe(HARDHAT_ACCOUNT_DISPLAY_STRING))
     })

src/components/Swap/SwapActionButton/SwitchChainButton.tsx

@@ -2,14 +2,16 @@ import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import ActionButton from 'components/ActionButton'
 import useSwitchChain from 'hooks/useSwitchChain'
+import useConnectors from 'hooks/web3/useConnectors'
 import { Spinner } from 'icons'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Colors } from 'theme'
 
 /** A chain-switching ActionButton. */
 export default function ChainSwitchButton({ color, chainId }: { color: keyof Colors; chainId: number }) {
-  const { account } = useWeb3React()
-  const [isPending, setIsPending] = useState(!account)
+  const { connector } = useWeb3React()
+  const isNetwork = connector === useConnectors().network
+  const [isPending, setIsPending] = useState(false)
 
   const switchChain = useSwitchChain()
   const [error, setError] = useState()
@@ -25,24 +27,25 @@ export default function ChainSwitchButton({ color, chainId }: { color: keyof Col
   }, [chainId, switchChain])
   if (error) throw error
 
-  // If there is no account (ie no wallet to take agency), switch chains automatically
   useEffect(() => {
-    if (!account) onSwitchChain()
-  }, [account, onSwitchChain])
+    if (isNetwork && !isPending) {
+      onSwitchChain()
+    }
+  }, [isNetwork, isPending, onSwitchChain])
 
   const actionProps = useMemo(
     () =>
       isPending
         ? {
-            message: account ? <Trans>Switch network in your wallet</Trans> : <Trans>Switching network</Trans>,
+            message: isNetwork ? <Trans>Switching network</Trans> : <Trans>Switch network in your wallet</Trans>,
             icon: Spinner,
           }
         : {
             message: <Trans>Switch network</Trans>,
             onClick: onSwitchChain,
             children: <Trans>Switch</Trans>,
           },
-    [account, isPending, onSwitchChain]
+    [isNetwork, isPending, onSwitchChain]
   )
 
   return <ActionButton color={color} action={actionProps} />