Merge pull request #949 from kleros/refactor(web)/delete-web3-react-files

Refactor(web)/delete web3 react files

Author: alcercu

web/package.json

@@ -65,9 +65,6 @@
     "@sentry/react": "^7.55.2",
     "@sentry/tracing": "^7.55.2",
     "@types/react-modal": "^3.16.0",
-    "@web3-react/core": "^6.1.9",
-    "@web3-react/injected-connector": "^6.0.7",
-    "@web3-react/types": "^6.0.7",
     "@web3modal/ethereum": "^2.2.2",
     "@web3modal/react": "^2.2.2",
     "chart.js": "^3.9.1",

web/src/app.tsx

@@ -5,13 +5,11 @@ import { Routes, Route } from "react-router-dom";
 import "react-loading-skeleton/dist/skeleton.css";
 import Web3Provider from "context/Web3Provider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
-import WrongChainBoundary from "components/WrongChainBoundary";
 import Layout from "layout/index";
 import Home from "./pages/Home";
 import Cases from "./pages/Cases";
 import Dashboard from "./pages/Dashboard";
 import Courts from "./pages/Courts";
-
 import "react-toastify/dist/ReactToastify.css";
 
 const fetcherBuilder =
@@ -27,26 +25,20 @@ const App: React.FC = () => {
       <SWRConfig
         value={{
           fetcher: fetcherBuilder(
-            process.env.REACT_APP_SUBGRAPH_ENDPOINT ??
-              "https://api.thegraph.com/subgraphs/name/alcercu/kleroscoretest"
+            process.env.REACT_APP_SUBGRAPH_ENDPOINT ?? "https://api.thegraph.com/subgraphs/name/alcercu/kleroscoretest"
           ),
         }}
       >
         <Web3Provider>
-          <WrongChainBoundary>
-            <Routes>
-              <Route path="/" element={<Layout />}>
-                <Route index element={<Home />} />
-                <Route path="cases/*" element={<Cases />} />
-                <Route path="courts/*" element={<Courts />} />
-                <Route path="dashboard" element={<Dashboard />} />
-                <Route
-                  path="*"
-                  element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>}
-                />
-              </Route>
-            </Routes>
-          </WrongChainBoundary>
+          <Routes>
+            <Route path="/" element={<Layout />}>
+              <Route index element={<Home />} />
+              <Route path="cases/*" element={<Cases />} />
+              <Route path="courts/*" element={<Courts />} />
+              <Route path="dashboard" element={<Dashboard />} />
+              <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
+            </Route>
+          </Routes>
         </Web3Provider>
       </SWRConfig>
     </StyledComponentsProvider>

web/src/components/ConnectButton.tsx web/src/components/ConnectWallet.tsxweb/src/components/ConnectButton.tsx renamed to web/src/components/ConnectWallet.tsx

@@ -1,29 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import { useAccount, useNetwork } from "wagmi";
-import { arbitrumGoerli } from "wagmi/chains";
+import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
 import { useWeb3Modal } from "@web3modal/react";
 import { shortenAddress } from "utils/shortenAddress";
 import { Button } from "@kleros/ui-components-library";
-
-const AccountDisplay: React.FC = () => {
-  return (
-    <StyledContainer>
-      <ChainDisplay />
-      <AddressDisplay />
-    </StyledContainer>
-  );
-};
-
-export const ChainDisplay: React.FC = () => {
-  const { chain } = useNetwork();
-  return <small>{chain?.name}</small>;
-};
-
-export const AddressDisplay: React.FC = () => {
-  const { address } = useAccount();
-  return <label>{address && shortenAddress(address)}</label>;
-};
+import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
 
 const StyledContainer = styled.div`
   width: fit-content;
@@ -46,15 +27,63 @@ const StyledContainer = styled.div`
   }
 `;
 
+const AccountDisplay: React.FC = () => {
+  return (
+    <StyledContainer>
+      <ChainDisplay />
+      <AddressDisplay />
+    </StyledContainer>
+  );
+};
+
+export const ChainDisplay: React.FC = () => {
+  const { chain } = useNetwork();
+  return <small>{chain?.name}</small>;
+};
+
+export const AddressDisplay: React.FC = () => {
+  const { address } = useAccount();
+  return <label>{address && shortenAddress(address)}</label>;
+};
+
+export const SwitchChainButton: React.FC = () => {
+  const { switchNetwork, isLoading } = useSwitchNetwork();
+  const handleSwitch = () => {
+    if (!switchNetwork) {
+      console.error("Cannot switch network. Please do it manually.");
+      return;
+    }
+    try {
+      switchNetwork(DEFAULT_CHAIN);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  return (
+    <Button
+      isLoading={isLoading}
+      disabled={isLoading}
+      text={`Switch to ${SUPPORTED_CHAINS[DEFAULT_CHAIN].chainName}`}
+      onClick={handleSwitch}
+    />
+  );
+};
+
 const ConnectButton: React.FC = () => {
-  const { isConnected } = useAccount();
-  const { open, setDefaultChain, isOpen } = useWeb3Modal();
-  setDefaultChain(arbitrumGoerli);
-  return isConnected ? (
-    <AccountDisplay />
-  ) : (
+  const { open, isOpen } = useWeb3Modal();
+  return (
     <Button disabled={isOpen} small text={"Connect"} onClick={async () => await open({ route: "ConnectWallet" })} />
   );
 };
 
-export default ConnectButton;
+const ConnectWallet: React.FC = () => {
+  const { chain } = useNetwork();
+  const { isConnected } = useAccount();
+  if (isConnected) {
+    if (chain && chain.id !== DEFAULT_CHAIN) {
+      return <SwitchChainButton />;
+    } else return <AccountDisplay />;
+  } else return <ConnectButton />;
+};
+
+export default ConnectWallet;

web/src/components/DisputeCard/index.tsx

@@ -16,6 +16,10 @@ const StyledCard = styled(Card)`
   min-width: 312px;
   width: auto;
   height: 260px;
+
+  .react-loading-skeleton {
+    z-index: 0;
+  }
 `;
 
 const Container = styled.div`

web/src/components/EnsureChain.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { DEFAULT_CHAIN } from "consts/chains";
+import { useNetwork } from "wagmi";
+import ConnectWallet from "components/ConnectWallet";
+
+interface IEnsureChain {
+  children: React.ReactElement;
+}
+
+export const EnsureChain: React.FC<IEnsureChain> = ({ children }) => {
+  const { chain } = useNetwork();
+
+  return chain && chain.id === DEFAULT_CHAIN ? children : <ConnectWallet />;
+};

web/src/components/Overlay.tsx

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.blackLowOpacity};
+  z-index: 1;
+`;