Replace library of useActiveWeb3React with wagmi hook

package.json

@@ -24,20 +24,12 @@
     "@types/react": "^17.0.38",
     "@types/react-redux": "^7.1.11",
     "@types/react-router-dom": "^5.3.3",
-    "@uauth/web3-react": "^1.0.0",
-    "@web3-react/abstract-connector": "^6.0.7",
-    "@web3-react/core": "^6.1.9",
-    "@web3-react/injected-connector": "^6.0.7",
-    "@web3-react/network-connector": "^6.1.9",
-    "@web3-react/types": "^6.0.7",
-    "@web3-react/walletconnect-connector": "^6.2.13",
-    "@web3-react/walletlink-connector": "^6.2.5",
     "async-retry": "^1.3.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.29.3",
     "ethcall": "^4.8.13",
-    "ethers": "^5.5.3",
+    "ethers": "^5.7.2",
     "framer-motion": "^4.0.3",
     "history": "^5.0.0",
     "i18next": "^19.8.3",

src/components/AccountDetails.tsx

@@ -21,15 +21,13 @@ import { getMultichainScanLink } from "../utils/getEtherscanLink"
 import { shortenAddress } from "../utils/shortenAddress"
 import { useTheme } from "@mui/material/styles"
 import { useTranslation } from "react-i18next"
