fix: web3-react-fixes (#3066) (#3075)

* add empty connector

add url connector

* naming
Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

package.json

@@ -193,7 +193,8 @@
     "widgets-web3-react/core": "npm:@web3-react/core@8.0.15-alpha.0",
     "widgets-web3-react/eip1193": "npm:@web3-react/eip1193@8.0.15-alpha.0",
     "widgets-web3-react/metamask": "npm:@web3-react/metamask@8.0.15-alpha.0",
-    "widgets-web3-react/network": "npm:@web3-react/network@8.0.15-alpha.0",
+    "widgets-web3-react/url": "npm:@web3-react/url@8.0.16-alpha.0",
+    "widgets-web3-react/empty": "npm:@web3-react/empty@8.0.16-alpha.0",
     "widgets-web3-react/types": "npm:@web3-react/types@8.0.15-alpha.0"
   }
 }

src/lib/components/Web3Provider.tsx

 import { SetStateAction } from 'jotai'
 import { RESET, useUpdateAtom } from 'jotai/utils'
-import { injectedAtom, networkAtom } from 'lib/state/web3'
-import { ReactNode, useEffect, useMemo } from 'react'
+import { injectedAtom, urlAtom } from 'lib/state/web3'
+import { ReactNode, useEffect } from 'react'
 import { initializeConnector, Web3ReactHooks } from 'widgets-web3-react/core'
 import { EIP1193 } from 'widgets-web3-react/eip1193'
-import { Network } from 'widgets-web3-react/network'
 import { Actions, Connector, Provider as EthProvider } from 'widgets-web3-react/types'
+import { Url } from 'widgets-web3-react/url'
 
 interface Web3ProviderProps {
   jsonRpcEndpoint?: string
@@ -29,10 +29,8 @@ function useConnector<T extends { new (actions: Actions, initializer: I): Connec
 }
 
 export default function Web3Provider({ jsonRpcEndpoint, provider, children }: Web3ProviderProps) {
-  const setNetwork = useUpdateAtom(networkAtom)
-  // TODO(zzmp): Network should take a string, not a urlMap.
-  const urlMap = useMemo(() => jsonRpcEndpoint && { 1: jsonRpcEndpoint }, [jsonRpcEndpoint])
-  useConnector(Network, urlMap, setNetwork)
+  const setUrl = useUpdateAtom(urlAtom)
+  useConnector(Url, jsonRpcEndpoint, setUrl)
 
   const setInjected = useUpdateAtom(injectedAtom)
   useConnector(EIP1193, provider, setInjected)

src/lib/hooks/useActiveWeb3React.ts

 import { useAtomValue } from 'jotai/utils'
-import { injectedAtom, networkAtom, Web3ReactState } from 'lib/state/web3'
+import { injectedAtom, urlAtom, Web3ReactState } from 'lib/state/web3'
 import { Web3ReactHooks } from 'widgets-web3-react/core'
 
 export function useActiveWeb3ReactState(): Web3ReactState {
   const injected = useAtomValue(injectedAtom)
-  const network = useAtomValue(networkAtom)
-  return injected[1].useIsActive() ? injected : network
+  const url = useAtomValue(urlAtom)
+  return injected[1].useIsActive() ? injected : url
 }
 
 export function useActiveWeb3ReactHooks(): Web3ReactHooks {

src/lib/state/web3.ts

@@ -2,23 +2,15 @@ import { createMulticall } from '@uniswap/redux-multicall'
 import { atomWithStore } from 'jotai/redux'
 import { atomWithDefault } from 'jotai/utils'
 import { createStore } from 'redux'
-import { Web3ReactHooks } from 'widgets-web3-react/core'
-import { initializeConnector } from 'widgets-web3-react/core'
+import { initializeConnector, Web3ReactHooks } from 'widgets-web3-react/core'
+import { EMPTY } from 'widgets-web3-react/empty'
 import { Connector } from 'widgets-web3-react/types'
 
-// TODO(zzmp): EmptyConnector singleton should come from 'widgets-web3-react/empty'
-const EMPTY_CONNECTOR = initializeConnector<Connector>(
-  (actions) =>
-    new (class EmptyConnector extends Connector {
-      activate() {
-        void 0
-      }
-    })(actions)
-)
+const EMPTY_CONNECTOR = initializeConnector(() => EMPTY)
 
 export type Web3ReactState = [Connector, Web3ReactHooks]
 
-export const networkAtom = atomWithDefault<Web3ReactState>(() => EMPTY_CONNECTOR)
+export const urlAtom = atomWithDefault<Web3ReactState>(() => EMPTY_CONNECTOR)
 export const injectedAtom = atomWithDefault<Web3ReactState>(() => EMPTY_CONNECTOR)
 
 export const multicall = createMulticall()

yarn.lock

@@ -21643,6 +21643,13 @@ widest-line@^3.1.0:
   dependencies:
     "@web3-react/types" "^8.0.15-alpha.0"
 
+"widgets-web3-react/empty@npm:@web3-react/empty@8.0.16-alpha.0":
+  version "8.0.16-alpha.0"
+  resolved "https://registry.yarnpkg.com/@web3-react/empty/-/empty-8.0.16-alpha.0.tgz#6a0c0e47c9368c7f7f8493bfc4369e8d070dc2f3"
+  integrity sha512-9l/2Kow8ZeWGG7hx/rqDtdFXMvCuwfgimivRQXz/gpXq7JaD8Tvh5XNu7CsyBTFTHG4WsSfICDmmAHBxgxt8ug==
+  dependencies:
+    "@web3-react/types" "^8.0.15-alpha.0"
+
 "widgets-web3-react/metamask@npm:@web3-react/metamask@8.0.15-alpha.0":
   version "8.0.15-alpha.0"
   resolved "https://registry.yarnpkg.com/@web3-react/metamask/-/metamask-8.0.15-alpha.0.tgz#b710c0fb791cc6c4990647f4cebc636df32d84c8"
@@ -21651,10 +21658,10 @@ widest-line@^3.1.0:
     "@metamask/detect-provider" "^1.2.0"
     "@web3-react/types" "^8.0.15-alpha.0"
 
-"widgets-web3-react/network@npm:@web3-react/network@8.0.15-alpha.0":
-  version "8.0.15-alpha.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/network/-/network-8.0.15-alpha.0.tgz#ad4f5979a0978f8b800151afb6c57637c52150f6"
-  integrity sha512-ajmyXXd7cZ9wNzuADzvBZHBZXRfeDWQBteq6AN4q9P44AreOzoAVpUB7KzaSdCe8JOt6l3GO4cL1znbF+Jzq6A==
+"widgets-web3-react/url@npm:@web3-react/url@8.0.16-alpha.0":
+  version "8.0.16-alpha.0"
+  resolved "https://registry.yarnpkg.com/@web3-react/url/-/url-8.0.16-alpha.0.tgz#13302c23b9c37adf7cae2eedae9f70c9b9120b57"
+  integrity sha512-JHyrfavjiMhTTU2T2Kt/SEbeFWMStY5hthnX+lnsS+8ZlHU7TmAJcuzbodmmhAAy7pEqjiv+EKJQ6rMOCLFj/Q==
   dependencies:
     "@ethersproject/experimental" "^5.4.0"
     "@ethersproject/providers" "^5.4.5"