diff --git a/contracts/.solhint.json b/contracts/.solhint.json index 4011b3bf0..465b9a041 100644 --- a/contracts/.solhint.json +++ b/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", { diff --git a/contracts/tsconfig.json b/contracts/tsconfig.json index 6804edeaf..b6d222642 100644 --- a/contracts/tsconfig.json +++ b/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" + ] } diff --git a/cspell.json b/cspell.json index 0aec6dde4..0e7d2a065 100644 --- a/cspell.json +++ b/cspell.json @@ -3,7 +3,11 @@ "version": "0.2", "ignorePaths": [], "dictionaryDefinitions": [], - "dictionaries": ["en_US", "companies", "softwareTerms"], + "dictionaries": [ + "en_US", + "companies", + "softwareTerms" + ], "words": [ "arbitrum", "commitlint", diff --git a/package.json b/package.json index ac0761513..74ceb50a2 100644 --- a/package.json +++ b/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", diff --git a/tsconfig/base.json b/tsconfig/base.json index 7aea7d0bf..cbd15edc5 100644 --- a/tsconfig/base.json +++ b/tsconfig/base.json @@ -15,5 +15,7 @@ "resolveJsonModule": true, "experimentalDecorators": true }, - "exclude": ["node_modules"] + "exclude": [ + "node_modules" + ] } diff --git a/tsconfig/react-library.json b/tsconfig/react-library.json index 543d93dcf..3f69cb2c3 100644 --- a/tsconfig/react-library.json +++ b/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" } diff --git a/web/.eslintrc.json b/web/.eslintrc.json index 780538033..4a6e560ab 100644 --- a/web/.eslintrc.json +++ b/web/.eslintrc.json @@ -60,7 +60,7 @@ "max-len": [ "warn", { - "code": 80 + "code": 120 } ], "react/prop-types": 0, 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 1d98638a6..7c1cc996e 100644 --- a/web/package.json +++ b/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,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.31.0", @@ -67,7 +77,7 @@ "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", diff --git a/web/src/components/ConnectButton.tsx b/web/src/components/ConnectButton.tsx index 7ef37da99..7998faa47 100644 --- a/web/src/components/ConnectButton.tsx +++ b/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 {chainName}; + const { chain } = useNetwork(); + return {chain?.name}; }; export const AddressDisplay: React.FC = () => { - const { account } = useWeb3(); - const shortAddress = account ? shortenAddress(account) : undefined; - return ; + const { address } = useAccount(); + return ; }; 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 ? :