feat: new overview design

Author: kemuru

web/src/assets/svgs/icons/gavel-executed.svg

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
@@ -9,21 +9,30 @@ import { isUndefined } from "utils/index";
 
 import { responsiveSize } from "styles/responsiveSize";
 
+import { DisputeDetailsQuery, VotingHistoryQuery } from "src/graphql/graphql";
+
 import ReactMarkdown from "components/ReactMarkdown";
 import { StyledSkeleton } from "components/StyledSkeleton";
 
 import { Divider } from "../Divider";
 import { ExternalLink } from "../ExternalLink";
 
 import AliasDisplay from "./Alias";
+import RulingAndRewardsIndicators from "../Verdict/RulingAndRewardsIndicators";
 
 const StyledH1 = styled.h1`
   margin: 0;
   word-wrap: break-word;
-  font-size: ${responsiveSize(18, 24)};
+  font-size: ${responsiveSize(20, 26)};
   line-height: 24px;
 `;
 
+const TitleSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
 const ReactMarkdownWrapper = styled.div`
   & p:first-of-type {
     margin: 0;
@@ -68,17 +77,36 @@ const AliasesContainer = styled.div`
 
 interface IDisputeContext {
   disputeDetails?: DisputeDetails;
+  dispute: DisputeDetailsQuery | undefined;
   isRpcError?: boolean;
+  votingHistory: VotingHistoryQuery | undefined;
 }
 
