Merge branch 'dev' into fix/stake-simulator

Author: tractorss

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=

web/src/consts/index.ts

@@ -43,3 +43,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(",");

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<HTMLDivElement>(null);
   const [search, setSearch] = useState<string>();
   const [debouncedSearch, setDebouncedSearch] = useState<string>();
+  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 (
     <Container ref={ref}>
       <EvidenceSearch {...{ search, setSearch, evidenceGroup: disputeData?.dispute?.externalDisputeId }} />
       <ScrollButton small Icon={DownArrow} text="Scroll to latest" onClick={scrollToLatest} />
-      {data ? (
-        data.evidences.map(({ evidence, sender, timestamp, name, description, fileURI, evidenceIndex }) => (
+      {evidences?.realEvidences ? (
+        evidences?.realEvidences.map(({ evidence, sender, timestamp, name, description, fileURI, evidenceIndex }) => (
           <EvidenceCard
             key={timestamp}
             index={parseInt(evidenceIndex)}
@@ -90,9 +106,32 @@ const Evidence: React.FC = () => {
       ) : (
         <SkeletonEvidenceCard />
       )}
+      {evidences?.spamEvidences.length !== 0 ? (
+        <>
+          <Divider />
+          {showSpam ? (
+            evidences?.spamEvidences.map(
+              ({ evidence, sender, timestamp, name, description, fileURI, evidenceIndex }) => (
+                <EvidenceCard
+                  key={timestamp}
+                  index={parseInt(evidenceIndex)}
+                  sender={sender?.id}
+                  {...{ evidence, timestamp, name, description, fileURI }}
+                />
+              )
+            )
+          ) : (
+            <SpamLabel onClick={() => setShowSpam(true)}>Show likely spam</SpamLabel>
+          )}
+        </>
+      ) : null}
       {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;

web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx

@@ -22,13 +22,24 @@ import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 
 import { EnsureChain } from "components/EnsureChain";
+import styled from "styled-components";
 
 export enum ActionType {
   allowance = "allowance",
   stake = "stake",
   withdraw = "withdraw",
 }
 
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+`;
+
+const ErrorLabel = styled.label`
+  color: ${({ theme }) => theme.error};
+`;
+
 interface IActionButton {
   isSending: boolean;
   parsedAmount: bigint;
@@ -142,20 +153,23 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   const { text, checkDisabled, onClick } = buttonProps[isAllowance ? ActionType.allowance : action];
   return (
     <EnsureChain>
-      <Button
-        text={text}
-        isLoading={isSending}
-        disabled={
-          isSending ||
-          parsedAmount == 0n ||
-          isUndefined(targetStake) ||
-          isUndefined(courtDetails) ||
-          checkDisabled() ||
-          (targetStake !== 0n && targetStake < BigInt(courtDetails.court?.minStake)) ||
-          (isStaking && !isAllowance && isUndefined(setStakeConfig))
-        }
-        onClick={onClick}
-      />
+      <Container>
+        <Button
+          text={text}
+          isLoading={isSending}
+          disabled={
+            isSending ||
+            parsedAmount == 0n ||
+            isUndefined(targetStake) ||
+            isUndefined(courtDetails) ||
+            checkDisabled() ||
+            (targetStake !== 0n && targetStake < BigInt(courtDetails.court?.minStake)) ||
+            (isStaking && !isAllowance && isUndefined(setStakeConfig))
+          }
+          onClick={onClick}
+        />
+        {setStakeError && <ErrorLabel> {setStakeError.message}</ErrorLabel>}
+      </Container>
     </EnsureChain>
   );
 };