Replace dead ipfs.kleros.io gateway and add fetch resilience to article loading

.gitignore

@@ -106,4 +106,5 @@ dist
 
 .idea/
 
-notes-to-self.md
+notes-to-self.md
+package-lock.json

src/hooks/usePolicy.js

@@ -1,16 +1,16 @@
 import { useEffect, useState } from "react";
-import { ipfsGateway } from "/src/utils/addToIPFS";
+import fetchIPFSJson from "/src/utils/fetchIPFSJson";
 
 export default function usePolicy(policyURI) {
-    const [policy, setPolicy] = useState('');
+  const [policy, setPolicy] = useState({});
 
-    useEffect(() => {
-        async function fetchPolicy() {
-            if (!policyURI) return;
-            const response = await fetch(ipfsGateway + policyURI);
-            setPolicy(await response.json());
-        }
-        fetchPolicy()
-    }, [policyURI])
-    return policy;
-}
+  useEffect(() => {
+    async function fetchPolicy() {
+      setPolicy(await fetchIPFSJson(policyURI));
+    }
+
+    fetchPolicy();
+  }, [policyURI]);
+
+  return policy;
+}

src/routes/article/index.jsx

@@ -5,7 +5,7 @@ import * as styles from "./index.module.scss";
 import { formatTime, getTimeLeft } from "/src/hooks/useCountdown";
 
 import { EthereumContext, getArticleByID, getDefaultNetwork, networkMap } from "/src/data/ethereumProvider";
-import { ipfsGateway } from "/src/utils/addToIPFS";
+import fetchIPFSJson from "/src/utils/fetchIPFSJson";
 
 import CustomButton from "/src/components/presentational/button";
 import EventLog from "/src/components/others/eventLog";
@@ -22,14 +22,7 @@ export async function loader({ params }) {
   if (!networkMap[params.chain]?.deployments?.[params.contract]) return redirect(`/${defaultChain}`);
 
   const article = await getArticleByID(params.chain, params.contract, params.id);
-  let articleContent = {};
-  try {
-    const response = await fetch(ipfsGateway + article.articleID);
-    if (!response.ok) throw new Error("Network response was not OK");
-    articleContent = await response.json();
-  } catch (error) {
-    throw new Error(error.message);
-  }
+  const articleContent = await fetchIPFSJson(article.articleID);
   return { article, articleContent };
 }
 

src/routes/court/index.jsx

@@ -2,7 +2,7 @@ import { redirect, useLoaderData } from "react-router-dom";
 import * as styles from "./index.module.scss";
 
 import { getCourtById, getDefaultNetwork, networkMap } from "/src/data/ethereumProvider";
-import { ipfsGateway } from "/src/utils/addToIPFS";
+import fetchIPFSJson from "/src/utils/fetchIPFSJson";
 
 const PERIODS = ["Evidence", "Vote", "Appeal", "Execution"];
 
@@ -11,7 +11,7 @@ export async function loader({ params }) {
   if (!networkMap[chain]?.deployments?.[contract]) return redirect(`/${getDefaultNetwork()}`);
 
   const court = await getCourtById(chain, contract, id);
-  court.policy = await (await fetch(ipfsGateway + court.policyURI)).json();
+  court.policy = await fetchIPFSJson(court.policyURI);
   return court;
 }
 

src/utils/addToIPFS.js

@@ -20,4 +20,4 @@ export default async function addToIPFS(endpoint, fileName, data) {
   })
 }
 
-export const ipfsGateway = 'https://ipfs.kleros.io'
+export const ipfsGateway = 'https://cdn.kleros.link'

src/utils/fetchIPFSJson.js

@@ -0,0 +1,15 @@
+import { ipfsGateway } from "/src/utils/addToIPFS";
+
+export default async function fetchIPFSJson(uri) {
+  if (!uri) return {};
+
+  try {
+    const response = await fetch(ipfsGateway + uri);
+    if (!response.ok) throw new Error("Network response was not OK");
+
+    return await response.json();
+  } catch (error) {
+    console.error(error);
+    return {};
+  }
+}

src/utils/populateArticleContents.js

@@ -1,23 +1,16 @@
-import { ipfsGateway } from "/src/utils/addToIPFS";
+import fetchIPFSJson from "/src/utils/fetchIPFSJson";
 
 export default async function populateArticleContents(articles) {
-    const fetchPromises = articles.map(async (article) => {
-        if (!article) return null;
-        try {
-            const response = await fetch(ipfsGateway + article?.articleID);
-            if (!response.ok) {
-                throw new Error("Network response was not OK");
-            }
-            const { title, description, format } = await response.json();
-            article.title = title;
-            article.description = description;
-            article.format = format;
-        } catch (error) {
-            console.error(error);
-            throw new Error(error.message);
-        }
-    });
+  const fetchPromises = articles.map(async (article) => {
+    if (!article) return null;
 
-    await Promise.all(fetchPromises);
-    return articles;
-}
+    const { title, description, format } = await fetchIPFSJson(article?.articleID);
+    article.title = title;
+    article.description = description;
+    article.format = format;
+    return article;
+  });
+
+  const results = await Promise.all(fetchPromises);
+  return results.filter(Boolean);
+}