From c2b349b1a17e15f33dcd439e790772ee4cdceaa3 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 23 Apr 2024 15:06:12 +0200 Subject: [PATCH 1/5] fix: ignore-invalid-uri-evidences --- src/bootstrap/dataloader.js | 37 ++++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/src/bootstrap/dataloader.js b/src/bootstrap/dataloader.js index c14571a..c7006b6 100644 --- a/src/bootstrap/dataloader.js +++ b/src/bootstrap/dataloader.js @@ -260,21 +260,32 @@ 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); + return ( + ( + await Promise.all( + evidence.map(async (evidenceItem) => { + let uri; + try { + uri = getHttpUri(evidenceItem.URI); + } catch (e) { + // invalid uri + return null; + } + 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}`); + 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 { + evidenceJSON: fileRes.data, + submittedAt: evidenceItem.creationTime, + submittedBy: evidenceItem.sender, + }; + }) + ) + ) + //filter out the bad URIs (nulls) + .filter((e) => !!e) ); }; From 9709c8590b338332f6d73a00fe82f8207b3a0804 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 23 Apr 2024 17:31:42 +0200 Subject: [PATCH 2/5] feat: handle network errored but valid URIs --- src/bootstrap/dataloader.js | 50 ++++++------ src/components/evidence-card.js | 136 ++++++++++++++++---------------- 2 files changed, 97 insertions(+), 89 deletions(-) diff --git a/src/bootstrap/dataloader.js b/src/bootstrap/dataloader.js index c7006b6..be4eaea 100644 --- a/src/bootstrap/dataloader.js +++ b/src/bootstrap/dataloader.js @@ -261,32 +261,36 @@ const evidenceFetcher = async ([subgraph, disputeId]) => { .then((res) => res.data.data.dispute.evidenceGroup.evidence); return ( - ( - await Promise.all( - evidence.map(async (evidenceItem) => { - let uri; + await Promise.all( + evidence.map(async (evidenceItem) => { + try { + const uri = getHttpUri(evidenceItem.URI); try { - uri = getHttpUri(evidenceItem.URI); - } catch (e) { - // invalid uri - return null; + 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, + }; } - 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 (uriError) { + // invalid uri, returning null to be filtered out + console.error(uriError.message); + return null; + } + }) ) - //filter out the bad URIs (nulls) - .filter((e) => !!e) - ); + ).filter((e) => !!e); // This will filter out the null values (invalid URIs) }; export function useEvidence(chainId, disputeID) { diff --git a/src/components/evidence-card.js b/src/components/evidence-card.js index ed817e6..ad54291 100644 --- a/src/components/evidence-card.js +++ b/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 ( + + Error Loading Evidence + Error: {evidence.error} + + + + Submitted By: {metaEvidence?.aliases?.[evidence.submittedBy] || truncateAddress(evidence.submittedBy)} + {displayDateUTC(submittedAtDate)} + + + + + ); + } return ( - - {evidence.evidenceJSON.title || evidence.evidenceJSON.name} - - } - > + {evidence.evidenceJSON.title || evidence.evidenceJSON.name}}> {evidence.evidenceJSON.description} - Submitted By:{' '} + Submitted By:{" "} - {metaEvidence.aliases && - metaEvidence.aliases[evidence.submittedBy] - ? metaEvidence.aliases[evidence.submittedBy] - : truncateAddress(evidence.submittedBy)} + {metaEvidence?.aliases?.[evidence.submittedBy] || truncateAddress(evidence.submittedBy)} - + {displayDateUTC(submittedAtDate)} - + - ) -} + ); +}; -export default EvidenceCard +export default EvidenceCard; From f270cc490f539476fbf2f298fc5681c89fd22c9c Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 24 Apr 2024 19:07:16 +0200 Subject: [PATCH 3/5] feat: allow popups on iframe --- src/components/case-details-card.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/case-details-card.jsx b/src/components/case-details-card.jsx index 265eb85..02130c0 100644 --- a/src/components/case-details-card.jsx +++ b/src/components/case-details-card.jsx @@ -639,7 +639,7 @@ export default function CaseDetailsCard({ ID }) {