feat(web): use-atlas-spam-api

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<SpamEvidences>({
+    queryKey: [`evidenceSpamQuery`],
+    enabled: isEnabled,
+    staleTime: 60000,
+    queryFn: async () => await request(`${atlasUri}/graphql`, spamEvidenceQuery, variables),
+  });
+};

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<string>();
   const [debouncedSearch, setDebouncedSearch] = useState<string>();
   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 (
     <Container ref={ref}>
       <EvidenceSearch {...{ search, setSearch, evidenceGroup: disputeData?.dispute?.externalDisputeId }} />
       <ScrollButton small Icon={DownArrow} text="Scroll to latest" onClick={scrollToLatest} />
       {evidences?.realEvidences ? (
-        evidences?.realEvidences.map(
-          ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => (
-            <EvidenceCard
-              key={timestamp}
-              index={parseInt(evidenceIndex)}
-              sender={sender?.id}
-              {...{ evidence, timestamp, transactionHash, name, description, fileURI }}
-            />
-          )
-        )
-      ) : (
-        <SkeletonEvidenceCard />
-      )}
-      {evidences?.spamEvidences.length !== 0 ? (
         <>
-          <Divider />
-          {showSpam ? (
-            evidences?.spamEvidences.map(
-              ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => (
-                <EvidenceCard
-                  key={timestamp}
-                  index={parseInt(evidenceIndex)}
-                  sender={sender?.id}
-                  {...{ evidence, timestamp, transactionHash, name, description, fileURI }}
-                />
-              )
+          {evidences?.realEvidences.map(
+            ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => (
+              <EvidenceCard
+                key={timestamp}
+                index={parseInt(evidenceIndex)}
+                sender={sender?.id}
+                {...{ evidence, timestamp, transactionHash, name, description, fileURI }}
+              />
             )
-          ) : (
-            <SpamLabel onClick={() => setShowSpam(true)}>Show likely spam</SpamLabel>
           )}
+          {spamEvidences && evidences?.spamEvidences.length !== 0 ? (
+            <>
+              <Divider />
+              {showSpam ? (
+                <>
+                  <SpamLabel onClick={() => setShowSpam(false)}>Hide spam</SpamLabel>
+                  {evidences?.spamEvidences.map(
+                    ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => (
+                      <EvidenceCard
+                        key={timestamp}
+                        index={parseInt(evidenceIndex)}
+                        sender={sender?.id}
+                        {...{ evidence, timestamp, transactionHash, name, description, fileURI }}
+                      />
+                    )
+                  )}
+                </>
+              ) : (
+                <SpamLabel onClick={() => setShowSpam(true)}>Show likely spam</SpamLabel>
+              )}
+            </>
+          ) : null}
         </>
-      ) : null}
+      ) : (
+        <SkeletonEvidenceCard />
+      )}
+
       {data && data.evidences.length === 0 ? <StyledLabel>There is no evidence submitted yet</StyledLabel> : null}
     </Container>
   );
 };
 
-const isSpam = (id: string) => {
-  return spamEvidencesIds.includes(id);
-};
-
 export default Evidence;