chore: updates web3-react, adds key for changing connector order (#4085)

* fix connectors changing

* update package

* add connection name

* rename file

* de-dupe

* cb wallet fix

* fix

* yarn change

* log the key

* re-order connections

* memoize the key

* some updates

* rm console

* prevent memory leak
Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

package.json

@@ -134,16 +134,16 @@
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
     "@walletconnect/ethereum-provider": "1.7.1",
-    "@web3-react/coinbase-wallet": "^8.0.33-beta.0",
-    "@web3-react/core": "^8.0.33-beta.0",
-    "@web3-react/eip1193": "^8.0.25-beta.0",
-    "@web3-react/empty": "^8.0.19-beta.0",
-    "@web3-react/gnosis-safe": "^8.0.5-beta.0",
-    "@web3-react/metamask": "^8.0.26-beta.0",
-    "@web3-react/network": "^8.0.26-beta.0",
-    "@web3-react/types": "^8.0.19-beta.0",
-    "@web3-react/url": "^8.0.24-beta.0",
-    "@web3-react/walletconnect": "^8.0.34-beta.0",
+    "@web3-react/coinbase-wallet": "^8.0.34-beta.0",
+    "@web3-react/core": "^8.0.35-beta.0",
+    "@web3-react/eip1193": "^8.0.26-beta.0",
+    "@web3-react/empty": "^8.0.20-beta.0",
+    "@web3-react/gnosis-safe": "^8.0.6-beta.0",
+    "@web3-react/metamask": "^8.0.27-beta.0",
+    "@web3-react/network": "^8.0.27-beta.0",
+    "@web3-react/types": "^8.0.20-beta.0",
+    "@web3-react/url": "^8.0.25-beta.0",
+    "@web3-react/walletconnect": "^8.0.35-beta.0",
     "ajv": "^6.12.3",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",

src/components/AccountDetails/index.tsx

 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import CopyHelper from 'components/AccountDetails/Copy'
-import { coinbaseWalletConnection } from 'connection'
 import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsMetaMask } from 'connection/utils'
 import { useCallback, useContext } from 'react'
 import { ExternalLink as LinkIcon } from 'react-feather'
@@ -247,13 +246,6 @@ export default function AccountDetails({
                         onClick={() => {
                           if (connector.deactivate) {
                             connector.deactivate()
-
-                            // Coinbase Wallet SDK does not emit a disconnect event to the provider,
-                            // which is what web3-react uses to reset state. As a workaround we manually
-                            // reset state.
-                            if (connector === coinbaseWalletConnection.connector) {
-                              connector.resetState()
-                            }
                           } else {
                             connector.resetState()
                           }

src/components/Web3Provider/index.tsx

-import { Web3ReactProvider } from '@web3-react/core'
-import useConnectors from 'hooks/useConnectors'
+import { Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
+import { Connector } from '@web3-react/types'
+import { Connection } from 'connection'
+import { getConnectionName } from 'connection/utils'
 import useEagerlyConnect from 'hooks/useEagerlyConnect'
-import { ReactNode } from 'react'
+import useOrderedConnections from 'hooks/useOrderedConnections'
+import { ReactNode, useMemo } from 'react'
 
 export default function Web3Provider({ children }: { children: ReactNode }) {
   useEagerlyConnect()
-  const connectors = useConnectors()
+  const connections = useOrderedConnections()
+  const connectors: [Connector, Web3ReactHooks][] = connections.map(({ hooks, connector }) => [connector, hooks])
 
-  return <Web3ReactProvider connectors={connectors}>{children}</Web3ReactProvider>
+  const key = useMemo(() => connections.map(({ type }: Connection) => getConnectionName(type)).join('-'), [connections])
+
+  return (
+    <Web3ReactProvider connectors={connectors} key={key}>
+      {children}
+    </Web3ReactProvider>
+  )
 }

src/connection/utils.ts

@@ -9,15 +9,6 @@ import {
   walletConnectConnection,
 } from 'connection'
 
-const CONNECTIONS = [
-  coinbaseWalletConnection,
-  fortmaticConnection,
-  injectedConnection,
-  networkConnection,
-  walletConnectConnection,
-  gnosisSafeConnection,
-]
-
 export function getIsInjected(): boolean {
   return Boolean(window.ethereum)
 }
@@ -30,6 +21,14 @@ export function getIsCoinbaseWallet(): boolean {
   return window.ethereum?.isCoinbaseWallet ?? false
 }
 
+const CONNECTIONS = [
+  gnosisSafeConnection,
+  injectedConnection,
+  coinbaseWalletConnection,
+  walletConnectConnection,
+  fortmaticConnection,
+  networkConnection,
+]
 export function getConnection(c: Connector | ConnectionType) {
   if (c instanceof Connector) {
     const connection = CONNECTIONS.find((connection) => connection.connector === c)

src/hooks/useConnectors.ts → src/hooks/useOrderedConnections.ts

-import { Web3ReactHooks } from '@web3-react/core'
-import { Connector } from '@web3-react/types'
 import { ConnectionType } from 'connection'
 import { getConnection } from 'connection/utils'
 import { useMemo } from 'react'
@@ -8,7 +6,7 @@ import { useAppSelector } from 'state/hooks'
 
 const SELECTABLE_WALLETS = [...BACKFILLABLE_WALLETS, ConnectionType.FORTMATIC]
 
-export default function useConnectors() {
+export default function useOrderedConnections() {
   const selectedWallet = useAppSelector((state) => state.user.selectedWallet)
   return useMemo(() => {
     const orderedConnectionTypes: ConnectionType[] = []
@@ -25,10 +23,6 @@ export default function useConnectors() {
     // Add network connection last as it should be the fallback.
     orderedConnectionTypes.push(ConnectionType.NETWORK)
 
-    // Convert to web3-react's representation of connectors.
-    const web3Connectors: [Connector, Web3ReactHooks][] = orderedConnectionTypes
-      .map(getConnection)
-      .map(({ connector, hooks }) => [connector, hooks])
-    return web3Connectors
+    return orderedConnectionTypes.map(getConnection)
   }, [selectedWallet])
 }

src/lib/hooks/useBlockNumber.tsx

@@ -48,23 +48,30 @@ export function BlockNumberProvider({ children }: { children: ReactNode }) {
 
   const windowVisible = useIsWindowVisible()
   useEffect(() => {
+    let stale = false
+
     if (provider && activeChainId && windowVisible) {
       // If chainId hasn't changed, don't clear the block. This prevents re-fetching still valid data.
       setChainBlock((chainBlock) => (chainBlock.chainId === activeChainId ? chainBlock : { chainId: activeChainId }))
 
       provider
         .getBlockNumber()
-        .then(onBlock)
+        .then((block) => {
+          if (!stale) onBlock(block)
+        })
         .catch((error) => {
           console.error(`Failed to get block number for chainId ${activeChainId}`, error)
         })
 
       provider.on('block', onBlock)
+
       return () => {
+        stale = true
         provider.removeListener('block', onBlock)
       }
     }
-    return undefined
+
+    return void 0
   }, [activeChainId, provider, onBlock, setChainBlock, windowVisible])
 
   const value = useMemo(

src/state/connection/constants.ts

 import { ConnectionType } from 'connection'
 
 export const BACKFILLABLE_WALLETS = [
+  ConnectionType.INJECTED,
   ConnectionType.COINBASE_WALLET,
   ConnectionType.WALLET_CONNECT,
-  ConnectionType.INJECTED,
 ]