Merge branch 'dev' into fix(web)/fix-links-and-modal-behavior

Author: alcercu

.github/workflows/deploy-subgraph.yml

@@ -11,6 +11,11 @@ on:
         options:
           - arbitrum-goerli
           - arbitrum
+      update:
+        description: Whether to update the subgraph with the current artifacts for the selected network.
+        required: true
+        default: true
+        type: boolean
 
 permissions:
   contents: read
@@ -33,16 +38,38 @@ jobs:
         with:
           node-version: 16
 
+      - name: Install Yarn if running locally
+        if: ${{ env.ACT }}
+        run: npm install -g yarn
+
       - name: Install the dependencies
         run: yarn install
 
+      - name: Install jq and yq
+        if: ${{ inputs.update }}  
+        run: |
+          mkdir bin
+          wget -qO bin/jq https://github.com/jqlang/jq/releases/download/jq-1.6/jq-linux64
+          wget -qO bin/yq https://github.com/mikefarah/yq/releases/latest/download/yq_linux_amd64
+          chmod a+x bin/jq bin/yq 
+
+      - name: Update the subgraph definition
+        if: ${{ inputs.update }}
+        run: |
+          export PATH=$PWD/../bin:$PATH
+          yarn update:${{ inputs.network }}
+        working-directory: subgraph
+
       - name: Build the subgraph
         run: |
           yarn codegen
           yarn build
-
+        working-directory: subgraph
+        
       - name: Authenticate with TheGraph
         run: yarn graph auth "${{ secrets.SUBGRAPH_AUTH_TOKEN }}" --product hosted-service
+        working-directory: subgraph
 
       - name: Deploy the subgraph
         run: yarn deploy:${{ inputs.network }}
+        working-directory: subgraph

.github/workflows/scorecards.yml

@@ -84,6 +84,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@807578363a7869ca324a79039e6db9c843e0e100 # v2.1.27
+        uses: github/codeql-action/upload-sarif@6c089f53dd51dc3fc7e599c3cb5356453a52ca9e # v2.20.0
         with:
           sarif_file: results.sarif

contracts/package.json

@@ -41,19 +41,19 @@
     "@nomicfoundation/hardhat-chai-matchers": "^1.0.6",
     "@nomiclabs/hardhat-ethers": "^2.2.3",
     "@nomiclabs/hardhat-solhint": "^3.0.1",
-    "@openzeppelin/contracts": "^4.9.1",
+    "@openzeppelin/contracts": "^4.9.2",
     "@typechain/ethers-v5": "^11.0.0",
     "@typechain/hardhat": "^7.0.0",
     "@types/chai": "^4.3.5",
     "@types/mocha": "^10.0.1",
     "@types/node": "^16.18.36",
     "chai": "^4.3.7",
-    "dotenv": "^16.1.4",
+    "dotenv": "^16.3.1",
     "ethereumjs-util": "^7.1.5",
     "ethers": "^5.7.2",
     "hardhat": "^2.15.0",
     "hardhat-contract-sizer": "^2.10.0",
-    "hardhat-deploy": "^0.11.30",
+    "hardhat-deploy": "^0.11.31",
     "hardhat-deploy-ethers": "^0.4.0-next.1",
     "hardhat-deploy-tenderly": "^0.2.0",
     "hardhat-docgen": "^1.3.0",

prettier-config/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
     "prettier": "^2.8.8",
     "prettier-plugin-solidity": "^1.1.3"
   },

scripts/act-subgraph.yml

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+act workflow_dispatch -j buildAndDeploy --input network=arbitrum-goerli,update=true

scripts/check-prerequisites.sh

@@ -11,10 +11,22 @@ function require() #cmd
   fi
 }
 
+# for the NPM and toolchain version management
+require volta
+
+# for the local subgraph node
 require docker
 require docker-compose
+
+# for some contracts utilities
+require cast
+require forge
+
+# for the subgraph and contracts utilities
 require jq
 require yq
-require volta
+
+# for the local testing of Github Actions
+require act
 
 exit $status

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 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;
+`;