feat(web): naive-arbitrable-side-evidence-display

Author: tractorss

web/src/components/EvidenceCard.tsx

@@ -11,7 +11,7 @@ import { formatDate } from "utils/date";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 
 import { type Evidence } from "src/graphql/graphql";
-import { getTxnExplorerLink } from "src/utils";
+import { getTxnExplorerLink, isUndefined } from "src/utils";
 
 import { hoverShortTransitionTiming } from "styles/commonStyles";
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -186,9 +186,9 @@ const AttachedFileText: React.FC = () => (
 );
 
 interface IEvidenceCard extends Pick<Evidence, "evidence" | "timestamp" | "name" | "description" | "fileURI"> {
-  sender: string;
-  index: number;
-  transactionHash: string;
+  sender?: string;
+  index?: number;
+  transactionHash?: string;
 }
 
 const EvidenceCard: React.FC<IEvidenceCard> = ({
@@ -212,7 +212,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
     <StyledCard>
       <TopContent dir="auto">
         <IndexAndName>
-          <Index>#{index}. </Index>
+          {isUndefined(index) ? null : <Index>#{index}. </Index>}
           <h3>{name}</h3>
         </IndexAndName>
         {name && description ? (
@@ -227,12 +227,16 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
       </TopContent>
       <BottomShade>
         <BottomLeftContent>
-          <StyledJurorInternalLink to={profileLink}>
-            <JurorTitle address={sender} />
-          </StyledJurorInternalLink>
-          <StyledExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
-            <label>{formatDate(Number(timestamp), true)}</label>
-          </StyledExternalLink>
+          {isUndefined(sender) ? null : (
+            <StyledJurorInternalLink to={profileLink}>
+              <JurorTitle address={sender} />
+            </StyledJurorInternalLink>
+          )}
+          {isUndefined(timestamp) || isUndefined(transactionExplorerLink) ? null : (
+            <StyledExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
+              <label>{formatDate(Number(timestamp), true)}</label>
+            </StyledExternalLink>
+          )}
         </BottomLeftContent>
         {fileURI && fileURI !== "-" ? (
           <FileLinkContainer>

web/src/pages/Cases/CaseDetails/Evidence/index.tsx

@@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
 
 import { useParams } from "react-router-dom";
 import { useDebounce } from "react-use";
+import { Address } from "viem";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -11,6 +12,9 @@ import DownArrow from "svgs/icons/arrow-down.svg";
 import { useSpamEvidence } from "hooks/useSpamEvidence";
 
 import { useEvidences } from "queries/useEvidences";
+import { usePopulatedDisputeData } from "queries/usePopulatedDisputeData";
+
+import { isUndefined } from "src/utils";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
@@ -41,6 +45,10 @@ const StyledLabel = styled.label`
   font-size: 16px;
 `;
 
+const ArbitrableEvidenceHeading = styled.h2`
+  font-weight: 600;
+  font-size: 24px;
+`;
 const ScrollButton = styled(Button)`
   align-self: flex-end;
   background-color: transparent;
@@ -77,14 +85,17 @@ const SpamLabel = styled.label`
   cursor: pointer;
 `;
 
-const Evidence: React.FC = () => {
+interface IEvidence {
+  arbitrable?: Address;
+}
+const Evidence: React.FC<IEvidence> = ({ arbitrable }) => {
   const { id } = useParams();
   const ref = useRef<HTMLDivElement>(null);
   const [search, setSearch] = useState<string>();
   const [debouncedSearch, setDebouncedSearch] = useState<string>();
   const [showSpam, setShowSpam] = useState(false);
   const { data: spamEvidences } = useSpamEvidence(id!);
-
+  const { data: disputeData } = usePopulatedDisputeData(id, arbitrable);
   const { data } = useEvidences(id!, debouncedSearch);
 
   useDebounce(() => setDebouncedSearch(search), 500, [search]);
@@ -105,6 +116,7 @@ const Evidence: React.FC = () => {
     [spamEvidences]
   );
 
+  const arbitrableEvidences = disputeData?.extraEvidences;
   const evidences = useMemo(() => {
     if (!data?.evidences) return;
     const spamEvidences = data.evidences.filter((evidence) => isSpam(evidence.id));
@@ -116,6 +128,19 @@ const Evidence: React.FC = () => {
     <Container ref={ref}>
       <EvidenceSearch {...{ search, setSearch }} />
       <ScrollButton small Icon={DownArrow} text="Scroll to latest" onClick={scrollToLatest} />
+      {!isUndefined(arbitrableEvidences) && arbitrableEvidences.length > 0 ? (
+        <>
+          <ArbitrableEvidenceHeading>Evidence provided by arbitrable</ArbitrableEvidenceHeading>
+          {arbitrableEvidences.map(({ name, description, fileURI, sender, timestamp, transactionHash }, index) => (
+            <EvidenceCard
+              key={index}
+              evidence=""
+              {...{ sender, timestamp, transactionHash, name, description, fileURI }}
+            />
+          ))}
+          <Divider />
+        </>
+      ) : null}
       {evidences?.realEvidences ? (
         <>
           {evidences?.realEvidences.map(