refactor(web): using the same IPFS gateway everywhere, configurable

Author: jaybuidl

web/src/components/EvidenceCard.tsx

@@ -5,6 +5,7 @@ import { Card } from "@kleros/ui-components-library";
 import AttachmentIcon from "svgs/icons/attachment.svg";
 import { useIPFSQuery } from "hooks/useIPFSQuery";
 import { shortenAddress } from "utils/shortenAddress";
+import { IPFS_GATEWAY } from "consts/index";
 
 interface IEvidenceCard {
   evidence: string;
@@ -31,7 +32,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
         <Identicon size="24" string={sender} />
         <p>{shortenAddress(sender)}</p>
         {data && typeof data.fileURI !== "undefined" && (
-          <StyledA href={`https://cloudflare-ipfs.com${data.fileURI}`} target="_blank" rel="noreferrer">
+          <StyledA href={`${IPFS_GATEWAY}${data.fileURI}`} target="_blank" rel="noreferrer">
             <AttachmentIcon />
           </StyledA>
         )}

web/src/consts/index.ts

@@ -3,3 +3,5 @@ export const ONE_BASIS_POINT = 10000n;
 export const KLEROS_CONTRACT_ADDRESS = "ethereum:0x93ed3fbe21207ec2e8f2d3c3de6e058cb73bc04d";
 export const WETH_CONTRACT_ADDRESS = "ethereum:0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
 export const PNK_FAUCET_CONTRACT_ADDRESS = "0x05648Ee14941630a649082e0dA5cb80D29cC9002";
+
+export const IPFS_GATEWAY = process.env.REACT_APP_IPFS_GATEWAY || "https://cdn.kleros.link";

web/src/hooks/useIPFSQuery.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { isUndefined } from "utils/index";
+import { IPFS_GATEWAY } from "consts/index";
 
 export const useIPFSQuery = (ipfsPath?: string) => {
   const isEnabled = !isUndefined(ipfsPath);
@@ -10,7 +11,7 @@ export const useIPFSQuery = (ipfsPath?: string) => {
     queryFn: async () => {
       if (isEnabled) {
         const formatedIPFSPath = ipfsPath.startsWith("/") ? ipfsPath : "/" + ipfsPath;
-        return fetch(`https://cdn.kleros.link${formatedIPFSPath}`).then(async (res) => await res.json());
+        return fetch(`${IPFS_GATEWAY}${formatedIPFSPath}`).then(async (res) => await res.json());
       }
       return undefined;
     },

web/src/pages/Cases/CaseDetails/Overview.tsx

@@ -10,6 +10,7 @@ import { useCourtPolicy } from "queries/useCourtPolicy";
 import { useCourtPolicyURI } from "queries/useCourtPolicyURI";
 import { isUndefined } from "utils/index";
 import { Periods } from "consts/periods";
+import { IPFS_GATEWAY } from "consts/index";
 import PolicyIcon from "svgs/icons/policy.svg";
 import DisputeInfo from "components/DisputeCard/DisputeInfo";
 import Verdict from "components/Verdict/index";
@@ -131,17 +132,13 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
         <p>Make sure you understand the Policies</p>
         <LinkContainer>
           {disputeTemplate?.policyURI && (
-            <StyledA href={`https://cloudflare-ipfs.com${disputeTemplate.policyURI}`} target="_blank" rel="noreferrer">
+            <StyledA href={`${IPFS_GATEWAY}${disputeTemplate.policyURI}`} target="_blank" rel="noreferrer">
               <PolicyIcon />
               Dispute Policy
             </StyledA>
           )}
           {courtPolicy && (
-            <StyledA
-              href={`https://cloudflare-ipfs.com${courtPolicyURI?.court?.policy ?? ""}`}
-              target="_blank"
-              rel="noreferrer"
-            >
+            <StyledA href={`${IPFS_GATEWAY}${courtPolicyURI?.court?.policy ?? ""}`} target="_blank" rel="noreferrer">
               <PolicyIcon />
               Court Policy
             </StyledA>

web/src/pages/DisputeTemplateView.tsx

@@ -5,6 +5,7 @@ import { Textarea } from "@kleros/ui-components-library";
 import PolicyIcon from "svgs/icons/policy.svg";
 import ReactMarkdown from "components/ReactMarkdown";
 import { isUndefined } from "utils/index";
+import { IPFS_GATEWAY } from "consts/index";
 
 const Wrapper = styled.div`
   min-height: calc(100vh - 144px);
@@ -138,11 +139,7 @@ const Overview: React.FC<{ disputeTemplate: any }> = ({ disputeTemplate }) => {
           <p>Make sure you understand the Policies</p>
           <LinkContainer>
             {disputeTemplate?.policyURI && (
-              <StyledA
-                href={`https://cloudflare-ipfs.com${disputeTemplate.policyURI}`}
-                target="_blank"
-                rel="noreferrer"
-              >
+              <StyledA href={`${IPFS_GATEWAY}${disputeTemplate.policyURI}`} target="_blank" rel="noreferrer">
                 <PolicyIcon />
                 Dispute Policy
               </StyledA>