-export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRpcError = false }) => {
+export const DisputeContext: React.FC<IDisputeContext> = ({
+  disputeDetails,
+  dispute,
+  isRpcError = false,
+  votingHistory,
+}) => {
   const errMsg = isRpcError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR;
+  const rounds = votingHistory?.dispute?.rounds;
+  const jurorRewardsDispersed = useMemo(() => Boolean(rounds?.every((round) => round.jurorRewardsDispersed)), [rounds]);
+  console.log({ jurorRewardsDispersed }, disputeDetails);
 
   return (
     <>
-      <StyledH1 dir="auto">
-        {isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}
-      </StyledH1>
+      <TitleSection>
+        <StyledH1 dir="auto">
+          {isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}
+        </StyledH1>
+        {!isUndefined(Boolean(dispute?.dispute?.ruled)) || jurorRewardsDispersed ? (
+          <RulingAndRewardsIndicators
+            ruled={Boolean(dispute?.dispute?.ruled)}
+            jurorRewardsDispersed={jurorRewardsDispersed}
+          />
+        ) : null}
+        <Divider />
+      </TitleSection>
       {disputeDetails?.question?.trim() || disputeDetails?.description?.trim() ? (
         <div>
           {disputeDetails?.question?.trim() ? (

web/src/components/DisputePreview/DisputeContext.tsx

@@ -1,14 +1,13 @@
 import React, { useMemo } from "react";
 import styled, { useTheme } from "styled-components";
 
-import Skeleton from "react-loading-skeleton";
 import { useParams } from "react-router-dom";
 
 import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
 
-import CalendarIcon from "svgs/icons/calendar.svg";
 import ClosedCaseIcon from "svgs/icons/check-circle-outline.svg";
 import NewTabIcon from "svgs/icons/new-tab.svg";
+import GavelExecutedIcon from "svgs/icons/gavel-executed.svg";
 
 import { Periods } from "consts/periods";
 import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
@@ -21,8 +20,6 @@ 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";
@@ -37,24 +34,6 @@ const StyledTimeline = styled(CustomTimeline)`
   width: 100%;
 `;
 
-const EnforcementContainer = styled.div`
-  display: flex;
-  gap: 8px;
-  margin-top: ${responsiveSize(12, 24)};
-  fill: ${({ theme }) => theme.secondaryText};
-
-  small {
-    font-weight: 400;
-    line-height: 19px;
-    color: ${({ theme }) => theme.secondaryText};
-  }
-`;
-
-const StyledCalendarIcon = styled(CalendarIcon)`
-  width: 14px;
-  height: 14px;
-`;
-
 const StyledNewTabIcon = styled(NewTabIcon)`
   margin-bottom: 2px;
   path {
@@ -84,73 +63,95 @@ 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(() => {
+  const txnDisputeCreatedLink = useMemo(() => {
     return getTxnExplorerLink(votingHistory?.dispute?.transactionHash ?? "");
   }, [votingHistory]);
+  const txnEnforcementLink = useMemo(() => {
+    return getTxnExplorerLink(disputeDetails?.dispute?.rulingTransactionHash ?? "");
+  }, [disputeDetails]);
 
   return useMemo<TimelineItems | undefined>(() => {
     const dispute = disputeDetails?.dispute;
-    if (dispute) {
-      const rulingOverride = dispute.overridden;
-      const currentPeriodIndex = Periods[dispute.period];
-
-      return localRounds?.reduce<TimelineItems>(
-        (acc, { winningChoice }, index) => {
-          const isOngoing = index === localRounds.length - 1 && currentPeriodIndex < 3;
-          const roundTimeline = rounds?.[index].timeline;
-
-          const icon = dispute.ruled && !rulingOverride && index === localRounds.length - 1 ? ClosedCaseIcon : "";
-          const answers = disputeData?.answers;
-          acc.push({
-            title: `Jury Decision - Round ${index + 1}`,
-            party: isOngoing ? "Voting is ongoing" : getVoteChoice(winningChoice, answers),
-            subtitle: isOngoing
-              ? ""
-              : `${formatDate(roundTimeline?.[Periods.vote])} / ${
-                  votingHistory?.dispute?.rounds.at(index)?.court.name
-                }`,
-            rightSided: true,
-            variant: theme.secondaryPurple,
-            Icon: icon !== "" ? icon : undefined,
-          });
-
-          if (index < localRounds.length - 1) {
-            acc.push({
-              title: "Appealed",
-              party: "",
-              subtitle: formatDate(roundTimeline?.[Periods.appeal]),
-              rightSided: true,
-              Icon: StyledClosedCircle,
-            });
-          } else if (rulingOverride && dispute.currentRuling !== winningChoice) {
-            acc.push({
-              title: "Won by Appeal",
-              party: getVoteChoice(dispute.currentRuling, answers),
-              subtitle: formatDate(roundTimeline?.[Periods.appeal]),
-              rightSided: true,
-              Icon: ClosedCaseIcon,
-            });
-          }
-
-          return acc;
-        },
-        [
-          {
-            title: "Dispute created",
-            party: (
-              <ExternalLink to={txnExplorerLink} rel="noopener noreferrer" target="_blank">
-                <StyledNewTabIcon />
-              </ExternalLink>
-            ),
-            subtitle: formatDate(votingHistory?.dispute?.createdAt),
-            rightSided: true,
-            variant: theme.secondaryPurple,
-          },
-        ]
-      );
+    if (!dispute) return;
+
+    const rulingOverride = dispute.overridden;
+    const currentPeriodIndex = Periods[dispute.period];
+
+    const base: TimelineItems = [
+      {
+        title: "Dispute created",
+        party: (
+          <ExternalLink to={txnDisputeCreatedLink} rel="noopener noreferrer" target="_blank">
+            <StyledNewTabIcon />
+          </ExternalLink>
+        ),
+        subtitle: formatDate(votingHistory?.dispute?.createdAt),
+        rightSided: true,
+        variant: theme.secondaryPurple,
+      },
+    ];
+
+    const items = localRounds?.reduce<_TimelineItem1[]>((acc, { winningChoice }, index) => {
+      const isOngoing = index === localRounds.length - 1 && currentPeriodIndex < 3;
+      const roundTimeline = rounds?.[index].timeline;
+      const icon = dispute.ruled && !rulingOverride && index === localRounds.length - 1 ? ClosedCaseIcon : undefined;
+      const answers = disputeData?.answers;
+
+      acc.push({
+        title: `Jury Decision - Round ${index + 1}`,
+        party: isOngoing ? "Voting is ongoing" : getVoteChoice(winningChoice, answers),
+        subtitle: isOngoing ? "" : `${formatDate(roundTimeline?.[Periods.vote])} / ${rounds?.[index]?.court.name}`,
+        rightSided: true,
+        variant: theme.secondaryPurple,
+        Icon: icon,
+      });
+
+      if (index < localRounds.length - 1) {
+        acc.push({
+          title: "Appealed",
+          party: "",
+          subtitle: formatDate(roundTimeline?.[Periods.appeal]),
+          rightSided: true,
+          Icon: StyledClosedCircle,
+        });
+      } else if (rulingOverride && dispute.currentRuling !== winningChoice) {
+        acc.push({
+          title: "Won by Appeal",
+          party: getVoteChoice(dispute.currentRuling, answers),
+          subtitle: formatDate(roundTimeline?.[Periods.appeal]),
+          rightSided: true,
+          Icon: ClosedCaseIcon,
+        });
+      }
+
+      return acc;
+    }, []);
+
+    if (dispute.ruled) {
+      items.push({
+        title: "Enforcement",
+        party: (
+          <ExternalLink to={txnEnforcementLink} rel="noopener noreferrer" target="_blank">
+            <StyledNewTabIcon />
+          </ExternalLink>
+        ),
+        subtitle: `${formatDate(dispute.rulingTimestamp)} / ${rounds?.at(-1)?.court.name}`,
+        rightSided: true,
+        Icon: GavelExecutedIcon,
+      });
     }
-    return;
-  }, [disputeDetails, disputeData, localRounds, theme, rounds, votingHistory, txnExplorerLink]);
+
+    return [...base, ...items] as TimelineItems;
+  }, [
+    disputeDetails,
+    disputeData,
+    localRounds,
+    theme,
+    rounds,
+    votingHistory,
+    txnDisputeCreatedLink,
+    txnEnforcementLink,
+  ]);
 };
 
 interface IDisputeTimeline {
@@ -160,33 +161,8 @@ 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 && (
-        <EnforcementContainer>
-          <StyledCalendarIcon />
-          <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>
-  );
+  return <Container>{items && <StyledTimeline {...{ items }} />}</Container>;
 };
 export default DisputeTimeline;