diff --git a/web/src/hooks/useSpamEvidence.ts b/web/src/hooks/useSpamEvidence.ts new file mode 100644 index 000000000..8b420001c --- /dev/null +++ b/web/src/hooks/useSpamEvidence.ts @@ -0,0 +1,42 @@ +import { useQuery } from "@tanstack/react-query"; +import { gql, request } from "graphql-request"; + +import { isKlerosNeo, isKlerosUniversity, isTestnetDeployment } from "src/consts"; +import { isUndefined } from "src/utils"; + +const spamEvidenceQuery = gql` + query SpamEvidences($deployment: CourtV2Deployment!, $evidenceGroupId: String!) { + courtv2EvidenceSpamsByGroupId(deployment: $deployment, evidenceGroupId: $evidenceGroupId) { + evidenceIds + } + } +`; + +type SpamEvidences = { + courtv2EvidenceSpamsByGroupId: { evidenceIds: string[] }; +}; + +const getAtlasDeployment = () => { + if (isKlerosUniversity()) { + return "university"; + } else if (isKlerosNeo()) { + return "beta"; + } else if (isTestnetDeployment()) { + return "testnet"; + } else { + return "devnet"; + } +}; +const atlasUri = import.meta.env.REACT_APP_ATLAS_URI; + +export const useSpamEvidence = (evidenceGroupId: string) => { + const isEnabled = !isUndefined(atlasUri) && !isUndefined(evidenceGroupId); + + const variables = { deployment: getAtlasDeployment(), evidenceGroupId }; + return useQuery({ + queryKey: [`evidenceSpamQuery`], + enabled: isEnabled, + staleTime: 60000, + queryFn: async () => await request(`${atlasUri}/graphql`, spamEvidenceQuery, variables), + }); +}; diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index e27947f27..0a8adde07 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -8,18 +8,18 @@ import { Button } from "@kleros/ui-components-library"; import DownArrow from "svgs/icons/arrow-down.svg"; -import { spamEvidencesIds } from "consts/index"; +import { useSpamEvidence } from "hooks/useSpamEvidence"; import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { useEvidences } from "queries/useEvidences"; import { landscapeStyle } from "styles/landscapeStyle"; +import { Divider } from "components/Divider"; import EvidenceCard from "components/EvidenceCard"; import { SkeletonEvidenceCard } from "components/StyledSkeleton"; import EvidenceSearch from "./EvidenceSearch"; -import { Divider } from "components/Divider"; const Container = styled.div` width: 100%; @@ -85,6 +85,7 @@ const Evidence: React.FC = () => { const [search, setSearch] = useState(); const [debouncedSearch, setDebouncedSearch] = useState(); const [showSpam, setShowSpam] = useState(false); + const { data: spamEvidences } = useSpamEvidence(disputeData?.dispute?.externalDisputeId?.toString()); const { data } = useEvidences(disputeData?.dispute?.externalDisputeId?.toString(), debouncedSearch); @@ -99,57 +100,66 @@ const Evidence: React.FC = () => { latestEvidence.scrollIntoView({ behavior: "smooth" }); }, [ref]); + const isSpam = useCallback( + (evidenceId: string) => { + return Boolean(spamEvidences?.courtv2EvidenceSpamsByGroupId.evidenceIds?.includes(evidenceId)); + }, + [spamEvidences] + ); + 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]); + }, [data, isSpam]); return ( {evidences?.realEvidences ? ( - evidences?.realEvidences.map( - ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => ( - - ) - ) - ) : ( - - )} - {evidences?.spamEvidences.length !== 0 ? ( <> - - {showSpam ? ( - evidences?.spamEvidences.map( - ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => ( - - ) + {evidences?.realEvidences.map( + ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => ( + ) - ) : ( - setShowSpam(true)}>Show likely spam )} + {spamEvidences && evidences?.spamEvidences.length !== 0 ? ( + <> + + {showSpam ? ( + <> + setShowSpam(false)}>Hide spam + {evidences?.spamEvidences.map( + ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => ( + + ) + )} + + ) : ( + setShowSpam(true)}>Show likely spam + )} + + ) : null} - ) : null} + ) : ( + + )} + {data && data.evidences.length === 0 ? There is no evidence submitted yet : null} ); }; -const isSpam = (id: string) => { - return spamEvidencesIds.includes(id); -}; - export default Evidence;