feat(web): Evidence: display submission timestamp

subgraph/core/schema.graphql

@@ -53,6 +53,7 @@ interface Evidence {
   evidence: String!
   evidenceGroup: EvidenceGroup!
   sender: User!
+  timestamp: BigInt!
 }
 
 ############
@@ -296,6 +297,7 @@ type ClassicEvidence implements Evidence @entity {
   evidence: String!
   evidenceGroup: EvidenceGroup!
   sender: User!
+  timestamp: BigInt!
 }
 
 type ClassicContribution implements Contribution @entity {

subgraph/core/src/EvidenceModule.ts

@@ -12,6 +12,7 @@ export function handleEvidenceEvent(event: EvidenceEvent): void {
   evidenceGroup.save();
   const evidence = new ClassicEvidence(`${evidenceGroupID}-${evidenceIndex.toString()}`);
   const userId = event.params._party.toHexString();
+  evidence.timestamp = event.block.timestamp;
   evidence.evidence = event.params._evidence;
   evidence.evidenceGroup = evidenceGroupID.toString();
   evidence.sender = userId;

subgraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/kleros-v2-subgraph",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",

web/src/components/EvidenceCard.tsx

@@ -11,6 +11,7 @@ import AttachmentIcon from "svgs/icons/attachment.svg";
 import { useIPFSQuery } from "hooks/useIPFSQuery";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
+import { formatDate } from "utils/date";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
@@ -40,11 +41,15 @@ const StyledReactMarkdown = styled(ReactMarkdown)`
   a {
     font-size: 16px;
   }
+  code {
+    color: ${({ theme }) => theme.secondaryText};
+  }
 `;
 
 const BottomShade = styled.div`
   background-color: ${({ theme }) => theme.lightBlue};
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 16px;
   padding: 12px ${responsiveSize(8, 24)};
@@ -60,13 +65,13 @@ const StyledA = styled.a`
   margin-left: auto;
   gap: ${responsiveSize(5, 6)};
   ${landscapeStyle(
-    () => css`
+  () => css`
       > svg {
         width: 16px;
         fill: ${({ theme }) => theme.primaryBlue};
       }
     `
-  )}
+)}
 `;
 
 const AccountContainer = styled.div`
@@ -90,18 +95,22 @@ const AccountContainer = styled.div`
 const DesktopText = styled.span`
   display: none;
   ${landscapeStyle(
-    () => css`
+  () => css`
       display: inline;
     `
-  )}
+)}
+`;
+
+const Timestamp = styled.p`
+color: ${({ theme }) => theme.secondaryText};
 `;
 
 const MobileText = styled.span`
   ${landscapeStyle(
-    () => css`
+  () => css`
       display: none;
     `
-  )}
+)}
 `;
 
 const AttachedFileText: React.FC = () => (
@@ -115,9 +124,10 @@ interface IEvidenceCard {
   evidence: string;
   sender: string;
   index: number;
+  timestamp: string;
 }
 
-const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
+const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timestamp }) => {
   const { data } = useIPFSQuery(evidence);
   return (
     <StyledCard>
@@ -137,6 +147,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
           <Identicon size="24" string={sender} />
           <p>{shortenAddress(sender)}</p>
         </AccountContainer>
+        <Timestamp>{formatDate(Number(timestamp))}</Timestamp>
         {data && typeof data.fileURI !== "undefined" && (
           <StyledA href={getIpfsUrl(data.fileURI)} target="_blank" rel="noreferrer">
             <AttachmentIcon />

web/src/hooks/queries/useEvidences.ts

@@ -14,6 +14,7 @@ const evidencesQuery = graphql(`
       sender {
         id
       }
+      timestamp
     }
   }
 `);

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

@@ -62,8 +62,8 @@ const Evidence: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => {
         />
       </EnsureChain>
       {data ? (
-        data.evidences.map(({ key, evidence, sender }, i) => (
-          <EvidenceCard key={key} index={i + 1} sender={sender?.id} {...{ evidence }} />
+        data.evidences.map(({ key, evidence, sender, timestamp }, i) => (
+          <EvidenceCard key={key} index={i + 1} sender={sender?.id} {...{ evidence, timestamp }} />
         ))
       ) : (
         <SkeletonEvidenceCard />