refactor(web/WIP): migrate to wagmi

Author: alcercu

web/.gitignore

@@ -22,6 +22,7 @@ parcel-bundle-reports
 .env.development.local
 .env.test.local
 .env.production.local
+src/hooks/contracts/*
 
 npm-debug.log*
 yarn-debug.log*

web/package.json

@@ -27,10 +27,11 @@
     "clean": "rm dist/bundle.js",
     "start": "parcel",
     "start-local": "REACT_APP_SUBGRAPH_ENDPOINT=http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local parcel",
-    "build": "parcel build",
+    "build": "yarn run generate-hooks && yarn run parcel build",
     "check-style": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "check-types": "tsc --noEmit",
-    "generate": "graphql-codegen"
+    "generate-gql": "graphql-codegen",
+    "generate-hooks": "wagmi generate"
   },
   "devDependencies": {
     "@netlify/functions": "^1.4.0",
@@ -67,6 +68,8 @@
     "@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",
     "chartjs-adapter-moment": "^1.0.1",
     "core-js": "^3.30.0",
@@ -89,7 +92,8 @@
     "react-toastify": "^9.1.2",
     "react-use": "^17.4.0",
     "styled-components": "^5.3.9",
-    "swr": "^1.3.0"
+    "swr": "^1.3.0",
+    "wagmi": "^0.12.6"
   },
   "volta": {
     "node": "16.18.1",

web/src/components/ConnectButton.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import styled from "styled-components";
+import { useAccount, useNetwork } from "wagmi";
+import { arbitrumGoerli } from "wagmi/chains";
+import { useWeb3Modal } from "@web3modal/react";
 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";
 
 const AccountDisplay: React.FC = () => {
-  const { account, chainId } = useWeb3();
-  const chainName = chainId ? SUPPORTED_CHAINS[chainId].chainName : undefined;
-  const shortAddress = account ? shortenAddress(account) : undefined;
+  const { address } = useAccount();
+  const { chain } = useNetwork();
+  const shortAddress = address ? shortenAddress(address) : undefined;
   return (
     <StyledContainer>
-      <small>{chainName}</small>
+      <small>{chain?.name}</small>
       <label>{shortAddress}</label>
     </StyledContainer>
   );
@@ -40,12 +40,18 @@ const StyledContainer = styled.div`
 `;
 
 const ConnectButton: React.FC = () => {
-  const { active } = useWeb3();
-  const { activate, connecting } = useConnect();
-  return active ? (
+  const { isConnected } = useAccount();
+  const { open, setDefaultChain, isOpen } = useWeb3Modal();
+  setDefaultChain(arbitrumGoerli);
+  return isConnected ? (
     <AccountDisplay />
   ) : (
-    <Button disabled={connecting} small text={"Connect"} onClick={activate} />
+    <Button
+      disabled={isOpen}
+      small
+      text={"Connect"}
+      onClick={async () => await open({ route: "ConnectWallet" })}
+    />
   );
 };
 

web/src/context/Web3Provider.tsx

@@ -1,15 +1,32 @@
 import React from "react";
-import { Web3ReactProvider } from "@web3-react/core";
 import {
-  Web3Provider as EthersProvider,
-  ExternalProvider,
-} from "@ethersproject/providers";
+  EthereumClient,
+  w3mConnectors,
+  w3mProvider,
+} from "@web3modal/ethereum";
+import { Web3Modal } from "@web3modal/react";
+import { configureChains, createClient, WagmiConfig } from "wagmi";
+import { arbitrumGoerli } from "wagmi/chains";
 
-const getLibrary = (provider: ExternalProvider): EthersProvider =>
-  new EthersProvider(provider);
+const chains = [arbitrumGoerli];
+const projectId = "6efaa26765fa742153baf9281e218217";
+
+const { provider } = configureChains(chains, [w3mProvider({ projectId })]);
+const wagmiClient = createClient({
+  autoConnect: true,
+  connectors: w3mConnectors({ projectId, version: 1, chains }),
+  provider,
+});
+
+const ethereumClient = new EthereumClient(wagmiClient, chains);
 
 const Web3Provider: React.FC<{ children: React.ReactNode }> = ({
   children,
-}) => <Web3ReactProvider {...{ getLibrary }}> {children} </Web3ReactProvider>;
+}) => (
+  <>
+    <WagmiConfig client={wagmiClient}> {children} </WagmiConfig>
+    <Web3Modal {...{ projectId, ethereumClient }} />
+  </>
+);
 
 export default Web3Provider;

web/src/hooks/queries/useETHBalance.ts

@@ -1,5 +1,5 @@
-import { useWeb3 } from "hooks/useWeb3";
 import { JsonRpcProvider } from "@ethersproject/providers";
+import { useSigner } from "wagmi";
 import { getContract, ContractName } from "utils/getContract";
 import { QUERY_CHAINS } from "consts/chains";
 
@@ -10,10 +10,10 @@ export const useConnectedContract = (
   contractAddress?: string,
   chain?: number
 ) => {
-  const { library } = useWeb3();
   const contract = getContract(contractName, contractAddress);
-  if (library && !chain) {
-    const connectedContract = contract?.connect(library.getSigner());
+  const { data: signer } = useSigner();
+  if (signer && !chain) {
+    const connectedContract = contract?.connect(signer);
     return connectedContract;
   } else {
     try {

web/src/hooks/useConnectedContract.ts

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
+import { useAccount, useBalance } from "wagmi";
 import { Field, Button } from "@kleros/ui-components-library";
 import { DisputeKitClassic } from "@kleros/kleros-v2-contracts/typechain-types/src/arbitration/dispute-kits/DisputeKitClassic";
 import { useConnectedContract } from "hooks/useConnectedContract";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useParsedAmount } from "hooks/useParsedAmount";
-import { useETHBalance } from "hooks/queries/useETHBalance";
 import {
   useLoserSideCountdownContext,
   useSelectedOptionContext,
@@ -22,7 +22,12 @@ const Fund: React.FC = () => {
     (loserSideCountdown! > 0 ||
       (fundedChoices!.length > 0 && !fundedChoices?.includes(winningChoice!)));
   const { id } = useParams();
-  const { data: balance } = useETHBalance();
+  const { address, isDisconnected } = useAccount();
+  const { data: balance } = useBalance({
+    address,
+    watch: true,
+    cacheTime: 12_000,
+  });
   const [amount, setAmount] = useState("");
   const parsedAmount = useParsedAmount(amount);
   const [isSending, setIsSending] = useState(false);
@@ -43,7 +48,12 @@ const Fund: React.FC = () => {
           placeholder="Amount to fund"
         />
         <StyledButton
-          disabled={isSending || !balance || parsedAmount.gt(balance)}
+          disabled={
+            isDisconnected ||
+            isSending ||
+            !balance ||
+            parsedAmount.gt(balance.value)
+          }
           text={typeof balance === "undefined" ? "Connect to Fund" : "Fund"}
           onClick={() => {
             if (

web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
-import { useWeb3 } from "hooks/useWeb3";
+import { useAccount } from "wagmi";
 import { Button, Searchbar } from "@kleros/ui-components-library";
 import { useEvidenceGroup } from "queries/useEvidenceGroup";
 import { useEvidences } from "queries/useEvidences";
@@ -13,7 +13,7 @@ const Evidence: React.FC<{ arbitrable?: string }> = ({ arbitrable }) => {
   const { id } = useParams();
   const { data: evidenceGroup } = useEvidenceGroup(id, arbitrable);
   const { data } = useEvidences(evidenceGroup);
-  const { account } = useWeb3();
+  const { address } = useAccount();
   return (
     <Container>
       {evidenceGroup && (
@@ -27,7 +27,7 @@ const Evidence: React.FC<{ arbitrable?: string }> = ({ arbitrable }) => {
       <StyledButton
         small
         text="Submit Evidence"
-        disabled={typeof account === "undefined" || isModalOpen}
+        disabled={typeof address === "undefined" || isModalOpen}
         isLoading={isModalOpen}
         onClick={() => setIsModalOpen(true)}
       />

web/src/pages/Cases/CaseDetails/Evidence/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useParams } from "react-router-dom";
-import { useWeb3 } from "hooks/useWeb3";
+import { useAccount } from "wagmi";
 import { useDrawQuery } from "queries/useDrawQuery";
 import Binary from "./Binary";
 import VotingHistory from "./VotingHistory";
@@ -10,9 +10,9 @@ const Voting: React.FC<{
   arbitrable?: string;
   currentPeriodIndex?: number;
 }> = ({ arbitrable, currentPeriodIndex }) => {
-  const { account } = useWeb3();
+  const { address } = useAccount();
   const { id } = useParams();
-  const { data } = useDrawQuery(account?.toLowerCase(), id);
+  const { data } = useDrawQuery(address?.toLowerCase(), id);
   return data &&
     currentPeriodIndex === Periods.vote &&
     data.draws?.length > 0 ? (

web/src/pages/Cases/CaseDetails/Voting/index.tsx

@@ -2,10 +2,9 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { utils } from "ethers";
+import { useAccount } from "wagmi";
 import { Button, Field } from "@kleros/ui-components-library";
 
-import { useWeb3 } from "hooks/useWeb3";
-import { useConnect } from "hooks/useConnect";
 import { useParsedAmount } from "hooks/useParsedAmount";
 import { usePNKBalance } from "queries/usePNKBalance";
 import { useJurorBalance } from "queries/useJurorBalance";
@@ -26,12 +25,11 @@ const InputDisplay: React.FC<IInputDisplay> = ({
   const parsedAmount = useParsedAmount(amount);
 
   const { id } = useParams();
-  const { account } = useWeb3();
-  const { data: balance } = usePNKBalance(account);
+  const { address } = useAccount();
+  const { data: balance } = usePNKBalance(address);
   const parsedBalance = utils.formatEther(balance || 0);
-  const { data: jurorBalance } = useJurorBalance(account, id);
+  const { data: jurorBalance } = useJurorBalance(address, id);
   const parsedStake = utils.formatEther(jurorBalance?.staked || 0);
-  const { activate, connecting } = useConnect();
   const isStaking = action === ActionType.stake;
 
   return (
@@ -62,7 +60,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
           }
           variant="info"
         />
-        {account ? (
+        {address ? (
           <StakeWithdrawButton
             {...{
               parsedAmount,
@@ -73,16 +71,14 @@ const InputDisplay: React.FC<IInputDisplay> = ({
             }}
           />
         ) : (
-          <Button
-            text="Connect to Stake"
-            onClick={activate}
-            disabled={connecting}
-          />
+          <Button text="Connect to Stake" />
         )}
       </InputArea>
     </>
   );
 };
+// onClick={activate}
+// disabled={connecting}
 
 export default InputDisplay;