diff --git a/web/.env.devnet.public b/web/.env.devnet.public index fcd51045e..14a2be637 100644 --- a/web/.env.devnet.public +++ b/web/.env.devnet.public @@ -7,5 +7,6 @@ export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598 export REACT_APP_ATLAS_URI=http://localhost:3000 export REACT_APP_DEVTOOLS_URL=https://dev--kleros-v2-testnet-devtools.netlify.app export NODE_OPTIONS='--max-old-space-size=7680' +export REACT_APP_SPAM_EVIDENCES_IDS="0-2,3-1" # devtools export REACT_APP_GRAPH_API_KEY= diff --git a/web/src/consts/index.ts b/web/src/consts/index.ts index d96671b47..0afe42514 100644 --- a/web/src/consts/index.ts +++ b/web/src/consts/index.ts @@ -42,3 +42,5 @@ export const genesisBlock = () => (isProductionDeployment() ? GENESIS_BLOCK_ARBM export const INVALID_DISPUTE_DATA_ERROR = `The dispute data is not valid, please vote "Refuse to arbitrate"`; export const RPC_ERROR = `RPC Error: Unable to fetch dispute data. Please avoid voting.`; + +export const spamEvidencesIds: string[] = (import.meta.env.REACT_APP_SPAM_EVIDENCES_IDS ?? "").split(","); diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index 361936cd4..f4fc1955a 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useRef, useState } from "react"; +import React, { useCallback, useMemo, useRef, useState } from "react"; import styled from "styled-components"; import { useParams } from "react-router-dom"; @@ -17,6 +17,8 @@ import EvidenceCard from "components/EvidenceCard"; import { SkeletonEvidenceCard } from "components/StyledSkeleton"; import EvidenceSearch from "./EvidenceSearch"; +import { Divider } from "components/Divider"; +import { spamEvidencesIds } from "src/consts"; const Container = styled.div` width: 100%; @@ -54,12 +56,19 @@ const ScrollButton = styled(Button)` } `; +const SpamLabel = styled.label` + color: ${({ theme }) => theme.primaryBlue}; + align-self: center; + cursor: pointer; +`; + const Evidence: React.FC = () => { const { id } = useParams(); const { data: disputeData } = useDisputeDetailsQuery(id); const ref = useRef(null); const [search, setSearch] = useState(); const [debouncedSearch, setDebouncedSearch] = useState(); + const [showSpam, setShowSpam] = useState(false); const { data } = useEvidences(disputeData?.dispute?.externalDisputeId?.toString(), debouncedSearch); @@ -74,12 +83,19 @@ const Evidence: React.FC = () => { latestEvidence.scrollIntoView({ behavior: "smooth" }); }, [ref]); + const evidences = useMemo(() => { + if (!data?.evidences) return; + const spamEvidences = data.evidences.filter((evidence) => isSpam(evidence.id)); + const realEvidences = data.evidences.filter((evidence) => !isSpam(evidence.id)); + return { realEvidences, spamEvidences }; + }, [data]); + return ( - {data ? ( - data.evidences.map(({ evidence, sender, timestamp, name, description, fileURI, evidenceIndex }) => ( + {evidences?.realEvidences ? ( + evidences?.realEvidences.map(({ evidence, sender, timestamp, name, description, fileURI, evidenceIndex }) => ( { ) : ( )} + {evidences?.spamEvidences.length !== 0 ? ( + <> + + {showSpam ? ( + evidences?.spamEvidences.map( + ({ evidence, sender, timestamp, name, description, fileURI, evidenceIndex }) => ( + + ) + ) + ) : ( + setShowSpam(true)}>Show likely spam + )} + + ) : null} {data && data.evidences.length === 0 ? There is no evidence submitted yet : null} ); }; +const isSpam = (id: string) => { + return spamEvidencesIds.includes(id); +}; + export default Evidence;