From 7a7eb86c99e81affb7d2029edb675f7cfb22a3b4 Mon Sep 17 00:00:00 2001
From: Arun kumar <76466509+Arun9650@users.noreply.github.com>
Date: Sun, 9 Apr 2023 18:37:43 +0530
Subject: [PATCH 1/2] fix(web): links to socails

---
 web/src/consts/community-elements.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/consts/community-elements.tsx b/web/src/consts/community-elements.tsx
index 9b73d7e4f..006e8d3af 100644
--- a/web/src/consts/community-elements.tsx
+++ b/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/",
       },
     ],
   },

From 6de0da5c256896a5dc40e4d2eaa88e2b84d50180 Mon Sep 17 00:00:00 2001
From: Arun kumar <arun02580@gmail.com>
Date: Mon, 10 Apr 2023 17:27:29 +0530
Subject: [PATCH 2/2] fix(web): integrate the wagmi.sh for wallet connect

---
 web/package.json                          |  5 ++-
 web/src/components/ConnectButton.tsx      | 55 ++++++++++++++++++-----
 web/src/components/WrongChainBoundary.tsx | 33 +++++++++-----
 web/src/context/Web3Provider.tsx          | 26 +++++++----
 4 files changed, 85 insertions(+), 34 deletions(-)

diff --git a/web/package.json b/web/package.json
index 05283dabd..462a91c44 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/src/components/ConnectButton.tsx b/web/src/components/ConnectButton.tsx
index 86c9a765b..0b8b9d2be 100644
--- a/web/src/components/ConnectButton.tsx
+++ b/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 })}
+        />
+      ))}
+    </>
   );
 };
 
diff --git a/web/src/components/WrongChainBoundary.tsx b/web/src/components/WrongChainBoundary.tsx
index 895ed2dcb..74f27d8a1 100644
--- a/web/src/components/WrongChainBoundary.tsx
+++ b/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>
diff --git a/web/src/context/Web3Provider.tsx b/web/src/context/Web3Provider.tsx
index 5ec98ea1a..06912c8b4 100644
--- a/web/src/context/Web3Provider.tsx
+++ b/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;