Rainbowkit integration (#1378)

* Add RainbowKit and Wagmi dependencies to package.json

* Configure wagmi and rainbow-me

* Add Tally wallet to the list of popular wallets in config.ts

* allow undefined alchemyKey

* Rainbow install and wagmi configuration (#1366)

* hide fusdc deprecated gauges from vote (#1367)

* fix one token withdraw, correct apy display (#1368)

* Rainbow install and wagmi configuration (#1366)

* Wagmi provider (#1370)

* Add wagmi config and Rainbowkit provider

* update wagmi and rainbowkit version and updated config file of wagmi

* Update package.json and config.ts to use updated versions of "@rainbow-me/rainbowkit" and "wagmi", respectively, and remove unused CoinbasePayTest page

* Remove redundant parameter in getContract function for better readability

* Update walletconnect button (#1371)

* Add wagmi config and Rainbowkit provider

* update wagmi and rainbowkit version and updated config file of wagmi

* feat: Replace Wallet connect button using Rainbotkit ConnectButton

* Update package.json and config.ts to use updated versions of "@rainbow-me/rainbowkit" and "wagmi", respectively, and remove unused CoinbasePayTest page

* Lint fix

* Update ci to trigger ci/cd

* Replace library of useActiveWeb3React with wagmi hook (#1374)

* Add wagmi config and Rainbowkit provider

* update wagmi and rainbowkit version and updated config file of wagmi

* feat: Replace Wallet connect button using Rainbotkit ConnectButton

* Update package.json and config.ts to use updated versions of "@rainbow-me/rainbowkit" and "wagmi", respectively, and remove unused CoinbasePayTest page

* update useActiveWeb3React with wagmi hook

* Update useActiveWeb3React with wagmi hook

* remove web3-react completely

* ci updte

* Refactor Web3Status component to conditionally render IconButton or Button based on whether or not chain has an icon

* replace library of useActiveWeb3React with signer or provider from wagmi hook

* Refactor useContract hook to useActiveWeb3React instead of individual useAccount, useProvider, and useSigner hooks for cleaner code

* Re Add Sentry initialization in index.tsx to enable error tracking and tracing

* Refactor AppContainer and Pools components to remove unused imports and variables

* Add back  error handling for missing childGaugeFactoryAddress in buildGaugeDataSidechain

* Refactor usePoolRegistryMultiCall to useActiveWeb3React for signerOrProvider

* recover  ci/cd setting

* remove husky change

* add buffer polyfill

* add prod infura key

* remove viem

---------

Co-authored-by: David Hamme <dhamme@gmail.com>

.env.production

@@ -1,2 +1,3 @@
 REACT_APP_GOOGLE_ANALYTICS_MEASUREMENT_ID="G-8JBQYLS8HB"
 REACT_APP_NETWORK_URL="https://mainnet.infura.io/v3/28e6f2ed0e5747e6bef772f27372f62d"
+REACT_APP_INFURA_API_KEY=28e6f2ed0e5747e6bef772f27372f62d

.husky/_/husky.sh

@@ -28,4 +28,4 @@ if [ -z "$husky_skip_init" ]; then
   fi
 
   exit $exitCode
-fi
+fi

package.json

@@ -12,6 +12,7 @@
     "@mui/lab": "^5.0.0-alpha.76",
     "@mui/material": "^5.4.0",
     "@mui/x-date-pickers": "^5.0.0-alpha.2",
+    "@rainbow-me/rainbowkit": "^0.12.14",
     "@reduxjs/toolkit": "^1.4.0",
     "@sentry/react": "^6.16.1",
     "@sentry/tracing": "^6.16.1",
@@ -23,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",
@@ -54,6 +47,7 @@
     "react-toastify": "^8.1.1",
     "redux": "^4.1.0",
     "redux-localstorage-simple": "^2.4.0",
+    "wagmi": "^0.12.12",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

public/locales/en.json

@@ -14,6 +14,7 @@
   "claimForAllPools": "Claim for all Pools",
   "claimForAllOutdatedPools": "Claim for all Outdated Pools",
   "claimableSPA": "Claimable SPA",
+  "disconnect": "Disconnect",
   "status": "Status",
   "paused": "Paused",
   "active": "Active",

src/components/AccountDetails.tsx

@@ -8,41 +8,45 @@ import {
 } from "@mui/material"
 import React, { ReactElement, useContext } from "react"
 import { commify, formatBNToString } from "../utils"
+import { useAccount, useDisconnect, useNetwork } from "wagmi"
 
-import ChangeIcon from "@mui/icons-material/ImportExport"
 import Copy from "./Copy"
+import DisconnectIcon from "@mui/icons-material/ExitToApp"
 import Identicon from "./Identicon"
 import LaunchIcon from "@mui/icons-material/Launch"
-import { NETWORK_NATIVE_TOKENS } from "../constants/networks"
-import { SUPPORTED_WALLETS } from "../constants"
 import Transactions from "./Transactions"
 import { UserStateContext } from "../providers/UserStateProvider"
 import { Zero } from "@ethersproject/constants"
-import { find } from "lodash"
 import { getMultichainScanLink } from "../utils/getEtherscanLink"
 import { shortenAddress } from "../utils/shortenAddress"
-import { useActiveWeb3React } from "../hooks"
 import { useTheme } from "@mui/material/styles"
 import { useTranslation } from "react-i18next"
-import { useUDName } from "../hooks/useUDName"
 
-interface Props {
-  openOptions: () => void
-}
-
-export default function AccountDetail({ openOptions }: Props): ReactElement {
+export default function AccountDetail(): ReactElement {
   const { t } = useTranslation()
-  const { account, connector, chainId } = useActiveWeb3React()
+  const { address, connector } = useAccount()
+  const { chain } = useNetwork()
+  const { disconnect } = useDisconnect()
   const userState = useContext(UserStateContext)
-  const udName = useUDName()
-  const nativeToken = NETWORK_NATIVE_TOKENS[chainId ?? 1]
+
+  const nativeToken = chain?.nativeCurrency
+  const chainId = chain?.id
+
   const ethBalanceFormatted = commify(
-    formatBNToString(userState?.tokenBalances?.[nativeToken] || Zero, 18, 6),
+    formatBNToString(
+      userState?.tokenBalances?.[nativeToken?.symbol || "ETH"] || Zero,
+      18,
+      6,
+    ),
   )
 
-  const connectorName = find(SUPPORTED_WALLETS, ["connector", connector])?.name
+  const connectorName = connector?.name
   const theme = useTheme()
 
+  const handleDisconnect = () => {
+    disconnect()
+  }
+
   return (
     <Box data-testid="accountDetailContainer">
       <DialogContent>
@@ -66,11 +70,11 @@ export default function AccountDetail({ openOptions }: Props): ReactElement {
           <Stack direction="row" spacing={1}>
             <Identicon />
             <Typography variant="subtitle1">
-              {udName || (account && shortenAddress(account))}
+              {address && shortenAddress(address)}
             </Typography>
-            {chainId && account && (
+            {chainId && address && (
               <Link
-                href={getMultichainScanLink(chainId, account, "address")}
+                href={getMultichainScanLink(chainId, address, "address")}
                 target="_blank"
                 rel="noreferrer"
               >
@@ -86,18 +90,10 @@ export default function AccountDetail({ openOptions }: Props): ReactElement {
         </Box>
         <Box display="flex" gap="16px" justifyContent="space-between" mt="16px">
           <Box display="flex" alignItems="center">
-            {account && <Copy toCopy={account} />}
+            {address && <Copy toCopy={address} />}
           </Box>
-
-          <Button
-            onClick={() => {
-              openOptions()
-            }}
-            startIcon={<ChangeIcon />}
-            data-testid="changeAccountBtn"
-            sx={{ padding: 0 }}
-          >
-            {t("changeAccount")}
+          <Button onClick={handleDisconnect} startIcon={<DisconnectIcon />}>
+            {t("disconnect")}
           </Button>
         </Box>
       </DialogContent>

src/components/Copy.tsx

@@ -14,6 +14,7 @@ export default function CopyHelper(props: {
 
   return (
     <Button
+      color="secondary"
       onClick={() => setCopied(props.toCopy)}
       startIcon={isCopied ? <CheckIcon /> : <ContentCopyIcon />}
       sx={{ padding: 0 }}

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 (