Refactor(web): migration to wagmi and viem

contracts/.solhint.json

@@ -1,8 +1,13 @@
 {
   "extends": "solhint:recommended",
-  "plugins": ["prettier"],
+  "plugins": [
+    "prettier"
+  ],
   "rules": {
-    "compiler-version": ["error", "^0.8.0"],
+    "compiler-version": [
+      "error",
+      "^0.8.0"
+    ],
     "func-visibility": [
       "warn",
       {

contracts/tsconfig.json

@@ -1,5 +1,13 @@
 {
   "extends": "@kleros/kleros-v2-tsconfig/base.json",
-  "include": ["./src", "./scripts", "./test", "./typechain-types", "./deploy"],
-  "files": ["./hardhat.config.ts"]
+  "include": [
+    "./src",
+    "./scripts",
+    "./test",
+    "./typechain-types",
+    "./deploy"
+  ],
+  "files": [
+    "./hardhat.config.ts"
+  ]
 }

cspell.json

@@ -3,7 +3,11 @@
   "version": "0.2",
   "ignorePaths": [],
   "dictionaryDefinitions": [],
-  "dictionaries": ["en_US", "companies", "softwareTerms"],
+  "dictionaries": [
+    "en_US",
+    "companies",
+    "softwareTerms"
+  ],
   "words": [
     "arbitrum",
     "commitlint",

package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
+    "buffer": "^5.5.0",
     "conventional-changelog-cli": "^2.2.2",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",

tsconfig/base.json

@@ -15,5 +15,7 @@
     "resolveJsonModule": true,
     "experimentalDecorators": true
   },
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }

tsconfig/react-library.json

@@ -4,7 +4,12 @@
   "extends": "./base.json",
   "compilerOptions": {
     "jsx": "react",
-    "lib": ["es6", "dom", "esnext.asynciterable", "es2017"],
+    "lib": [
+      "es6",
+      "dom",
+      "esnext.asynciterable",
+      "es2017"
+    ],
     "module": "ESNext",
     "target": "es6"
   }

web/.eslintrc.json

@@ -60,7 +60,7 @@
     "max-len": [
       "warn",
       {
-        "code": 80
+        "code": 120
       }
     ],
     "react/prop-types": 0,

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,21 +27,29 @@
     "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"
   },
+  "prettier": "@kleros/kleros-v2-prettier-config",
   "devDependencies": {
     "@kleros/kleros-v2-eslint-config": "workspace:^",
     "@kleros/kleros-v2-prettier-config": "workspace:^",
     "@kleros/kleros-v2-tsconfig": "workspace:^",
     "@netlify/functions": "^1.6.0",
-    "@parcel/transformer-svg-react": "~2.9.2",
+    "@parcel/transformer-svg-react": "~2.8.0",
     "@parcel/watcher": "~2.1.0",
     "@types/react": "^18.2.12",
     "@types/react-dom": "^18.2.5",
     "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "@typescript-eslint/utils": "^5.58.0",
+    "@wagmi/cli": "^1.1.0",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-parcel": "^1.10.6",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -60,14 +68,16 @@
     "@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.31.0",
     "ethers": "^5.7.2",
     "graphql": "^16.6.0",
     "graphql-request": "~5.1.0",
     "moment": "^2.29.4",
-    "parcel": "~2.9.2",
+    "parcel": "~2.8.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",
@@ -82,8 +92,10 @@
     "react-scripts": "^5.0.1",
     "react-toastify": "^9.1.3",
     "react-use": "^17.4.0",
-    "styled-components": "^5.3.11",
-    "swr": "^1.3.0"
+    "styled-components": "^5.3.9",
+    "swr": "^1.3.0",
+    "viem": "^0.3.48",
+    "wagmi": "^1.1.0"
   },
   "volta": {
     "node": "16.18.1",

web/src/components/ConnectButton.tsx

@@ -1,10 +1,10 @@
 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 = () => {
   return (
@@ -16,15 +16,13 @@ const AccountDisplay: React.FC = () => {
 };
 
 export const ChainDisplay: React.FC = () => {
-  const { chainId } = useWeb3();
-  const chainName = chainId ? SUPPORTED_CHAINS[chainId].chainName : undefined;
-  return <small>{chainName}</small>;
+  const { chain } = useNetwork();
+  return <small>{chain?.name}</small>;
 };
 
 export const AddressDisplay: React.FC = () => {
-  const { account } = useWeb3();
-  const shortAddress = account ? shortenAddress(account) : undefined;
-  return <label>{shortAddress}</label>;
+  const { address } = useAccount();
+  return <label>{address && shortenAddress(address)}</label>;
 };
 
 const StyledContainer = styled.div`
@@ -49,9 +47,14 @@ const StyledContainer = styled.div`
 `;
 
 const ConnectButton: React.FC = () => {
-  const { active } = useWeb3();
-  const { activate, connecting } = useConnect();
-  return active ? <AccountDisplay /> : <Button disabled={connecting} small text={"Connect"} onClick={activate} />;
+  const { isConnected } = useAccount();
+  const { open, setDefaultChain, isOpen } = useWeb3Modal();
+  setDefaultChain(arbitrumGoerli);
+  return isConnected ? (
+    <AccountDisplay />
+  ) : (
+    <Button disabled={isOpen} small text={"Connect"} onClick={async () => await open({ route: "ConnectWallet" })} />
+  );
 };
 
 export default ConnectButton;

web/src/components/DisputeCard/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
-import { utils } from "ethers";
+import { formatEther } from "viem";
 import Skeleton from "react-loading-skeleton";
 import { Card } from "@kleros/ui-components-library";
 import { Periods } from "consts/periods";
@@ -42,7 +42,7 @@ const DisputeCard: React.FC<CasesPageQuery["disputes"][number]> = ({
   court,
 }) => {
   const currentPeriodIndex = Periods[period];
-  const rewards = `≥ ${utils.formatEther(court.feeForJuror)} ETH`;
+  const rewards = `≥ ${formatEther(court.feeForJuror)} ETH`;
   const date =
     currentPeriodIndex === 4
       ? lastPeriodChange

web/src/components/StatDisplay.tsx

@@ -42,14 +42,7 @@ export interface IStatDisplay {
   color: "red" | "orange" | "green" | "blue" | "purple";
 }
 
-const StatDisplay: React.FC<IStatDisplay> = ({
-  title,
-  text,
-  subtext,
-  icon: Icon,
-  color,
-  ...props
-}) => {
+const StatDisplay: React.FC<IStatDisplay> = ({ title, text, subtext, icon: Icon, color, ...props }) => {
   const theme = useTheme();
   const COLORS = {
     red: createPair(theme.error, theme.errorLight),

web/src/consts/index.ts

@@ -1,3 +1 @@
-import { BigNumber } from "ethers";
-
-export const ONE_BASIS_POINT = BigNumber.from("10000");
+export const ONE_BASIS_POINT = 10000n;

web/src/context/Web3Provider.tsx

@@ -1,15 +1,29 @@
 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);
-
-const Web3Provider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => <Web3ReactProvider {...{ getLibrary }}> {children} </Web3ReactProvider>;
+import { EthereumClient, w3mConnectors } from "@web3modal/ethereum";
+import { alchemyProvider } from "@wagmi/core/providers/alchemy";
+import { Web3Modal } from "@web3modal/react";
+import { configureChains, createConfig, WagmiConfig } from "wagmi";
+import { arbitrumGoerli, gnosisChiado } from "wagmi/chains";
+import { publicProvider } from "wagmi/providers/public";
+
+const chains = [arbitrumGoerli, gnosisChiado];
+const projectId = "6efaa26765fa742153baf9281e218217";
+
+const { publicClient } = configureChains(chains, [alchemyProvider({ apiKey: "" }), publicProvider()]);
+
+const wagmiConfig = createConfig({
+  autoConnect: false,
+  connectors: w3mConnectors({ projectId, version: 1, chains }),
+  publicClient,
+});
+
+const ethereumClient = new EthereumClient(wagmiConfig, chains);
+
+const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <>
+    <WagmiConfig config={wagmiConfig}> {children} </WagmiConfig>
+    <Web3Modal {...{ projectId, ethereumClient }} />
+  </>
+);
 
 export default Web3Provider;

web/src/hooks/queries/useAppealCost.ts

@@ -1,13 +1,13 @@
 import useSWRImmutable from "swr/immutable";
-import { useConnectedContract } from "hooks/useConnectedContract";
+import { getKlerosCore } from "hooks/contracts/generated";
 
 export const useAppealCost = (disputeID?: string) => {
-  const KlerosCore = useConnectedContract("KlerosCore");
+  const klerosCore = getKlerosCore({});
   return useSWRImmutable(
-    () => (KlerosCore ? `AppealCost${disputeID}` : false),
+    () => (klerosCore && disputeID ? `AppealCost${disputeID}` : false),
     async () => {
-      if (!KlerosCore) return;
-      return KlerosCore.appealCost(disputeID);
+      if (!klerosCore || typeof disputeID === "undefined") return;
+      return await klerosCore.read.appealCost([BigInt(disputeID)]);
     }
   );
 };

web/src/hooks/queries/useDisputeKitClassicMultipliers.ts

@@ -1,16 +1,15 @@
 import useSWRImmutable from "swr/immutable";
-import { BigNumber } from "ethers";
-import { useConnectedContract } from "hooks/useConnectedContract";
+import { getDisputeKitClassic } from "hooks/contracts/generated";
 
 export const useDisputeKitClassicMultipliers = () => {
-  const disputeKitClassic = useConnectedContract("DisputeKitClassic");
+  const disputeKitClassic = getDisputeKitClassic({});
   return useSWRImmutable(
     () => (disputeKitClassic ? `Multipliers` : false),
     async () => {
       if (!disputeKitClassic) return;
-      const winner_stake_multiplier = await disputeKitClassic.WINNER_STAKE_MULTIPLIER();
-      const loser_stake_multiplier = await disputeKitClassic.LOSER_STAKE_MULTIPLIER();
-      const loser_appeal_period_multiplier = await disputeKitClassic.LOSER_APPEAL_PERIOD_MULTIPLIER();
+      const winner_stake_multiplier = await disputeKitClassic.read.WINNER_STAKE_MULTIPLIER();
+      const loser_stake_multiplier = await disputeKitClassic.read.LOSER_STAKE_MULTIPLIER();
+      const loser_appeal_period_multiplier = await disputeKitClassic.read.LOSER_APPEAL_PERIOD_MULTIPLIER();
       return {
         winner_stake_multiplier,
         loser_stake_multiplier,
@@ -21,7 +20,7 @@ export const useDisputeKitClassicMultipliers = () => {
 };
 
 export interface IDisputeKitClassicMultipliers {
-  winner_stake_multiplier: BigNumber;
-  loser_stake_multiplier: BigNumber;
-  loser_appeal_period_multiplier: BigNumber;
+  winner_stake_multiplier: bigint;
+  loser_stake_multiplier: bigint;
+  loser_appeal_period_multiplier: bigint;
 }