From 341d0e59c5241e1df524a60e62b44b562c40b76e Mon Sep 17 00:00:00 2001 From: alcercu <333aleix333@gmail.com> Date: Fri, 24 Mar 2023 18:08:59 +0100 Subject: [PATCH 01/41] refactor(web/WIP): migrate to wagmi --- web/.gitignore | 1 + web/package.json | 10 +- web/src/components/ConnectButton.tsx | 28 +- web/src/context/Web3Provider.tsx | 31 +- web/src/hooks/queries/useETHBalance.ts | 17 - web/src/hooks/useConnectedContract.ts | 8 +- .../Cases/CaseDetails/Appeal/Classic/Fund.tsx | 16 +- .../Cases/CaseDetails/Evidence/index.tsx | 6 +- .../pages/Cases/CaseDetails/Voting/index.tsx | 6 +- .../CourtDetails/StakePanel/InputDisplay.tsx | 20 +- .../StakePanel/JurorStakeDisplay.tsx | 6 +- .../StakePanel/StakeWithdrawButton.tsx | 71 +- web/src/utils/wrapWithToast.ts | 3 +- web/wagmi.config.ts | 26 + yarn.lock | 1841 ++++++++++++++++- 15 files changed, 1960 insertions(+), 130 deletions(-) delete mode 100644 web/src/hooks/queries/useETHBalance.ts create mode 100644 web/wagmi.config.ts diff --git a/web/.gitignore b/web/.gitignore index 06fcf9212..3892ba18f 100644 --- a/web/.gitignore +++ b/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* diff --git a/web/package.json b/web/package.json index bb865ce92..4d67b3078 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/components/ConnectButton.tsx b/web/src/components/ConnectButton.tsx index 86c9a765b..34aec7c89 100644 --- a/web/src/components/ConnectButton.tsx +++ b/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 ( - {chainName} + {chain?.name} ); @@ -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 ? ( ) : ( -