Rainbow Wallet + wagmi Integration

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.4.6",
     "@reduxjs/toolkit": "^1.4.0",
     "@sentry/react": "^6.16.1",
     "@sentry/tracing": "^6.16.1",
@@ -36,13 +37,14 @@
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.29.1",
     "ethcall": "^4.6.3",
-    "ethers": "^5.5.3",
+    "ethers": "^5.6.9",
     "framer-motion": "^4.0.3",
     "history": "^5.0.0",
     "i18next": "^19.8.3",
     "i18next-browser-languagedetector": "^6.0.1",
     "i18next-fetch-backend": "^3.0.0",
     "lodash": "^4.17.20",
+    "lodash.merge": "^4.6.2",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
@@ -54,6 +56,7 @@
     "react-use-intercom": "^1.5.0",
     "redux": "^4.1.0",
     "redux-localstorage-simple": "^2.4.0",
+    "wagmi": "^0.6.3",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
@@ -72,6 +75,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@typechain/ethers-v5": "^6.0.5",
     "@types/async-retry": "^1.4.2",
+    "@types/lodash.merge": "^4.6.7",
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.30.4",
     "@typescript-eslint/parser": "^5.30.4",

src/components/AccountDetails.tsx

@@ -6,22 +6,23 @@ import {
   Stack,
   Typography,
 } from "@mui/material"
+import { ChainId, SUPPORTED_WALLETS } from "../constants"
 import React, { ReactElement, useContext } from "react"
 import { commify, formatBNToString } from "../utils"
+import { useAccount, useNetwork } from "wagmi"
 
 import ChangeIcon from "@mui/icons-material/ImportExport"
 import Copy from "./Copy"
 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 { useActiveWeb3React } from "../hooks"
 import { useTheme } from "@mui/material/styles"
 import { useTranslation } from "react-i18next"
 import { useUDName } from "../hooks/useUDName"
