chore(web): use-standard-ipfs-uris

web/netlify/functions/uploadToIPFS.ts

@@ -58,7 +58,7 @@ const pinToFilebase = async (data: FormData, dapp: string, operation: string): P
       const path = `${filename}`;
       const cid = await filebase.storeDirectory([new File([content], path, { type: mimeType })]);
       await emitRabbitMQLog(cid, operation);
-      cids.push(`/ipfs/${cid}/${path}`);
+      cids.push(`ipfs://${cid}/${path}`);
     }
   }
 

web/src/components/DisputePreview/Policies.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
-import { IPFS_GATEWAY } from "consts/index";
 import PolicyIcon from "svgs/icons/policy.svg";
 import { isUndefined } from "utils/index";
 import { responsiveSize } from "styles/responsiveSize";
 import PaperclipIcon from "svgs/icons/paperclip.svg";
+import { getIpfsUrl } from "utils/getIpfsUrl";
 
 const ShadeArea = styled.div`
   display: flex;
@@ -74,13 +74,13 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
       <StyledP>Make sure you read and understand the Policies</StyledP>
       <LinkContainer>
         {!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
-          <StyledA href={`${IPFS_GATEWAY}${attachment.uri}`} target="_blank" rel="noreferrer">
+          <StyledA href={getIpfsUrl(attachment.uri)} target="_blank" rel="noreferrer">
             <StyledPaperclipIcon />
             {attachment.label ?? "Attachment"}
           </StyledA>
         ) : null}
         {isUndefined(disputePolicyURI) ? null : (
-          <StyledA href={`${IPFS_GATEWAY}${disputePolicyURI}`} target="_blank" rel="noreferrer">
+          <StyledA href={getIpfsUrl(disputePolicyURI)} target="_blank" rel="noreferrer">
             <StyledPolicyIcon />
             Dispute Policy
           </StyledA>

web/src/components/EvidenceCard.tsx

@@ -6,8 +6,8 @@ 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";
 import { responsiveSize } from "styles/responsiveSize";
+import { getIpfsUrl } from "utils/getIpfsUrl";
 
 const StyledCard = styled(Card)`
   width: 100%;
@@ -106,7 +106,7 @@ interface IEvidenceCard {
 }
 
 const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
-  const { data } = useIPFSQuery(evidence.at(0) === "/" ? evidence : undefined);
+  const { data } = useIPFSQuery(evidence);
   return (
     <StyledCard>
       <TextContainer>
@@ -126,7 +126,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
           <p>{shortenAddress(sender)}</p>
         </AccountContainer>
         {data && typeof data.fileURI !== "undefined" && (
-          <StyledA href={`${IPFS_GATEWAY}${data.fileURI}`} target="_blank" rel="noreferrer">
+          <StyledA href={getIpfsUrl(data.fileURI)} target="_blank" rel="noreferrer">
             <AttachmentIcon />
             <AttachedFileText />
           </StyledA>

web/src/hooks/useIPFSQuery.ts

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

web/src/pages/DisputeTemplateView.tsx

@@ -1,17 +1,18 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
+import { useDebounce } from "react-use";
+import Skeleton from "react-loading-skeleton";
 import { Field, Textarea } from "@kleros/ui-components-library";
-import PolicyIcon from "svgs/icons/policy.svg";
-import ReactMarkdown from "components/ReactMarkdown";
-import { INVALID_DISPUTE_DATA_ERROR, IPFS_GATEWAY } from "consts/index";
 import { configureSDK } from "@kleros/kleros-sdk/src/sdk";
 import { executeActions } from "@kleros/kleros-sdk/src/dataMappings/executeActions";
 import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate";
 import { Answer, DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
+import PolicyIcon from "svgs/icons/policy.svg";
+import { INVALID_DISPUTE_DATA_ERROR } from "consts/index";
 import { useKlerosCoreAddress } from "hooks/useContractAddress";
-import { alchemyApiKey } from "context/Web3Provider";
-import { useDebounce } from "react-use";
-import Skeleton from "react-loading-skeleton";
+import { getIpfsUrl } from "utils/getIpfsUrl";
+import ReactMarkdown from "components/ReactMarkdown";
+
 
 const Container = styled.div`
   height: auto;
@@ -140,8 +141,6 @@ const DisputeTemplateView = () => {
   useDebounce(() => setDebouncedTemplateUri(templateUri), 350, [templateUri]);
 
   useEffect(() => {
-    configureSDK({ apiKey: alchemyApiKey });
-
     let isFetchDataScheduled = false;
 
     const scheduleFetchData = () => {
@@ -302,7 +301,7 @@ const Overview: React.FC<{ disputeDetails: DisputeDetails | undefined }> = ({ di
           <p>Make sure you read and understand the Policies</p>
           <LinkContainer>
             {disputeDetails?.policyURI && (
-              <StyledA href={`${IPFS_GATEWAY}${disputeDetails.policyURI}`} target="_blank" rel="noreferrer">
+              <StyledA href={getIpfsUrl(disputeDetails?.policyURI)} target="_blank" rel="noreferrer">
                 <PolicyIcon />
                 Dispute Policy
               </StyledA>

web/src/utils/getIpfsUrl.ts

@@ -0,0 +1,13 @@
+import { IPFS_GATEWAY } from "consts/index";
+
+export const getIpfsUrl = (url: string) => {
+  const formatedIPFSPath = getFormattedPath(url);
+  return `${IPFS_GATEWAY}${formatedIPFSPath}`;
+};
+
+export const getFormattedPath = (url: string) => {
+  if (url.startsWith("/ipfs/")) return url;
+  else if (url.startsWith("ipfs/")) return "/" + url;
+  else if (url.startsWith("ipfs://")) return url.replace("ipfs://", "/ipfs/");
+  return url;
+};