feat(web): dispute-txn-hashes-and-timestamps

Author: Harman-singh-waraich

web/src/components/EvidenceCard.tsx

@@ -1,10 +1,6 @@
 import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
-import { hoverShortTransitionTiming } from "styles/commonStyles";
-
 import Identicon from "react-identicons";
 import ReactMarkdown from "react-markdown";
 
@@ -18,6 +14,11 @@ import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
 
 import { type Evidence } from "src/graphql/graphql";
+import { getTxnExplorerLink } from "src/utils";
+
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
 
 import { ExternalLink } from "./ExternalLink";
 import { InternalLink } from "./InternalLink";
@@ -224,7 +225,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
   }, [sender]);
 
   const transactionExplorerLink = useMemo(() => {
-    return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/tx/${transactionHash}`;
+    return getTxnExplorerLink(transactionHash ?? "");
   }, [transactionHash]);
 
   return (

web/src/components/TxnHash.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import NewTabIcon from "svgs/icons/new-tab.svg";
 
-import { DEFAULT_CHAIN, getChain } from "consts/chains";
+import { getTxnExplorerLink } from "src/utils";
 
 import { ExternalLink } from "./ExternalLink";
 
@@ -23,7 +23,7 @@ interface ITxnHash {
 }
 const TxnHash: React.FC<ITxnHash> = ({ hash, variant }) => {
   const transactionExplorerLink = useMemo(() => {
-    return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/tx/${hash}`;
+    return getTxnExplorerLink(hash);
   }, [hash]);
 
   return (

web/src/components/Verdict/DisputeTimeline.tsx

@@ -1,8 +1,7 @@
 import React, { useMemo } from "react";
 import styled, { useTheme } from "styled-components";
 
-import { responsiveSize } from "styles/responsiveSize";
-
+import Skeleton from "react-loading-skeleton";
 import { useParams } from "react-router-dom";
 
 import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
@@ -14,14 +13,20 @@ import { Periods } from "consts/periods";
 import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
 import { getLocalRounds } from "utils/getLocalRounds";
 import { getVoteChoice } from "utils/getVoteChoice";
+import { shortenTxnHash } from "utils/shortenAddress";
 
 import { DisputeDetailsQuery, useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { useVotingHistory } from "queries/useVotingHistory";
 
 import { ClassicRound } from "src/graphql/graphql";
+import { getTxnExplorerLink } from "src/utils";
+
+import { responsiveSize } from "styles/responsiveSize";
 
 import { StyledClosedCircle } from "components/StyledIcons/ClosedCircleIcon";
 
+import { ExternalLink } from "../ExternalLink";
+
 const Container = styled.div`
   display: flex;
   position: relative;
@@ -50,6 +55,16 @@ const StyledCalendarIcon = styled(CalendarIcon)`
   height: 14px;
 `;
 
+const LinkContainer = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  span {
+    font-size: 14px;
+    color: ${({ theme }) => theme.primaryText};
+  }
+`;
+
 const formatDate = (date: string) => {
   const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "long", day: "numeric" };
   const startingDate = new Date(parseInt(date) * 1000);
@@ -67,6 +82,9 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
   const localRounds: ClassicRound[] = getLocalRounds(votingHistory?.dispute?.disputeKitDispute) as ClassicRound[];
   const rounds = votingHistory?.dispute?.rounds;
   const theme = useTheme();
+  const txnExplorerLink = useMemo(() => {
+    return getTxnExplorerLink(votingHistory?.dispute?.transactionHash ?? "");
+  }, [votingHistory]);
 
   return useMemo<TimelineItems | undefined>(() => {
     const dispute = disputeDetails?.dispute;
@@ -119,7 +137,18 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
         [
           {
             title: "Dispute created",
-            party: "",
+            party: (
+              <LinkContainer>
+                <span>at</span>
+                <ExternalLink to={txnExplorerLink} rel="noopener noreferrer" target="_blank">
+                  {votingHistory?.dispute?.transactionHash ? (
+                    shortenTxnHash(votingHistory?.dispute?.transactionHash)
+                  ) : (
+                    <Skeleton height={16} width={56} />
+                  )}
+                </ExternalLink>
+              </LinkContainer>
+            ),
             subtitle: formatDate(votingHistory?.dispute?.createdAt),
             rightSided: true,
             variant: theme.secondaryPurple,
@@ -128,7 +157,7 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
       );
     }
     return;
-  }, [disputeDetails, disputeData, localRounds, theme]);
+  }, [disputeDetails, disputeData, localRounds, theme, rounds, votingHistory, txnExplorerLink]);
 };
 
 interface IDisputeTimeline {
@@ -138,15 +167,30 @@ interface IDisputeTimeline {
 const DisputeTimeline: React.FC<IDisputeTimeline> = ({ arbitrable }) => {
   const { id } = useParams();
   const { data: disputeDetails } = useDisputeDetailsQuery(id);
+  const { data: votingHistory } = useVotingHistory(id);
   const items = useItems(disputeDetails, arbitrable);
 
+  const transactionExplorerLink = useMemo(() => {
+    return getTxnExplorerLink(disputeDetails?.dispute?.rulingTransactionHash ?? "");
+  }, [disputeDetails]);
+
   return (
     <Container>
       {items && <StyledTimeline {...{ items }} />}
-      {disputeDetails?.dispute?.ruled && items && (
+      {disputeDetails?.dispute?.ruled && (
         <EnforcementContainer>
           <StyledCalendarIcon />
-          <small>Enforcement: {items.at(-1)?.subtitle}</small>
+          <small>
+            Enforcement:{" "}
+            {disputeDetails.dispute.rulingTimestamp ? (
+              <ExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
+                {formatDate(disputeDetails.dispute.rulingTimestamp)}
+              </ExternalLink>
+            ) : (
+              <Skeleton height={16} width={56} />
+            )}{" "}
+            / {votingHistory?.dispute?.rounds.at(-1)?.court.name}
+          </small>
         </EnforcementContainer>
       )}
     </Container>

web/src/hooks/queries/useDisputeDetailsQuery.ts

@@ -34,6 +34,8 @@ const disputeDetailsQuery = graphql(`
       arbitrableChainId
       externalDisputeId
       templateId
+      rulingTimestamp
+      rulingTransactionHash
     }
   }
 `);

web/src/hooks/queries/useVotingHistory.ts

@@ -12,6 +12,7 @@ const votingHistoryQuery = graphql(`
     dispute(id: $disputeID) {
       id
       createdAt
+      transactionHash
       ruled
       rounds {
         nbVotes
@@ -29,6 +30,8 @@ const votingHistoryQuery = graphql(`
             ... on ClassicVote {
               commited
               justification {
+                transactionHash
+                timestamp
                 choice
                 reference
               }

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx

@@ -4,13 +4,15 @@ import styled, { css } from "styled-components";
 import { Card, CustomAccordion } from "@kleros/ui-components-library";
 
 import { Answer } from "context/NewDisputeContext";
+import { formatDate } from "utils/date";
 import { DrawnJuror } from "utils/getDrawnJurorsWithCount";
 import { getVoteChoice } from "utils/getVoteChoice";
-import { isUndefined } from "utils/index";
+import { getTxnExplorerLink, isUndefined } from "utils/index";
 
 import { hoverShortTransitionTiming } from "styles/commonStyles";
 import { landscapeStyle } from "styles/landscapeStyle";
 
+import { ExternalLink } from "components/ExternalLink";
 import InfoCard from "components/InfoCard";
 
 import AccordionTitle from "./AccordionTitle";
@@ -76,7 +78,7 @@ const AccordionContentContainer = styled.div`
 const JustificationText = styled.div`
   color: ${({ theme }) => theme.secondaryText};
   font-size: 16px;
-  line-height: 1.2;
+  line-height: 1.25;
   &:before {
     content: "Justification: ";
     color: ${({ theme }) => theme.primaryText};
@@ -97,21 +99,37 @@ const AccordionContent: React.FC<{
   choice?: string;
   answers: Answer[];
   justification: string;
-}> = ({ justification, choice, answers }) => (
-  <AccordionContentContainer>
-    {!isUndefined(choice) && (
-      <div>
-        <StyledLabel>Voted:&nbsp;</StyledLabel>
-        <SecondaryTextLabel>{getVoteChoice(parseInt(choice), answers)}</SecondaryTextLabel>
-      </div>
-    )}
-    {justification ? (
-      <JustificationText>{justification}</JustificationText>
-    ) : (
-      <SecondaryTextLabel>No justification provided</SecondaryTextLabel>
-    )}
-  </AccordionContentContainer>
-);
+  timestamp?: string;
+  transactionHash?: string;
+}> = ({ justification, choice, answers, timestamp, transactionHash }) => {
+  const transactionExplorerLink = useMemo(() => {
+    return getTxnExplorerLink(transactionHash ?? "");
+  }, [transactionHash]);
+
+  return (
+    <AccordionContentContainer>
+      {!isUndefined(choice) && (
+        <div>
+          <StyledLabel>Voted:&nbsp;</StyledLabel>
+          <SecondaryTextLabel>{getVoteChoice(parseInt(choice), answers)}</SecondaryTextLabel>
+        </div>
+      )}
+      {!isUndefined(timestamp) && (
+        <div>
+          <StyledLabel>Date:&nbsp;</StyledLabel>
+          <ExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
+            {formatDate(Number(timestamp), true)}
+          </ExternalLink>
+        </div>
+      )}
+      {justification ? (
+        <JustificationText>{justification}</JustificationText>
+      ) : (
+        <SecondaryTextLabel>No justification provided</SecondaryTextLabel>
+      )}
+    </AccordionContentContainer>
+  );
+};
 
 interface IVotesAccordion {
   drawnJurors: DrawnJuror[];
@@ -144,6 +162,8 @@ const VotesAccordion: React.FC<IVotesAccordion> = ({ drawnJurors, period, answer
                   justification={drawnJuror?.vote?.justification.reference ?? ""}
                   choice={drawnJuror.vote?.justification?.choice}
                   answers={answers}
+                  transactionHash={drawnJuror.transactionHash}
+                  timestamp={drawnJuror.timestamp}
                 />
               ),
             }

web/src/utils/getDrawnJurorsWithCount.ts

@@ -1,19 +1,26 @@
 import { VotingHistoryQuery } from "src/graphql/graphql";
 
 type IVotingHistoryRounds = NonNullable<NonNullable<VotingHistoryQuery["dispute"]>["rounds"][number]["drawnJurors"]>;
-export type DrawnJuror = IVotingHistoryRounds[number] & { voteCount: number };
+export type DrawnJuror = IVotingHistoryRounds[number] & {
+  voteCount: number;
+  transactionHash?: string;
+  timestamp?: string;
+};
 
 export const getDrawnJurorsWithCount = (drawnJurors: IVotingHistoryRounds) =>
   drawnJurors?.reduce<DrawnJuror[]>((acc, current) => {
     const jurorId = current.juror.id;
 
     const existingJuror = acc.find((item) => item.juror.id === jurorId);
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     existingJuror
       ? existingJuror.voteCount++
       : acc.push({
           juror: { id: jurorId },
           voteCount: 1,
           vote: current.vote,
+          transactionHash: current.vote?.justification?.transactionHash,
+          timestamp: current.vote?.justification?.timestamp,
         });
     return acc;
   }, []);

web/src/utils/index.ts

@@ -1,7 +1,12 @@
+import { DEFAULT_CHAIN, getChain } from "consts/chains";
+
 export const isUndefined = (maybeObject: any): maybeObject is undefined | null =>
   typeof maybeObject === "undefined" || maybeObject === null;
 
 /**
  * Checks if a string is empty or contains only whitespace.
  */
 export const isEmpty = (str: string): boolean => str.trim() === "";
+
+export const getTxnExplorerLink = (hash: string) =>
+  `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/tx/${hash}`;

web/src/utils/shortenAddress.ts

@@ -8,3 +8,11 @@ export function shortenAddress(address: string): string {
     throw new TypeError("Invalid input, address can't be parsed");
   }
 }
+
+export function shortenTxnHash(hash: string): string {
+  try {
+    return hash.substring(0, 6) + "..." + hash.substring(hash.length - 4);
+  } catch {
+    throw new TypeError("Invalid input, address can't be parsed");
+  }
+}