refactor: upgrade routing

package.json

@@ -8,11 +8,11 @@
     "color": "^4.2.3",
     "ethers": "^5.6.5",
     "os-browserify": "^0.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-interval-rerender": "^1.1.0",
     "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.11.2",
     "react-tageditor": "^0.2.3",
     "react-toastify": "^9.1.2",
     "rehype-katex": "^6.0.3",

src/components/AuthRequired.jsx

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { EthereumContext } from "../data/ethereumProvider";
+import { Navigate, Outlet } from "react-router-dom";
+
+export default function AuthRequired() {
+  const { accounts, chainId } = useContext(EthereumContext);
+  if (accounts[0] === undefined) {
+    return <Navigate to={chainId} replace />;
+  }
+  return <Outlet />;
+}

src/components/RouteRedirect.jsx

@@ -0,0 +1,36 @@
+import { useContext, useEffect } from "react";
+import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
+import { EthereumContext, networkMap } from "../data/ethereumProvider";
+
+export default function RouteRedirect() {
+  const location = useLocation();
+  const params = useParams();
+  const navigate = useNavigate();
+  const { chainId, accounts } = useContext(EthereumContext);
+
+  useEffect(() => {
+    const pathSegments = location.pathname.split("/");
+    pathSegments[1] = chainId;
+
+    let newPath = pathSegments.join("/");
+
+    if (location.pathname.includes("account")) {
+      if (!accounts[0]) {
+        newPath = chainId;
+      } else {
+        pathSegments[3] = accounts[0];
+        newPath = pathSegments.join("/");
+      }
+    }
+
+    if (params.contract && !Object.keys(networkMap[chainId].deployments).includes(params.contract)) {
+      newPath = chainId;
+    }
+
+    if (newPath !== location.pathname) {
+      navigate(newPath, { replace: true });
+    }
+  }, [chainId, accounts[0], location.pathname, params.contract, navigate]);
+
+  return <Outlet />;
+}

src/components/others/bountyModal/index.jsx

@@ -1,15 +1,19 @@
+import { useContext, useState } from "react";
+import { useRevalidator } from "react-router-dom";
+import { constants, utils } from "ethers";
 import * as styles from "./index.module.scss";
+
 import CustomButton from "/src/components/presentational/button";
 import Modal from "../../presentational/modal";
 import LoadingSpinner from "/src/components/presentational/loadingSpinner";
-import { useContext, useState } from "react";
+
 import { EthereumContext } from "/src/data/ethereumProvider";
