feat(web): round info on dispute card

Author: kemuru

web/src/assets/svgs/icons/round.svg

@@ -5,6 +5,7 @@ import BookmarkIcon from "svgs/icons/bookmark.svg";
 import CalendarIcon from "svgs/icons/calendar.svg";
 import LawBalanceIcon from "svgs/icons/law-balance.svg";
 import PileCoinsIcon from "svgs/icons/pile-coins.svg";
+import RoundIcon from "svgs/icons/round.svg";
 import Field from "../Field";
 
 const Container = styled.div`
@@ -33,13 +34,15 @@ export interface IDisputeInfo {
   rewards?: string;
   period?: Periods;
   date?: number;
+  round?: number;
 }
 
-const DisputeInfo: React.FC<IDisputeInfo> = ({ courtId, court, category, rewards, period, date }) => {
+const DisputeInfo: React.FC<IDisputeInfo> = ({ courtId, court, category, rewards, period, date, round }) => {
   return (
     <Container>
-      {category && <Field icon={BookmarkIcon} name="Category" value={category} />}
       {court && courtId && <Field icon={LawBalanceIcon} name="Court" value={court} link={`/courts/${courtId}`} />}
+      {category && <Field icon={BookmarkIcon} name="Category" value={category} />}
+      {round && <Field icon={RoundIcon} name="Round" value={round.toString()} />}
       {rewards && <Field icon={PileCoinsIcon} name="Juror Rewards" value={rewards} />}
       {typeof period !== "undefined" && date && (
         <Field icon={CalendarIcon} name={getPeriodPhrase(period)} value={new Date(date * 1000).toLocaleString()} />

web/src/components/DisputeCard/DisputeInfo.tsx

@@ -11,6 +11,7 @@ import { useDisputeTemplate } from "queries/useDisputeTemplate";
 import DisputeInfo from "./DisputeInfo";
 import PeriodBanner from "./PeriodBanner";
 import { isUndefined } from "utils/index";
+import { useVotingHistory } from "hooks/queries/useVotingHistory";
 
 const StyledCard = styled(Card)`
   max-width: 380px;
@@ -61,6 +62,8 @@ const DisputeCard: React.FC<CasesPageQuery["disputes"][number]> = ({
   const { data: courtPolicy } = useCourtPolicy(court.id);
   const courtName = courtPolicy?.name;
   const category = disputeTemplate ? disputeTemplate.category : undefined;
+  const { data: votingHistory } = useVotingHistory(id);
+  const localRounds = votingHistory?.dispute?.disputeKitDispute?.localRounds;
   const navigate = useNavigate();
   return (
     <StyledCard hover onClick={() => navigate(`/cases/${id.toString()}`)}>
@@ -71,6 +74,7 @@ const DisputeCard: React.FC<CasesPageQuery["disputes"][number]> = ({
           courtId={court?.id}
           court={courtName}
           period={currentPeriodIndex}
+          round={localRounds?.length}
           {...{ category, rewards, date }}
         />
       </Container>