Introduce web3-onboard and remove wagmi (#843)

.github/workflows/dapp-tests.yaml

@@ -24,5 +24,5 @@ jobs:
           path: 'apps/dapp/node_modules'
           key: ${{ runner.os }}-modules-${{ hashFiles('apps/dapp/yarn.lock') }}
       - run: yarn install
-      - run: yarn build
+      - run: NODE_OPTIONS="--max_old_space_size=4096" yarn build
         working-directory: apps/dapp

apps/dapp/package.json

@@ -21,6 +21,12 @@
   "dependencies": {
     "@balancer-labs/sdk": "^1.0.4",
     "@tippyjs/react": "^4.2.6",
+    "@web3-onboard/coinbase": "^2.2.5",
+    "@web3-onboard/core": "^2.20.5",
+    "@web3-onboard/gnosis": "^2.1.10",
+    "@web3-onboard/injected-wallets": "^2.10.4",
+    "@web3-onboard/react": "^2.8.10",
+    "@web3-onboard/walletconnect": "^2.4.4",
     "axios": "^0.24.0",
     "buffer": "^6.0.3",
     "d3-shape": "^3.0.1",
@@ -46,8 +52,7 @@
     "tippy.js": "^6.3.7",
     "use-debounce": "^9.0.2",
     "use-interval": "^1.4.0",
-    "util": "^0.12.4",
-    "wagmi": "0.12.0"
+    "util": "^0.12.4"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",

apps/dapp/src/components/Layouts/CoreLayout/Account.tsx

@@ -1,68 +1,62 @@
 import styled from 'styled-components';
-import { useAccount, useConnect, useNetwork, useDisconnect, useEnsName } from 'wagmi';
+
 import { useMediaQuery } from 'react-responsive';
 import TruncatedAddress from 'components/TruncatedAddress';
 import Loader from 'components/Loader/Loader';
 import { Button as BaseButton } from 'components/Button/Button';
-import { LOCAL_CHAIN } from 'components/WagmiProvider';
-import { useAppContext } from 'providers/AppProvider';
 import { queryVerySmallDesktop, verySmallDesktop } from 'styles/breakpoints';
 
-import Tooltip from 'components/Tooltip/Tooltip';
-import { useEffect, useState } from 'react';
+import { useConnectWallet, useSetChain } from '@web3-onboard/react';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useWallet } from 'providers/WalletProvider';
 
 export const Account = () => {
-  const { showConnectPopover } = useAppContext();
-  const { chain: activeChain } = useNetwork();
-  const { isLoading: connectLoading } = useConnect();
-  const { address, isConnecting: accountLoading, connector } = useAccount();
-  const { disconnect } = useDisconnect();
+  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();
+  const { walletAddress } = useWallet();
+  const [{ connectedChain }] = useSetChain();
+  const currentChainId = useMemo(() => parseInt(connectedChain?.id || '', 16), [connectedChain]);
+
   const isSmallDesktop = useMediaQuery({
     query: queryVerySmallDesktop,
   });
-  const networkLoading = false;
-  const isLocalChain = activeChain?.id === LOCAL_CHAIN.id;
-  const { data: ensName } = useEnsName({
-    address: (!isLocalChain && address) || undefined,
-  });
+
   const [isBlocked, setIsBlocked] = useState(false);
 
   useEffect(() => {
     const checkBlocked = async () => {
       const blocked = await fetch(`${window.location.href}api/geoblock`)
         .then((res) => res.json())
-        .then((res) => res.blocked);
+        .then((res) => res.blocked)
+        .catch(() => false);
       setIsBlocked(blocked);
     };
     checkBlocked();
   }, []);
 
-  if (accountLoading || connectLoading || networkLoading) {
+  if (connecting) {
     return <Loader />;
   }
 
   if (isBlocked) {
     return <ConnectButton disabled label="Restricted Jurisdiction" isSmall isActive isUppercase role="button" />;
   }
 
-  if (address) {
-    const isMetaMask = connector?.name === 'MetaMask';
+  if (wallet) {
     const disconnectButton = (
       <ConnectButton
         isSmall
         isActive
         isUppercase
-        disabled={isMetaMask}
         role="button"
         label="Disconnect"
         onClick={() => {
-          disconnect();
+          disconnect(wallet);
         }}
       />
     );
 
-    const ensOrAddress = ensName || address;
-    const explorerUrl = getChainExplorerURL(ensOrAddress, activeChain?.id);
+    const explorerUrl = getChainExplorerURL(walletAddress || '', currentChainId);
 
     return (
       <>
@@ -77,22 +71,11 @@ export const Account = () => {
               }
             }}
           >
-            Connected: {ensName || <TruncatedAddress address={address} />}
+            Connected: {<TruncatedAddress address={walletAddress || ''} />}
           </UserAddress>
         )}
         <Spacer />
-        {!isMetaMask ? (
-          disconnectButton
-        ) : (
-          <Tooltip
-            content={
-              'To disconnect an account managed through Metamask, ' +
-              'use the “Disconnect this account” button on Metamask itself'
-            }
-          >
-            {disconnectButton}
-          </Tooltip>
-        )}
+        {disconnectButton}
       </>
     );
   }
@@ -104,7 +87,10 @@ export const Account = () => {
       isUppercase
       label={'Connect Wallet'}
       role="button"
-      onClick={() => showConnectPopover()}
+      disabled={connecting}
+      onClick={() => {
+        wallet ? disconnect(wallet) : connect();
+      }}
     />
   );
 };
@@ -113,10 +99,8 @@ const getChainExplorerURL = (ensOrAddress: string, chainId?: number) => {
   switch (chainId) {
     case 1:
       return `https://etherscan.io/address/${ensOrAddress}`;
-    case 4:
-      return `https://rinkeby.etherscan.io/address/${ensOrAddress}`;
-    case 5:
-      return `https://goerli.etherscan.io/address/${ensOrAddress}`;
+    case 11155111:
+      return `https://sepolia.etherscan.io/address/${ensOrAddress}`;
     default:
       return '#';
   }