-import { useUDName } from "../hooks/useUDName"
 
 export default function AccountDetail(): ReactElement {
   const { t } = useTranslation()
   const { address, connector } = useAccount()
   const { chain } = useNetwork()
   const { disconnect } = useDisconnect()
   const userState = useContext(UserStateContext)
-  const udName = useUDName()
 
   const nativeToken = chain?.nativeCurrency
   const chainId = chain?.id
@@ -72,7 +70,7 @@ export default function AccountDetail(): ReactElement {
           <Stack direction="row" spacing={1}>
             <Identicon />
             <Typography variant="subtitle1">
-              {udName || (address && shortenAddress(address))}
+              {address && shortenAddress(address)}
             </Typography>
             {chainId && address && (
               <Link

src/components/DepositPage.tsx

@@ -83,7 +83,7 @@ const DepositPage = (props: Props): ReactElement => {
     onConfirmTransaction,
     onToggleDepositWrapped,
   } = props
-  const { account, chainId, library } = useActiveWeb3React()
+  const { account, chainId, signerOrProvider } = useActiveWeb3React()
   const { unstakeMinichef, amountStakedMinichef } = useRewardsHelpers(
     poolData?.name ?? "",
   )
@@ -100,18 +100,18 @@ const DepositPage = (props: Props): ReactElement => {
   const gaugesAreActive = areGaugesActive(chainId)
 
   useEffect(() => {
-    if (!library || !account || !chainId || !poolData || !gaugeAddr) {
+    if (!account || !chainId || !poolData || !gaugeAddr) {
       setLiquidityGaugeContract(null)
       return
     }
     const liquidityGaugeContract = getContract(
       gaugeAddr,
       LIQUIDITY_GAUGE_V5_ABI,
-      library,
+      signerOrProvider,
       account,
     ) as LiquidityGaugeV5
     setLiquidityGaugeContract(liquidityGaugeContract)
-  }, [library, account, chainId, poolData, gauges, gaugeAddr])
+  }, [account, chainId, poolData, gaugeAddr, signerOrProvider])
 
   const onMigrateToGaugeClick = async () => {
     if (

src/components/SiteSettingsMenu.tsx

@@ -10,11 +10,6 @@ import {
   MenuItem as MuiMenuItem,
   styled,
 } from "@mui/material"
-import {
-  ChainId,
-  DEV_SUPPORTED_NETWORKS,
-  SUPPORTED_NETWORKS,
-} from "../constants/networks"
 import {
   ExpandLess,
   ExpandMore,
@@ -23,11 +18,9 @@ import {
 } from "@mui/icons-material"
 import { IS_SDL_LIVE, SDL_TOKEN } from "../constants"
 import React, { ReactElement, useState } from "react"
-import { extractAddEthereumChainArgs, getTokenIconPath } from "../utils"
 
 import CheckIcon from "@mui/icons-material/Check"
-import { IS_DEVELOPMENT } from "../utils/environment"
-import { useActiveWeb3React } from "../hooks"
+import { getTokenIconPath } from "../utils"
 import useAddTokenToMetamask from "../hooks/useAddTokenToMetamask"
 import { useThemeSettings } from "../providers/ThemeSettingsProvider"
 import { useTranslation } from "react-i18next"
@@ -98,13 +91,7 @@ function AddTokenSection(): ReactElement | null {
 
 function NetworkSection(): ReactElement {
   const { t } = useTranslation()
-  const { chainId: activeChainId, library, account } = useActiveWeb3React()
   const [isNetworkVisible, setIsNetworkVisible] = useState(false)
-  const networks = (
-    IS_DEVELOPMENT
-      ? Object.values(DEV_SUPPORTED_NETWORKS)
-      : Object.values(SUPPORTED_NETWORKS)
-  ).sort((a, b) => a.chainName.localeCompare(b.chainName))
 
   return (
     <div data-testid="networkMenuContainer">
@@ -114,35 +101,6 @@ function NetworkSection(): ReactElement {
       >
         {t("network")} {isNetworkVisible ? <ExpandLess /> : <ExpandMore />}
       </MenuItem>
-      <Collapse in={isNetworkVisible}>
-        {networks.map((network) => {
-          return network ? (
-            <ListItemButton
-              onClick={() => {
-                if (Number(network.chainId) === ChainId.MAINNET) {
-                  void library?.send("wallet_switchEthereumChain", [
-                    { chainId: "0x1" },
-                    account,
-                  ])
-                } else {
-                  void library?.send("wallet_addEthereumChain", [
-                    extractAddEthereumChainArgs(network),
-                    account,
-                  ])
-                }
-              }}
-              key={network.chainId}
-            >
-              <ListItemIcon sx={{ ml: 2 }}>
-                {activeChainId === Number(network.chainId) && (
-                  <CheckIcon fontSize="small" />
-                )}
-              </ListItemIcon>
-              <ListItemText primary={network?.chainName} />
-            </ListItemButton>
-          ) : null
-        })}
-      </Collapse>
     </div>
   )
 }

src/components/Web3Status.tsx

@@ -71,28 +71,34 @@ const Web3Status = (): ReactElement => {
                   >
                     {connected ? account.displayName : "Connect Wallet"}
                   </Button>
-                  <IconButton
-                    onClick={openChainModal}
-                    sx={{
-                      minWidth: 0,
-                      padding: 0.5,
-                      backgroundColor: theme.palette.background.default,
-                      borderRadius: theme.spacing(1),
-                    }}
-                  >
-                    {chain.hasIcon && chain.iconUrl && (
-                      <img
-                        alt={chain.name ?? "Chain icon"}
-                        src={chain.iconUrl}
-                      />
-                    )}
-                  </IconButton>
+                  {chain.hasIcon ? (
+                    <IconButton
+                      onClick={openChainModal}
+                      sx={{
+                        minWidth: 0,
+                        padding: 0.5,
+                        backgroundColor: theme.palette.background.default,
+                        borderRadius: theme.spacing(1),
+                      }}
+                    >
+                      {chain.hasIcon && chain.iconUrl && (
+                        <img
+                          alt={chain.name ?? "Chain icon"}
+                          src={chain.iconUrl}
+                        />
+                      )}
+                    </IconButton>
+                  ) : (
+                    <Button variant="outlined" onClick={openChainModal}>
+                      {chain.name}
+                    </Button>
+                  )}
                 </Box>
               )
             })()}
 
             <Dialog
-              open={modalOpen}
+              open={modalOpen && !!account}
               onClose={(): void => setModalOpen(false)}
               maxWidth="sm"
               fullWidth

src/components/WrongNetworkModal.tsx

@@ -1,19 +1,18 @@
 import { DialogContent, Typography } from "@mui/material"
 import React, { ReactElement, useState } from "react"
-import { UnsupportedChainIdError, useWeb3React } from "@web3-react/core"
 import Dialog from "./Dialog"
-import { Web3Provider } from "@ethersproject/providers"
+import { useNetwork } from "wagmi"
 import { useTranslation } from "react-i18next"
 
 export default function WrongNetworkModal(): ReactElement {
   const [open, setOpen] = useState<boolean | undefined>()
-  const { error } = useWeb3React<Web3Provider>()
-  const isUnsupportChainIdError = error instanceof UnsupportedChainIdError
+  const { chain } = useNetwork()
+  const unsupportedChain = chain?.unsupported
   const { t } = useTranslation()
 
   return (
     <Dialog
-      open={open ?? isUnsupportChainIdError}
+      open={open ?? !!unsupportedChain}
       maxWidth="xs"
       onClose={() => setOpen(false)}
     >