diff --git a/web/netlify/functions/uploadToIPFS.ts b/web/netlify/functions/uploadToIPFS.ts index a2ba53c76..26c64bdc1 100644 --- a/web/netlify/functions/uploadToIPFS.ts +++ b/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}`); } } diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx index 8e0155adc..1f59b57d3 100644 --- a/web/src/components/DisputePreview/Policies.tsx +++ b/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 = ({ disputePolicyURI, courtId, attac Make sure you read and understand the Policies {!isUndefined(attachment) && !isUndefined(attachment.uri) ? ( - + {attachment.label ?? "Attachment"} ) : null} {isUndefined(disputePolicyURI) ? null : ( - + Dispute Policy diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index 6c94196f8..c34ee41d0 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/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 = ({ evidence, sender, index }) => { - const { data } = useIPFSQuery(evidence.at(0) === "/" ? evidence : undefined); + const { data } = useIPFSQuery(evidence); return ( @@ -126,7 +126,7 @@ const EvidenceCard: React.FC = ({ evidence, sender, index }) => {

{shortenAddress(sender)}

{data && typeof data.fileURI !== "undefined" && ( - + diff --git a/web/src/hooks/useIPFSQuery.ts b/web/src/hooks/useIPFSQuery.ts index 671667fac..e4716c448 100644 --- a/web/src/hooks/useIPFSQuery.ts +++ b/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; }, diff --git a/web/src/pages/DisputeTemplateView.tsx b/web/src/pages/DisputeTemplateView.tsx index b6d945dc3..02c8cc11c 100644 --- a/web/src/pages/DisputeTemplateView.tsx +++ b/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

Make sure you read and understand the Policies

{disputeDetails?.policyURI && ( - + Dispute Policy diff --git a/web/src/utils/getIpfsUrl.ts b/web/src/utils/getIpfsUrl.ts new file mode 100644 index 000000000..c54a10617 --- /dev/null +++ b/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; +};