From 15430c73ab735a058a5c67a13d9c59c2a7d81a83 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Fri, 13 Dec 2024 16:06:56 +0530 Subject: [PATCH 1/3] feat(web): use-atlas-spam-api --- web/src/hooks/useSpamEvidence.ts | 44 +++++++++++++++++++ .../Cases/CaseDetails/Evidence/index.tsx | 30 ++++++++++--- web/tsconfig.json | 3 +- 3 files changed, 69 insertions(+), 8 deletions(-) create mode 100644 web/src/hooks/useSpamEvidence.ts diff --git a/web/src/hooks/useSpamEvidence.ts b/web/src/hooks/useSpamEvidence.ts new file mode 100644 index 000000000..93f80d6b3 --- /dev/null +++ b/web/src/hooks/useSpamEvidence.ts @@ -0,0 +1,44 @@ +import { useQuery } from "@tanstack/react-query"; +import { request } from "graphql-request"; + +import { isKlerosNeo, isKlerosUniversity, isTestnetDeployment } from "src/consts"; +import { graphql } from "src/graphql"; +import { isUndefined } from "src/utils"; + +const spamEvidenceQuery = graphql(` + query SpamEvidences($deployment: CourtV2Deployment!) { + courtv2EvidenceSpamsByDeployment(deployment: $deployment) { + disputeEvidenceIndex + dispute + } + } +`); + +type SpamEvidences = { + courtv2EvidenceSpamsByDeployment: { disputeEvidenceIndex: string; dispute: 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 = () => { + const isEnabled = !isUndefined(atlasUri); + + const variables = { deployment: getAtlasDeployment() }; + 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 40f32dc4f..870e1888d 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -8,17 +8,18 @@ import { Button } from "@kleros/ui-components-library"; import DownArrow from "svgs/icons/arrow-down.svg"; +import { useSpamEvidence } from "hooks/useSpamEvidence"; + import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { useEvidences } from "queries/useEvidences"; import { responsiveSize } from "styles/responsiveSize"; +import { Divider } from "components/Divider"; 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%; @@ -79,6 +80,7 @@ const Evidence: React.FC = () => { const [search, setSearch] = useState(); const [debouncedSearch, setDebouncedSearch] = useState(); const [showSpam, setShowSpam] = useState(false); + const { data: spamEvidences } = useSpamEvidence(); const { data } = useEvidences(disputeData?.dispute?.externalDisputeId?.toString(), debouncedSearch); @@ -93,12 +95,30 @@ const Evidence: React.FC = () => { latestEvidence.scrollIntoView({ behavior: "smooth" }); }, [ref]); + const flattenedSpamEvidences = useMemo( + () => + spamEvidences?.courtv2EvidenceSpamsByDeployment.reduce((acc, current) => { + if (current.dispute === id) { + return [...acc, current.disputeEvidenceIndex]; + } + return acc; + }, []), + [id, spamEvidences] + ); + + const isSpam = useCallback( + (evidenceId: string) => { + return Boolean(flattenedSpamEvidences?.includes(evidenceId)); + }, + [flattenedSpamEvidences] + ); + 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 ( @@ -142,8 +162,4 @@ const Evidence: React.FC = () => { ); }; -const isSpam = (id: string) => { - return spamEvidencesIds.includes(id); -}; - export default Evidence; diff --git a/web/tsconfig.json b/web/tsconfig.json index 8b8b98b97..e4683ef39 100644 --- a/web/tsconfig.json +++ b/web/tsconfig.json @@ -67,7 +67,8 @@ "resolveJsonModule": true, "target": "ES2020", "lib": [ - "ESNext.Array" + "ESNext.Array", + "dom" ], "types": [ "vite/client", From 01be41e8266b37b710087f44c3825ccdcef3e4ad Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Fri, 13 Dec 2024 16:12:25 +0530 Subject: [PATCH 2/3] chore: rabbit-feedback --- web/src/pages/Cases/CaseDetails/Evidence/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index 870e1888d..9a433d754 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -99,7 +99,8 @@ const Evidence: React.FC = () => { () => spamEvidences?.courtv2EvidenceSpamsByDeployment.reduce((acc, current) => { if (current.dispute === id) { - return [...acc, current.disputeEvidenceIndex]; + acc.push(current.disputeEvidenceIndex); + return acc; } return acc; }, []), From de7fdd2a6bb52ae91e403249ddc1d6cc5569d2e4 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Thu, 23 Jan 2025 16:26:54 +0530 Subject: [PATCH 3/3] refactor(web): update-spam-api-call --- web/src/hooks/useSpamEvidence.ts | 22 +++-- .../Cases/CaseDetails/Evidence/index.tsx | 80 +++++++++---------- 2 files changed, 47 insertions(+), 55 deletions(-) diff --git a/web/src/hooks/useSpamEvidence.ts b/web/src/hooks/useSpamEvidence.ts index 93f80d6b3..8b420001c 100644 --- a/web/src/hooks/useSpamEvidence.ts +++ b/web/src/hooks/useSpamEvidence.ts @@ -1,21 +1,19 @@ import { useQuery } from "@tanstack/react-query"; -import { request } from "graphql-request"; +import { gql, request } from "graphql-request"; import { isKlerosNeo, isKlerosUniversity, isTestnetDeployment } from "src/consts"; -import { graphql } from "src/graphql"; import { isUndefined } from "src/utils"; -const spamEvidenceQuery = graphql(` - query SpamEvidences($deployment: CourtV2Deployment!) { - courtv2EvidenceSpamsByDeployment(deployment: $deployment) { - disputeEvidenceIndex - dispute +const spamEvidenceQuery = gql` + query SpamEvidences($deployment: CourtV2Deployment!, $evidenceGroupId: String!) { + courtv2EvidenceSpamsByGroupId(deployment: $deployment, evidenceGroupId: $evidenceGroupId) { + evidenceIds } } -`); +`; type SpamEvidences = { - courtv2EvidenceSpamsByDeployment: { disputeEvidenceIndex: string; dispute: string }[]; + courtv2EvidenceSpamsByGroupId: { evidenceIds: string[] }; }; const getAtlasDeployment = () => { @@ -31,10 +29,10 @@ const getAtlasDeployment = () => { }; const atlasUri = import.meta.env.REACT_APP_ATLAS_URI; -export const useSpamEvidence = () => { - const isEnabled = !isUndefined(atlasUri); +export const useSpamEvidence = (evidenceGroupId: string) => { + const isEnabled = !isUndefined(atlasUri) && !isUndefined(evidenceGroupId); - const variables = { deployment: getAtlasDeployment() }; + const variables = { deployment: getAtlasDeployment(), evidenceGroupId }; return useQuery({ queryKey: [`evidenceSpamQuery`], enabled: isEnabled, diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index 76bbce32e..0a8adde07 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -85,7 +85,7 @@ const Evidence: React.FC = () => { const [search, setSearch] = useState(); const [debouncedSearch, setDebouncedSearch] = useState(); const [showSpam, setShowSpam] = useState(false); - const { data: spamEvidences } = useSpamEvidence(); + const { data: spamEvidences } = useSpamEvidence(disputeData?.dispute?.externalDisputeId?.toString()); const { data } = useEvidences(disputeData?.dispute?.externalDisputeId?.toString(), debouncedSearch); @@ -100,23 +100,11 @@ const Evidence: React.FC = () => { latestEvidence.scrollIntoView({ behavior: "smooth" }); }, [ref]); - const flattenedSpamEvidences = useMemo( - () => - spamEvidences?.courtv2EvidenceSpamsByDeployment.reduce((acc, current) => { - if (current.dispute === id) { - acc.push(current.disputeEvidenceIndex); - return acc; - } - return acc; - }, []), - [id, spamEvidences] - ); - const isSpam = useCallback( (evidenceId: string) => { - return Boolean(flattenedSpamEvidences?.includes(evidenceId)); + return Boolean(spamEvidences?.courtv2EvidenceSpamsByGroupId.evidenceIds?.includes(evidenceId)); }, - [flattenedSpamEvidences] + [spamEvidences] ); const evidences = useMemo(() => { @@ -131,38 +119,44 @@ const Evidence: React.FC = () => { {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} );