Merge pull request #2022 from kleros/feat/new-overview-design

feat: new overview design

Author: alcercu

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

@@ -1,29 +1,40 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
+import { useAccount } from "wagmi";
 
 import { INVALID_DISPUTE_DATA_ERROR, RPC_ERROR } from "consts/index";
 import { Answer as IAnswer } from "context/NewDisputeContext";
 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";
+import CardLabel from "../DisputeView/CardLabels";
 
 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;
@@ -66,19 +77,59 @@ const AliasesContainer = styled.div`
   gap: ${responsiveSize(8, 20)};
 `;
 
+const RulingAndRewardsAndLabels = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
 interface IDisputeContext {
   disputeDetails?: DisputeDetails;
   isRpcError?: boolean;
+  dispute?: DisputeDetailsQuery | undefined;
+
+  disputeId?: string;
+  votingHistory?: VotingHistoryQuery | undefined;
 }
 
-export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRpcError = false }) => {
+export const DisputeContext: React.FC<IDisputeContext> = ({
+  disputeDetails,
+  isRpcError = false,
+  dispute,
+  disputeId,
+  votingHistory,
+}) => {
+  const { isDisconnected } = useAccount();
   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(disputeDetails) &&
+        !isUndefined(dispute) &&
+        !isUndefined(disputeId) &&
+        !isUndefined(votingHistory) ? (
+          <RulingAndRewardsAndLabels>
+            {!isUndefined(Boolean(dispute?.dispute?.ruled)) || jurorRewardsDispersed ? (
+              <RulingAndRewardsIndicators
+                ruled={Boolean(dispute?.dispute?.ruled)}
+                jurorRewardsDispersed={jurorRewardsDispersed}
+              />
+            ) : null}
+            {!isDisconnected ? (
+              <CardLabel {...{ disputeId }} round={rounds?.length - 1} isList={false} isOverview={true} />
+            ) : null}
+          </RulingAndRewardsAndLabels>
+        ) : null}
+        <Divider />
+      </TitleSection>
       {disputeDetails?.question?.trim() || disputeDetails?.description?.trim() ? (
         <div>
           {disputeDetails?.question?.trim() ? (

web/src/components/DisputePreview/DisputeContext.tsx

@@ -22,11 +22,12 @@ import { ClassicContribution } from "src/graphql/graphql";
 import Label, { IColors } from "./Label";
 import RewardsAndFundLabel from "./RewardsAndFundLabel";
 
-const Container = styled.div<{ isList: boolean }>`
+const Container = styled.div<{ isList: boolean; isOverview: boolean }>`
   display: flex;
   gap: 8px;
   flex-direction: column;
   align-items: end;
+
   ${({ isList }) =>
     !isList &&
     css`
@@ -36,7 +37,16 @@ const Container = styled.div<{ isList: boolean }>`
       flex-direction: row;
       align-items: center;
     `}
+
+  ${({ isOverview }) =>
+    isOverview &&
+    css`
+      margin-top: 0;
+      flex-direction: row;
+      width: auto;
+    `}
 `;
+
 const RewardsContainer = styled.div`
   display: flex;
   gap: 4px 8px;
@@ -47,6 +57,7 @@ interface ICardLabels {
   disputeId: string;
   round: number;
   isList: boolean;
+  isOverview?: boolean;
 }
 
 const LabelArgs: Record<string, { text: string; icon: React.FC<React.SVGAttributes<SVGElement>>; color: IColors }> = {
@@ -73,7 +84,7 @@ const getFundingRewards = (contributions: ClassicContribution[], closed: boolean
   return Number(formatUnits(BigInt(contribution), 18));
 };
 
-const CardLabel: React.FC<ICardLabels> = ({ disputeId, round, isList }) => {
+const CardLabel: React.FC<ICardLabels> = ({ disputeId, round, isList, isOverview = false }) => {
   const { address } = useAccount();
   const { data: labelInfo, isLoading } = useLabelInfoQuery(address?.toLowerCase(), disputeId);
   const localRounds = getLocalRounds(labelInfo?.dispute?.disputeKitDispute);
@@ -139,7 +150,7 @@ const CardLabel: React.FC<ICardLabels> = ({ disputeId, round, isList }) => {
   }, [contributionRewards, shifts]);
 
   return (
-    <Container {...{ isList }}>
+    <Container {...{ isList, isOverview }}>
       {isLoading ? (
         <Skeleton width={130} height={14} />
       ) : (

web/src/components/DisputeView/CardLabels/index.tsx

@@ -60,7 +60,7 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({ isOverview, showLabels, f
           item.display ? <StyledField key={item.name} {...(item as IField)} {...{ isOverview }} /> : null
         )}
       </RestOfFieldsContainer>
-      {showLabels ? <CardLabel disputeId={disputeID} round={round - 1} /> : null}
+      {showLabels ? <CardLabel disputeId={disputeID} round={round - 1} isList={false} /> : null}
     </Container>
   );
 };