-import { constants, utils } from "ethers";
 
 export default function BountyModal({ articleStorageAddress, currentBounty, visible, onCancel }) {
   const ethereumContext = useContext(EthereumContext);
   const [amount, setAmount] = useState(0.001);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const revalidator = useRevalidator();
 
   function handleControlChange(e) {
     setAmount(e.target.value);
@@ -24,6 +28,7 @@ export default function BountyModal({ articleStorageAddress, currentBounty, visi
         utils.parseEther(amount.toString())
       );
       onCancel();
+      revalidator.revalidate();
     } catch (error) {
       console.error(error);
     } finally {

src/components/others/buttonConnect/index.jsx

@@ -1,13 +1,11 @@
-import React, {useContext} from "react";
-import {EthereumContext, networkMap} from "../../../data/ethereumProvider";
+import React, { useContext } from "react";
+import { EthereumContext, networkMap } from "../../../data/ethereumProvider";
 import CustomButton from "/src/components/presentational/button";
 
 export default function ButtonConnect() {
-
   return (
     <EthereumContext.Consumer>
       {(ethereumContext) => {
-        console.log(ethereumContext);
         return (
           <CustomButton
             modifiers="small secondary"
@@ -16,17 +14,14 @@ export default function ButtonConnect() {
             onClick={() => {
               if (ethereumContext?.accounts.length < 1) {
                 ethereumContext.requestAccounts().then(() => {
-                    ethereum.request({
-                      method: "wallet_switchEthereumChain",
-                      params: [{chainId: ethereumContext.chainId}]
-                    });
-                  }
-                )
+                  ethereum.request({
+                    method: "wallet_switchEthereumChain",
+                    params: [{ chainId: ethereumContext.chainId }],
+                  });
+                });
               } else {
-                console.log("There is a connected account already.")
+                console.log("There is a connected account already.");
               }
-
-
             }}
           >
             <a
@@ -40,10 +35,10 @@ export default function ButtonConnect() {
               key={ethereumContext?.accounts[0]}
               className="blink"
             >
-              {!ethereumContext?.accounts[0] && ethereumContext?.awaitingUserPermission
-                && "Awaiting User Permission"}
+              {!ethereumContext?.accounts[0] && ethereumContext?.awaitingUserPermission && "Awaiting User Permission"}
               {!ethereumContext?.accounts[0] && !ethereumContext?.awaitingUserPermission && "Connect Account"}
-              {ethereumContext?.accounts[0] && `${ethereumContext?.accounts[0]?.substring(0, 6)}...${ethereumContext?.accounts[0]?.slice(-4)}`}
+              {ethereumContext?.accounts[0] &&
+                `${ethereumContext?.accounts[0]?.substring(0, 6)}...${ethereumContext?.accounts[0]?.slice(-4)}`}
             </a>
           </CustomButton>
         );

src/components/others/buttonSelectNetwork/index.jsx

@@ -1,30 +1,19 @@
 import React, { useContext } from "react";
-import { useNavigate } from "react-router-dom";
 
 import Select from "/src/components/presentational/select";
 import { EthereumContext, networkMap } from "../../../data/ethereumProvider";
 
 export default function ButtonSelectNetwork() {
-  const navigate = useNavigate();
-  const ethereumContext = useContext(EthereumContext);
+  const { chainId, switchAppChain } = useContext(EthereumContext);
 
-  const selectOptions = Object.entries(networkMap).map(([chainId, props], index) => ({
+  const selectOptions = Object.entries(networkMap).map(([chainId, props]) => ({
     value: chainId,
     label: props.shortname,
   }));
 
-  function handleOnChange(chainId) {
-    console.log({ chainId });
-    navigate("/" + chainId + "/");
-    // if (ethereumContext?.isProviderDetected)
-    //   ethereum.request({
-    //     method: "wallet_switchEthereumChain",
-    //     params: [{ chainId }],
-    //   });
-  }
   return (
     <div style={{ marginLeft: "10px" }}>
-      <Select options={selectOptions} placeholder={networkMap[ethereumContext?.chainId]?.shortname} onChange={handleOnChange} />
+      <Select options={selectOptions} placeholder={networkMap[chainId].shortname} onChange={switchAppChain} />
     </div>
   );
 }

src/components/others/evidenceModal/index.jsx

@@ -10,6 +10,7 @@ import addToIPFS from "/src/utils/addToIPFS";
 import notifyWithToast, { MESSAGE_TYPE } from "../../../utils/notifyWithTost";
 
 import UploadIcon from "jsx:/src/assets/upload.svg";
+import { useRevalidator } from "react-router-dom";
 
 const INITIAL_STATE = { title: "", description: "", file: null };
 const IPFS_ENDPOINT = "https://ipfs.kleros.io/add";
@@ -20,6 +21,8 @@ export default function EvidenceModal({ disputeID, visible, onCancel }) {
   const [isDragOver, setIsDragOver] = useState(false);
   const [sumbitSuccess, setSumbitSuccess] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const revalidator = useRevalidator();
+
   useEffect(() => {
     if (sumbitSuccess) {
       setControlsState(INITIAL_STATE);
@@ -91,11 +94,12 @@ export default function EvidenceModal({ disputeID, visible, onCancel }) {
         MESSAGE_TYPE.ipfs
       );
 
-      await ethereumContext.invokeTransaction("submitEvidence", [disputeID, `/ipfs/${ipfsResponse[0].hash}`])
+      await ethereumContext.invokeTransaction("submitEvidence", [disputeID, `/ipfs/${ipfsResponse[0].hash}`]);
 
       setIsSubmitting(false);
       setSumbitSuccess(true);
       onCancel();
+      revalidator.revalidate();
     } catch (err) {
       console.error(err);
       setIsSubmitting(false);

src/components/others/listArticles/index.jsx

@@ -1,138 +1,56 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useContext } from "react";
 import * as styles from "./index.module.scss";
 
 import ListArticlesItem from "/src/components/presentational/listArticlesItem";
+import Pagination from "/src/components/presentational/pagination";
 import Pill from "/src/components/presentational/pill";
 
 import { EthereumContext } from "/src/data/ethereumProvider";
 import getTrustScore from "/src/businessLogic/getTrustScore";
 import getTimePastSinceLastBountyUpdate from "/src/businessLogic/getTimePastSinceLastBountyUpdate";
-import { ipfsGateway } from "/src/utils/addToIPFS";
-import Pagination from "../../presentational/pagination";
 
-const PAGE_SIZE = 8;
+const ITEMS_PER_PAGE = 8;
 
-export default function ListArticles({ articles, isFetching }) {
-  const ethereumContext = useContext(EthereumContext);
-  const [articleContents, setArticleContents] = useState();
-  const [loadingFetchingContents, setFetchingArticlesContents] = useState(true);
+export default function ListArticles({ articles }) {
   const [currentPage, setCurrentPage] = useState(1);
 
-  useEffect(() => {
-    let didCancel = false;
-
-    if (!articles) {
-      setFetchingArticlesContents(false);
-      return;
-    }
-    const fetchArticleData = async () => {
-      try {
-        const fetchPromises = articles
-          .filter((a) => a != null)
-          .map(async (article) => {
-            try {
-              const response = await fetch(ipfsGateway + article?.articleID);
-              if (!response.ok) {
-                throw new Error("Network response was not OK");
-              }
-              const data = await response.json();
-              return {
-                articleID: article.articleID,
-                title: data.title,
-                description: data.description,
-                tags: data.tags,
-                format: data.format
-              };
-            } catch (error) {
-              console.error(error);
-              return null;
-            }
-          });
-
-        const articleData = await Promise.all(fetchPromises);
-        const fetchedArticleContents = articleData.reduce(
-          (prevState, data) => ({
-            ...prevState,
-            [data.articleID]: { title: data.title, description: data.description, tags: data.tags, format: data.format },
-          }),
-          {}
-        );
-
-        if (!didCancel) {
-          setArticleContents(fetchedArticleContents);
-        }
-      } catch (error) {
-        console.error(error);
-      } finally {
-        if (!didCancel) {
-          setFetchingArticlesContents(false);
-        }
-      }
-    };
-
-    fetchArticleData();
-    return () => {
-      didCancel = true;
-    };
-  }, [articles]);
+  const { blockNumber, chainId, graphMetadata } = useContext(EthereumContext);
+  const currentBlockNumber = graphMetadata?.block?.number || blockNumber;
 
+  if (articles.length === 0) return <div>No news articles</div>;
   return (
     <>
       <div className={styles.containerItems}>
-        {articles &&
-          Object.entries(articles.filter((c) => c != null))
-            .sort(([, item1], [, item2]) => sortAccordingToTrustScore(item1, item2, ethereumContext))
-            .slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
-            .map(([_key, value], index) => (
-              <ListArticlesItem
-                key={value?.id}
-                title={
-                  articleContents?.[value?.articleID]?.title ||
-                  (!loadingFetchingContents && `Unable to fetch article data from ${value?.articleID}`)
-                }
-                description={articleContents?.[value?.articleID]?.description}
-                format={articleContents?.[value?.articleID]?.format}
-                linkTo={`/${ethereumContext?.chainId}/${value?.contractAddress}/${value?.id}/`}
-                score={getTrustScore(
-                  value,
-                  getTimePastSinceLastBountyUpdate(
-                    value?.lastBalanceUpdate,
-                    ethereumContext?.graphMetadata?.block?.number || ethereumContext?.blockNumber
-                  )
-                )}
-                createdAt={value?.createdAtTimestamp}
-                excerptSize={index % 2 == 1 ? 3 : 1}
-              >
-                <Pill modifiers="small">{value?.status}</Pill>
+        {articles
+          .sort((item1, item2) => sortAccordingToTrustScore(item1, item2, currentBlockNumber))
+          .slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE)
+          .map((article, index) => {
+            const { id, title, description, contractAddress, status, lastBalanceUpdate } = article;
+            const linkTo = `/${chainId}/${contractAddress}/${id}`;
+            const score = getTrustScore(
+              article,
+              getTimePastSinceLastBountyUpdate(lastBalanceUpdate, currentBlockNumber)
+            );
+            const createdAt = article.createdAtTimestamp;
+            const excerptSize = index % 2 === 1 ? 3 : 1;
+            return (
+              <ListArticlesItem {...{ key: id, title, description, linkTo, score, createdAt, excerptSize }}>
+                <Pill modifiers="small">{status}</Pill>
               </ListArticlesItem>
-            ))}
+            );
+          })}
       </div>
-      {!isFetching &&
-        (articles == null || (articles && articles.filter((a) => a != null).length == 0)) &&
-        "No news articles."}
-      {articles && loadingFetchingContents && "Fetching article details."}
+
       <Pagination
         current={currentPage}
-        pageSize={PAGE_SIZE}
-        total={articles?.length}
+        pageSize={ITEMS_PER_PAGE}
+        total={articles.length}
         onChange={(pageIndex) => setCurrentPage(pageIndex)}
       />
     </>
   );
 }
 
-const sortAccordingToTrustScore = (item1, item2, ethereumContext) =>
-  getTrustScore(
-    item2,
-    getTimePastSinceLastBountyUpdate(
-      item2?.lastBalanceUpdate,
-      ethereumContext?.graphMetadata?.block?.number || ethereumContext?.blockNumber
-    )
-  ) -
-  getTrustScore(
-    item1,
-    getTimePastSinceLastBountyUpdate(
-      item1?.lastBalanceUpdate,
-      ethereumContext?.graphMetadata?.block?.number || ethereumContext?.blockNumber
-    )
-  );
+const sortAccordingToTrustScore = (item1, item2, currentBlockNumber) =>
+  getTrustScore(item2, getTimePastSinceLastBountyUpdate(item2.lastBalanceUpdate, currentBlockNumber)) -
+  getTrustScore(item1, getTimePastSinceLastBountyUpdate(item1.lastBalanceUpdate, currentBlockNumber));