@@ -32,10 +33,16 @@ interface Props {
 
 export default function AccountDetail({ openOptions }: Props): ReactElement {
   const { t } = useTranslation()
-  const { account, connector, chainId } = useActiveWeb3React()
+  // const { account, connector, chainId } = useActiveWeb3React()
+  const { chain } = useNetwork()
+  const { address, connector } = useAccount()
+  //   onConnect({ address, connector, isReconnected }) {
+  //     console.log("Connected", { address, connector, isReconnected })
+  //   },
+  // })
   const userState = useContext(UserStateContext)
   const udName = useUDName()
-  const nativeToken = NETWORK_NATIVE_TOKENS[chainId ?? 1]
+  const nativeToken = NETWORK_NATIVE_TOKENS[(chain?.id as ChainId) ?? 1]
   const ethBalanceFormatted = commify(
     formatBNToString(userState?.tokenBalances?.[nativeToken] || Zero, 18, 6),
   )
@@ -73,11 +80,11 @@ export default function AccountDetail({ openOptions }: Props): ReactElement {
           <Stack direction="row" spacing={1}>
             <Identicon />
             <Typography variant="subtitle1">
-              {udName || (account && shortenAddress(account))}
+              {udName || (address && shortenAddress(address))}
             </Typography>
-            {chainId && account && (
+            {chain?.id && address && (
               <Link
-                href={getMultichainScanLink(chainId, account, "address")}
+                href={getMultichainScanLink(chain.id, address, "address")}
                 target="_blank"
                 rel="noreferrer"
               >
@@ -91,7 +98,7 @@ export default function AccountDetail({ openOptions }: Props): ReactElement {
             </Typography>
           </Box>
           <Box display="flex" alignItems="center">
-            {account && <Copy toCopy={account} />}
+            {address && <Copy toCopy={address} />}
           </Box>
           <Box display="flex" alignItems="center">
             <Button

src/components/PoolOverview.tsx

@@ -21,8 +21,9 @@ import TokenIcon from "./TokenIcon"
 import { Zero } from "@ethersproject/constants"
 import { areGaugesActive } from "../utils/gauges"
 import logo from "../assets/icons/logo.svg"
-import { useActiveWeb3React } from "../hooks"
+// import { useActiveWeb3React } from "../hooks"
 import { useHistory } from "react-router-dom"
+import { useNetwork } from "wagmi"
 import { useTranslation } from "react-i18next"
 
 interface Props {
@@ -38,10 +39,11 @@ export default function PoolOverview({
 }: Props): ReactElement | null {
   const { t } = useTranslation()
   const theme = useTheme()
-  const { chainId } = useActiveWeb3React()
+  // const { chainId } = useActiveWeb3React()
+  const { chain } = useNetwork()
   const [poolData, userShareData] = usePoolData(poolName)
   const shouldMigrate = !!onClickMigrate
-  const gaugesAreActive = areGaugesActive(chainId)
+  const gaugesAreActive = areGaugesActive(chain?.id ?? 1)
   const formattedData = {
     name: poolData.name,
     reserve: poolData.reserve

src/components/SiteSettingsMenu.tsx

@@ -1,15 +1,13 @@
+import { Box, Divider, styled, useTheme } from "@mui/material"
+import { ChainId, IS_L2_SUPPORTED, SUPPORTED_WALLETS } from "../constants"
 import {
-  Box,
   Collapse,
-  Divider,
   ListItemButton,
   ListItemIcon,
   ListItemText,
   Menu,
   MenuItem as MuiMenuItem,
-  styled,
 } from "@mui/material"
-import { ChainId, IS_L2_SUPPORTED, IS_SDL_LIVE, SDL_TOKEN } from "../constants"
 import {
   DEV_SUPPORTED_NETWORKS,
   SUPPORTED_NETWORKS,
@@ -20,7 +18,9 @@ import {
   LightMode,
   NightlightRound,
 } from "@mui/icons-material"
+import { IS_SDL_LIVE, SDL_TOKEN } from "../constants"
 import React, { ReactElement, useState } from "react"
+import { UnsupportedChainIdError, useWeb3React } from "@web3-react/core"
 
 import CheckIcon from "@mui/icons-material/Check"
 import { IS_DEVELOPMENT } from "../utils/environment"
@@ -47,6 +47,9 @@ export default function SiteSettingsMenu({
   direction = "right",
 }: SiteSettingsMenuProps): ReactElement {
   const open = Boolean(anchorEl)
+  const { activate } = useWeb3React()
+  const theme = useTheme()
+  const [isWalletsVisibile, setIsWalletsVisible] = useState(false)
   return (
     <Menu
       open={open}
@@ -69,6 +72,39 @@ export default function SiteSettingsMenu({
         <LanguageSection key="language" />
         <Divider variant="middle" />
         <ThemeSection key="theme" />
+        <MenuItem
+          onClick={() => setIsWalletsVisible((state) => !state)}
+          data-testid="test"
+        >
+          Wallets
+          {isWalletsVisibile ? <ExpandLess /> : <ExpandMore />}
+        </MenuItem>
+        <Collapse in={isWalletsVisibile} data-testid="test">
+          <ListItemButton
+            color="inherit"
+            sx={{
+              justifyContent: "space-between",
+              padding: 2,
+              borderColor: theme.palette.grey[300],
+            }}
+            onClick={(): void => {
+              activate(
+                SUPPORTED_WALLETS.UNSTOPPABLE_DOMAINS.connector,
+                undefined,
+                true,
+              ).catch((error) => {
+                if (error instanceof UnsupportedChainIdError) {
+                  void activate(SUPPORTED_WALLETS.UNSTOPPABLE_DOMAINS.connector) // a little janky...can't use setError because the connector isn't set
+                } else {
+                  // TODO: handle error
+                }
+              })
+              close?.()
+            }}
+          >
+            <span>{SUPPORTED_WALLETS.UNSTOPPABLE_DOMAINS.name}</span>
+          </ListItemButton>
+        </Collapse>
         {IS_SDL_LIVE && <AddTokenSection key="token" />}
       </Box>
     </Menu>

src/components/SwapPage.tsx

@@ -29,7 +29,8 @@ import { commify } from "../utils"
 import { formatUnits } from "@ethersproject/units"
 import { isHighPriceImpact } from "../utils/priceImpact"
 import { logEvent } from "../utils/googleAnalytics"
-import { useActiveWeb3React } from "../hooks"
+import { useAccount } from "wagmi"
+// import { useActiveWeb3React } from "../hooks"
 import { useSelector } from "react-redux"
 import { useTranslation } from "react-i18next"
 
@@ -62,7 +63,8 @@ interface Props {
 
 const SwapPage = (props: Props): ReactElement => {
   const { t } = useTranslation()
-  const { account } = useActiveWeb3React()
+  const { address } = useAccount()
+  // const { account } = useActiveWeb3React()
   const {
     tokenOptions,
     exchangeRateInfo,
@@ -219,7 +221,7 @@ const SwapPage = (props: Props): ReactElement => {
           )}
         </Box>
       </Paper>
-      {account && isHighPriceImpact(exchangeRateInfo.priceImpact) ? (
+      {address && isHighPriceImpact(exchangeRateInfo.priceImpact) ? (
         <Alert variant="filled" severity="error" sx={{ mt: 2 }}>
           {t("highPriceImpact", {
             rate: formattedPriceImpact,

src/components/TopMenu.tsx

@@ -17,15 +17,17 @@ import { NavLink, NavLinkProps, useLocation } from "react-router-dom"
 import React, { ReactElement, useContext, useState } from "react"
 
 import { AppState } from "../state"
-import NetworkDisplay from "./NetworkDisplay"
+import { ConnectButton } from "@rainbow-me/rainbowkit"
+// import NetworkDisplay from "./NetworkDisplay"
 import { RewardsBalancesContext } from "../providers/RewardsBalancesProvider"
 import { ReactComponent as SaddleLogo } from "../assets/icons/logo.svg"
 import SiteSettingsMenu from "./SiteSettingsMenu"
 import TokenClaimDialog from "./TokenClaimDialog"
 import Web3Status from "./Web3Status"
 import { areGaugesActive } from "../utils/gauges"
 import { formatBNToShortString } from "../utils"
-import { useActiveWeb3React } from "../hooks"
+import { useNetwork } from "wagmi"
+// import { useActiveWeb3React } from "../hooks"
 import { useSelector } from "react-redux"
 import { useTranslation } from "react-i18next"
 
@@ -67,60 +69,57 @@ function TopMenu(): ReactElement {
     }
   }
   return (
-    <AppBar position="static" elevation={0}>
-      <Toolbar data-testid="topMenuContainer" sx={{ xs: 0, lg: 7 }}>
-        <Box display="flex" width="100%" alignItems="center">
-          <Box flex={1}>
-            <NavLink to="/">
-              <SaddleLogo height={isUnderLaptopSize ? "40px" : "100"} />
-            </NavLink>
-          </Box>
-
-          <Stack
-            display={isUnderLaptopSize ? "none" : "flex"}
-            bottom={{ xs: theme.spacing(4) }}
-            right="50%"
-            flex={1}
-            direction="row"
-            spacing={4}
-            justifyContent="center"
-            padding={theme.spacing(1, 3)}
-          >
-            <MenuList />
-          </Stack>
-          <Stack
-            direction="row"
-            spacing={1}
-            flex={1}
-            justifyContent="flex-end"
-            alignItems="center"
+    <AppBar position="static">
+      <Toolbar data-testid="topMenuContainer">
+        <Stack paddingRight={2}>
+          <NavLink to="/">
+            <SaddleLogo height={isUnderLaptopSize ? "40px" : "100"} />
+          </NavLink>
+        </Stack>
+
+        <Stack
+          flex={1}
+          justifyContent="flex-start"
+          direction="row"
+          spacing={4}
+          // padding={theme.spacing(1, 3)}
+        >
+          <MenuList />
+        </Stack>
+        <Stack
+          direction="row"
+          spacing={1}
+          flex={2}
+          justifyContent="flex-end"
+          alignItems="center"
+          paddingRight={2}
+        >
+          <SDLPrice sdlPrice={sdlPrice} />
+          <RewardsButton setCurrentModal={setCurrentModal} />
+        </Stack>
+        {/* <Box display={isUnderLaptopSize ? "none" : "block"}> */}
+        <Stack spacing={1} direction="row">
+          <ConnectButton />
+          {/* <Web3Status /> */}
+          {/* </Box> */}
+          {/* <NetworkDisplay onClick={handleSettingMenu} /> */}
+          <IconButton
+            onClick={handleMoreMenu}
+            data-testid="settingsMenuBtn"
+            sx={{
+              minWidth: 0,
+              padding: 0.5,
+              backgroundColor: theme.palette.background.default,
+              borderRadius: theme.spacing(1),
+            }}
           >
-            <SDLPrice sdlPrice={sdlPrice} />
-            <RewardsButton setCurrentModal={setCurrentModal} />
-            <Box display={isUnderLaptopSize ? "none" : "block"}>
-              <Web3Status />
-            </Box>
-            <NetworkDisplay onClick={handleSettingMenu} />
-            <IconButton
-              onClick={handleMoreMenu}
-              data-testid="settingsMenuBtn"
-              sx={{
-                minWidth: 0,
-                padding: 0.5,
-                backgroundColor: theme.palette.background.default,
-                borderRadius: theme.spacing(1),
-              }}
-            >
-              <MoreVert
-                htmlColor={theme.palette.text.primary}
-                sx={{ display: isUnderLaptopSize ? "none" : "block" }}
-              />
-              <MenuIcon
-                sx={{ display: !isUnderLaptopSize ? "none" : "block" }}
-              />
-            </IconButton>
-          </Stack>
-        </Box>
+            <MoreVert
+              htmlColor={theme.palette.text.primary}
+              sx={{ display: isUnderLaptopSize ? "none" : "block" }}
+            />
+            <MenuIcon sx={{ display: !isUnderLaptopSize ? "none" : "block" }} />
+          </IconButton>
+        </Stack>
 
         <SiteSettingsMenu
           key="buttonSettings"
@@ -176,8 +175,9 @@ function RewardsButton({
 
 function MenuList() {
   const { t } = useTranslation()
-  const { chainId } = useActiveWeb3React()
-  const gaugesAreActive = areGaugesActive(chainId)
+  // const { chainId } = useActiveWeb3React()
+  const { chain } = useNetwork()
+  const gaugesAreActive = areGaugesActive(chain?.id)
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const { pathname } = useLocation()
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call