fix: ignore-invalid-uri-evidences

src/bootstrap/dataloader.js

@@ -260,22 +260,37 @@ const evidenceFetcher = async ([subgraph, disputeId]) => {
     )
     .then((res) => res.data.data.dispute.evidenceGroup.evidence);
 
-  return await Promise.all(
-    evidence.map(async (evidenceItem) => {
-      const uri = getHttpUri(evidenceItem.URI);
-
-      const fileRes = await axios.get(uri);
-
-      if (fileRes.status !== 200)
-        throw new Error(`HTTP Error: Unable to fetch file at ${uri}. Returned status code ${fileRes.status}`);
-
-      return {
-        evidenceJSON: fileRes.data,
-        submittedAt: evidenceItem.creationTime,
-        submittedBy: evidenceItem.sender,
-      };
-    })
-  );
+  return (
+    await Promise.all(
+      evidence.map(async (evidenceItem) => {
+        try {
+          const uri = getHttpUri(evidenceItem.URI);
+          try {
+            const fileRes = await axios.get(uri);
+            if (fileRes.status !== 200)
+              throw new Error(`HTTP Error: Unable to fetch file at ${uri}. Returned status code ${fileRes.status}`);
+
+            return {
+              evidenceJSON: fileRes.data,
+              submittedAt: evidenceItem.creationTime,
+              submittedBy: evidenceItem.sender,
+            };
+          } catch (requestError) {
+            // URI is correct, but the request failed
+            return {
+              error: requestError.message,
+              submittedAt: evidenceItem.creationTime,
+              submittedBy: evidenceItem.sender,
+            };
+          }
+        } catch (uriError) {
+          // invalid uri, returning null to be filtered out
+          console.error(uriError.message);
+          return null;
+        }
+      })
+    )
+  ).filter((e) => !!e); // This will filter out the null values (invalid URIs)
 };
 
 export function useEvidence(chainId, disputeID) {

src/components/evidence-card.js

@@ -1,8 +1,8 @@
-import { Card, Col, Row } from 'antd'
-import React from 'react'
-import styled from 'styled-components'
-import { getAddressUrl, getTransactionUrl } from '../helpers/block-explorer'
-import Attachment from './attachment'
+import { Card, Col, Row } from "antd";
+import React from "react";
+import styled from "styled-components";
+import { getAddressUrl, getTransactionUrl } from "../helpers/block-explorer";
+import Attachment from "./attachment";
 
 const StyledCard = styled(Card)`
   background: #ffffff;
@@ -12,13 +12,15 @@ const StyledCard = styled(Card)`
   > .ant-card-body {
     padding-top: 12px !important;
   }
-`
+`;
+
 const StyledTitle = styled.div`
   color: #4d00b4;
   font-size: 18px;
   font-weight: 500;
   line-height: 21px;
-`
+`;
+
 const StyledDescription = styled.div`
   color: #000000;
   font-size: 14px;
@@ -30,7 +32,8 @@ const StyledDescription = styled.div`
   white-space: -pre-wrap; /* Opera 4-6 */
   white-space: -o-pre-wrap; /* Opera 7 */
   word-wrap: break-word; /* Internet Explorer 5.5+ */
-`
+`;
+
 const StyledFooter = styled.div`
   background: #f5f1fd;
   margin: 0 -46px -23px -46px;
@@ -39,94 +42,95 @@ const StyledFooter = styled.div`
   @media (max-width: 767px) {
     margin: 0 -23px -23px -23px;
   }
-`
+`;
+
 const StyledFooterBody = styled.div`
   padding: 13px 46px 23px;
-`
+`;
+
 const StyledSubmitter = styled.div`
   color: #4d00b4;
   font-size: 14px;
   font-weight: 500;
-`
+`;
+
 const StyledTime = styled.div`
   font-weight: 400;
-`
-
-const truncateAddress = address =>
-  `${address.substring(0, 6)}...${address.substring(
-    address.length - 4,
-    address.length
-  )}`
-
-const months = [
-  'Jan',
-  'Feb',
-  'Mar',
-  'Apr',
-  'May',
-  'June',
-  'July',
-  'Aug',
-  'Sept',
-  'Oct',
-  'Nov',
-  'Dec'
-]
-
-export const displayDateUTC = dateString => {
-  const _date = new Date(dateString)
-
-  const date = String(_date.getUTCDate()).replace(/\b(\d{1})\b/g, '0$1')
-  const month = _date.getUTCMonth()
-  const year = _date.getUTCFullYear()
-  const hours = String(_date.getUTCHours()).replace(/\b(\d{1})\b/g, '0$1')
-  const minutes = String(_date.getUTCMinutes()).replace(/\b(\d{1})\b/g, '0$1')
-
-  return `${date} ${months[month]} ${year} ${hours}:${minutes} UTC`
-}
+`;
+
+const ErrorStyledCard = styled(StyledCard)`
+  background: #fff3cd;
+  border-color: #ffeeba;
+`;
+
+const truncateAddress = (address) =>
+  `${address.substring(0, 6)}...${address.substring(address.length - 4, address.length)}`;
+
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
+
+export const displayDateUTC = (dateString) => {
+  const _date = new Date(dateString);
+
+  const date = String(_date.getUTCDate()).replace(/\b(\d{1})\b/g, "0$1");
+  const month = _date.getUTCMonth();
+  const year = _date.getUTCFullYear();
+  const hours = String(_date.getUTCHours()).replace(/\b(\d{1})\b/g, "0$1");
+  const minutes = String(_date.getUTCMinutes()).replace(/\b(\d{1})\b/g, "0$1");
+
+  return `${date} ${months[month]} ${year} ${hours}:${minutes} UTC`;
+};
 
 const EvidenceCard = ({ evidence, metaEvidence, chainId }) => {
-  const submittedAtDate = new Date(evidence.submittedAt * 1000)
+  const submittedAtDate = new Date(evidence.submittedAt * 1000);
+
+  if (evidence.error) {
+    return (
+      <ErrorStyledCard>
+        <StyledTitle>Error Loading Evidence</StyledTitle>
+        <StyledDescription>Error: {evidence.error}</StyledDescription>
+        <StyledFooter>
+          <StyledFooterBody>
+            <StyledSubmitter>
+              Submitted By: {metaEvidence?.aliases?.[evidence.submittedBy] || truncateAddress(evidence.submittedBy)}
+              <StyledTime>{displayDateUTC(submittedAtDate)}</StyledTime>
+            </StyledSubmitter>
+          </StyledFooterBody>
+        </StyledFooter>
+      </ErrorStyledCard>
+    );
+  }
 
   return (
-    <StyledCard
-      title={
-        <StyledTitle>
-          {evidence.evidenceJSON.title || evidence.evidenceJSON.name}
-        </StyledTitle>
-      }
-    >
+    <StyledCard title={<StyledTitle>{evidence.evidenceJSON.title || evidence.evidenceJSON.name}</StyledTitle>}>
       <StyledDescription>{evidence.evidenceJSON.description}</StyledDescription>
       <StyledFooter>
         <StyledFooterBody>
           <Row>
             <Col lg={23}>
               <StyledSubmitter>
-                Submitted By:{' '}
+                Submitted By:{" "}
                 <a href={getAddressUrl(chainId, evidence.submittedBy)} rel="noopener noreferrer" target="_blank">
-                  {metaEvidence.aliases &&
-                  metaEvidence.aliases[evidence.submittedBy]
-                    ? metaEvidence.aliases[evidence.submittedBy]
-                    : truncateAddress(evidence.submittedBy)}
+                  {metaEvidence?.aliases?.[evidence.submittedBy] || truncateAddress(evidence.submittedBy)}
                 </a>
                 <StyledTime>
-                  <a href={getTransactionUrl(chainId, evidence.transactionHash)} rel="noopener noreferrer" target="_blank">
+                  <a
+                    href={getTransactionUrl(chainId, evidence.transactionHash)}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
                     {displayDateUTC(submittedAtDate)}
                   </a>
                 </StyledTime>
               </StyledSubmitter>
             </Col>
             <Col lg={1}>
-              <Attachment
-                URI={evidence.evidenceJSON.fileURI}
-                extension={evidence.evidenceJSON.fileTypeExtension}
-              />
+              <Attachment URI={evidence.evidenceJSON.fileURI} extension={evidence.evidenceJSON.fileTypeExtension} />
             </Col>
           </Row>
         </StyledFooterBody>
       </StyledFooter>
     </StyledCard>
-  )
-}
+  );
+};
 
-export default EvidenceCard
+export default EvidenceCard;