Wagmi.sh/close#320

web/package.json

@@ -69,7 +69,7 @@
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.0",
     "core-js": "^3.21.1",
-    "ethers": "^5.7.0",
+    "ethers": "5.7.0",
     "graphql": "^16.4.0",
     "graphql-request": "^5.0.0",
     "moment": "^2.29.4",
@@ -88,7 +88,8 @@
     "react-toastify": "^9.1.1",
     "react-use": "^17.4.0",
     "styled-components": "^5.3.6",
-    "swr": "^1.3.0"
+    "swr": "^1.3.0",
+    "wagmi": "^0.12.10"
   },
   "volta": {
     "node": "16.18.1",

web/src/components/ConnectButton.tsx

@@ -2,18 +2,23 @@ import React from "react";
 import styled from "styled-components";
 import { shortenAddress } from "utils/shortenAddress";
 import { Button } from "@kleros/ui-components-library";
-import { useWeb3 } from "hooks/useWeb3";
-import { useConnect } from "hooks/useConnect";
-import { SUPPORTED_CHAINS } from "consts/chains";
+
+import { useAccount, useConnect, useNetwork, useEnsAvatar } from "wagmi";
+import { arbitrumGoerli } from "wagmi/chains";
+import { useErrorHandler } from "react-error-boundary";
 
 const AccountDisplay: React.FC = () => {
-  const { account, chainId } = useWeb3();
-  const chainName = chainId ? SUPPORTED_CHAINS[chainId].chainName : undefined;
-  const shortAddress = account ? shortenAddress(account) : undefined;
+  const { chain } = useNetwork();
+  const { address } = useAccount();
+  const { data } = useEnsAvatar({ address });
+
+  const shortAddress = address ? shortenAddress(address) : undefined;
+  const addressOrAvatar = data ? data : shortAddress;
+
   return (
     <StyledContainer>
-      <small>{chainName}</small>
-      <label>{shortAddress}</label>
+      <small>{chain?.name}</small>
+      <label>{addressOrAvatar}</label>
     </StyledContainer>
   );
 };
@@ -40,12 +45,38 @@ const StyledContainer = styled.div`
 `;
 
 const ConnectButton: React.FC = () => {
-  const { active } = useWeb3();
-  const { activate, connecting } = useConnect();
-  return active ? (
+  const { isConnected } = useAccount();
+
+  const { chain } = useNetwork();
+
+  const handleError = useErrorHandler();
+
+  const { connect, connectors } = useConnect();
+
+  try {
+    if (isConnected) {
+      if (chain?.id !== arbitrumGoerli.id) {
+        throw new Error("chain not configure");
+      }
+    }
+  } catch (e) {
+    handleError(e);
+  }
+
+  return isConnected ? (
     <AccountDisplay />
   ) : (
-    <Button disabled={connecting} small text={"Connect"} onClick={activate} />
+    <>
+      {connectors.map((connector) => (
+        <Button
+          small
+          text={"Connect"}
+          disabled={!connector.ready}
+          key={connector.id}
+          onClick={() => connect({ connector })}
+        />
+      ))}
+    </>
   );
 };
 

web/src/components/WrongChainBoundary.tsx

@@ -1,25 +1,34 @@
-import React, { useState } from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import { ErrorBoundary } from "react-error-boundary";
 import { Button } from "@kleros/ui-components-library";
-import { switchChain } from "utils/switchChain";
+
 import { DEFAULT_CHAIN, SUPPORTED_CHAINS } from "consts/chains";
 
-const WrongChainRecovery: React.FC<{ resetErrorBoundary: () => void }> = ({
-  resetErrorBoundary,
-}) => {
-  const [loading, setLoading] = useState(false);
+import { useSwitchNetwork, useNetwork } from "wagmi";
+import { arbitrumGoerli } from "wagmi/chains";
+
+const WrongChainRecovery: React.FC<{
+  resetErrorBoundary: () => void;
+}> = ({ resetErrorBoundary }) => {
+  const { switchNetwork } = useSwitchNetwork({
+    throwForSwitchChainNotSupported: true,
+  });
+  const { chain } = useNetwork();
+
+  useEffect(() => {
+    if (chain?.id === arbitrumGoerli.id) {
+      resetErrorBoundary();
+    }
+  }, [chain?.id, resetErrorBoundary]);
+
   return (
     <Container>
       <Button
-        isLoading={loading}
-        disabled={loading}
+        disabled={!switchNetwork}
         text={`Switch to ${SUPPORTED_CHAINS[DEFAULT_CHAIN].chainName}`}
         onClick={() => {
-          setLoading(true);
-          switchChain(DEFAULT_CHAIN)
-            .then(resetErrorBoundary)
-            .finally(() => setLoading(false));
+          switchNetwork?.(arbitrumGoerli.id);
         }}
       />
     </Container>

web/src/consts/community-elements.tsx

@@ -56,7 +56,7 @@ export const firstSection: IElement[] = [
     urls: [
       {
         node: <StyledLabel>Kleros Forum</StyledLabel>,
-        link: "https://google.com",
+        link: "https://forum.kleros.io/",
       },
     ],
   },
@@ -66,7 +66,7 @@ export const firstSection: IElement[] = [
     urls: [
       {
         node: <StyledLabel>Snapshot</StyledLabel>,
-        link: "https://google.com",
+        link: "https://snapshot.org/#/kleros.eth/",
       },
     ],
   },
@@ -75,7 +75,7 @@ export const firstSection: IElement[] = [
     urls: [
       {
         node: <StyledLabel>Cooperative Kleros</StyledLabel>,
-        link: "https://google.com",
+        link: "https://kleros.io/coop/",
       },
     ],
   },
@@ -88,7 +88,7 @@ export const secondSection: IElement[] = [
     urls: [
       {
         node: <StyledLabel>Join</StyledLabel>,
-        link: "https://google.com",
+        link: "https://t.me/kleros",
       },
     ],
   },
@@ -98,15 +98,15 @@ export const secondSection: IElement[] = [
     urls: [
       {
         node: <StyledDiscordIcon />,
-        link: "https://google.com",
+        link: "https://discord.com/invite/cAvWk8B23f",
       },
       {
         node: <StyledTelegramIcon />,
-        link: "https://google.com",
+        link: "https://t.me/kleros",
       },
       {
         node: <StyledSlackIcon />,
-        link: "https://google.com",
+        link: "https://slack.kleros.io/",
       },
     ],
   },

web/src/context/Web3Provider.tsx

@@ -1,15 +1,25 @@
 import React from "react";
-import { Web3ReactProvider } from "@web3-react/core";
-import {
-  Web3Provider as EthersProvider,
-  ExternalProvider,
-} from "@ethersproject/providers";
 
-const getLibrary = (provider: ExternalProvider): EthersProvider =>
-  new EthersProvider(provider);
+import { WagmiConfig, createClient, configureChains } from "wagmi";
+import { publicProvider } from "wagmi/providers/public";
+import { MetaMaskConnector } from "wagmi/connectors/metaMask";
+import { arbitrumGoerli, mainnet } from "wagmi/chains";
+
+const { chains, provider, webSocketProvider } = configureChains(
+  [mainnet, arbitrumGoerli],
+  [publicProvider()]
+);
+
+// Set up client
+const client = createClient({
+  autoConnect: true,
+  connectors: [new MetaMaskConnector({ chains })],
+  provider,
+  webSocketProvider,
+});
 
 const Web3Provider: React.FC<{ children: React.ReactNode }> = ({
   children,
-}) => <Web3ReactProvider {...{ getLibrary }}> {children} </Web3ReactProvider>;
+}) => <WagmiConfig client={client}> {children} </WagmiConfig>;
 
 export default Web3Provider;