Merge pull request #391 from kleros/feat(web)/commit-differentiation

feat(web): commit differentiation, sort by not committed first
kleros · Nov 30, 2023 · b8a5367 · b8a5367
2 parents 920a89c + 4f2fa9c
commit b8a5367
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 36 deletions.
diff --git a/src/components/case-card.js b/src/components/case-card.js
@@ -111,8 +111,18 @@ const StyledHeaderText = styled.div`
   top: -2px;
 `;
 const TimeoutDiv = styled.div`
-  color: #f60c36;
+  color: ${({ isVoteCommitted }) => (isVoteCommitted ? "#52c41a" : "#f60c36")};
 `;
+
+const TimeoutDivIsCommited = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  @media (max-width: 460px) {
+    flex-direction: column;
+  }
+`;
+
 const TimeoutText = styled.div`
   font-size: 14px;
   font-weight: 500;
@@ -132,20 +142,39 @@ const StakeLocked = styled.div`
   text-align: right;
 `;
 
-const PeriodCard = ({ period, deadline, hiddenVotes }) => {
-  const phases = ["Evidence Submission", "Commit Deadline", "Voting Deadline", "Appeal Deadline", "Execute Deadline"];
-  const periodText = Number(period) === 2 && hiddenVotes ? "Reveal Deadline" : phases[period];
+const phases = ["Evidence Submission", "Commit Deadline", "Voting Deadline", "Appeal Deadline", "Execute Deadline"];
+
+const PeriodCard = ({ period, deadline, hiddenVotes, isVoteCommitted }) => {
+  const showCommited = useMemo(() => Number(period) === 1 && isVoteCommitted, [period, isVoteCommitted]);
+  const periodText = useMemo(() => {
+    const showRevealDeadline = Number(period) === 2 && hiddenVotes;
+
+    if (showRevealDeadline) {
+      return "Reveal Deadline";
+    } else if (showCommited) {
+      return "Committed ✅";
+    } else {
+      return phases[period];
+    }
+  }, [showCommited, period, hiddenVotes]);
+
   return (
-    <TimeoutDiv key="timeout">
+    <TimeoutDiv isVoteCommitted={isVoteCommitted} key="timeout">
       <TimeoutText>{periodText}</TimeoutText>
       <TimeoutTime>
-        <TimeAgo>{deadline}</TimeAgo>
+        {showCommited ? (
+          <TimeoutDivIsCommited>
+            Reveal&nbsp;<TimeAgo>{deadline}</TimeAgo>
+          </TimeoutDivIsCommited>
+        ) : (
+          <TimeAgo>{deadline}</TimeAgo>
+        )}
       </TimeoutTime>
     </TimeoutDiv>
   );
 };
 
-const CaseCard = ({ ID, draws }) => {
+const CaseCard = ({ ID, draws, isVoteCommitted }) => {
   const chainId = useChainId();
   const { drizzle, useCacheCall } = useDrizzle();
   const getMetaEvidence = useDataloader.getMetaEvidence();
@@ -199,13 +228,18 @@ const CaseCard = ({ ID, draws }) => {
       actions={useMemo(
         () => [
           disputeData.deadline && (
-            <PeriodCard period={dispute.period} deadline={disputeData.deadline} hiddenVotes={disputeData.hiddenVotes} />
+            <PeriodCard
+              period={dispute.period}
+              deadline={disputeData.deadline}
+              hiddenVotes={disputeData.hiddenVotes}
+              isVoteCommitted={isVoteCommitted}
+            />
           ),
           <Link key="details" to={`/cases/${ID}`}>
             <Button type="primary">See Details</Button>
           </Link>,
         ],
-        [disputeData.deadline, dispute.period, disputeData.hiddenVotes, ID]
+        [disputeData.deadline, dispute.period, disputeData.hiddenVotes, ID, isVoteCommitted]
       )}
       extra={<StyledHeaderText>Case #{ID}</StyledHeaderText>}
       hoverable
@@ -251,11 +285,13 @@ PeriodCard.propTypes = {
   period: PropTypes.number.isRequired,
   deadline: PropTypes.number.isRequired,
   hiddenVotes: PropTypes.bool.isRequired,
+  isVoteCommitted: PropTypes.bool,
 };
 
 CaseCard.propTypes = {
   ID: PropTypes.string.isRequired,
   draws: PropTypes.array,
+  isVoteCommitted: PropTypes.bool,
 };
 
 export default CaseCard;
diff --git a/src/containers/cases.js b/src/containers/cases.js
@@ -29,31 +29,51 @@ export default function Cases() {
         ).reduce(
           (acc, d) => {
             const dispute = call("KlerosLiquid", "disputes", d.disputeID);
+            if (!dispute) {
+              acc.loading = true;
+              return acc;
+            }
+
             const numberOfVotes = draws.filter((_draw) => _draw.disputeID === d.disputeID);
-            if (dispute)
-              if (dispute.period === "1" || dispute.period === "2") {
-                const dispute2 = call("KlerosLiquid", "getDispute", d.disputeID);
-                if (dispute2)
-                  if (Number(d.appeal) === dispute2.votesLengths.length - 1) {
-                    const vote = call("KlerosLiquid", "getVote", d.disputeID, d.appeal, d.voteID);
-                    if (vote)
-                      acc[vote.voted ? "active" : "votePending"].push({
-                        ID: d.disputeID,
-                        draws: numberOfVotes,
-                      });
-                    else acc.loading = true;
-                  } else
-                    acc.active.push({
-                      ID: d.disputeID,
-                      draws: numberOfVotes,
-                    });
-                else acc.loading = true;
-              } else
-                acc[dispute.period === "4" ? "executed" : "active"].push({
-                  ID: d.disputeID,
-                  draws: numberOfVotes,
-                });
-            else acc.loading = true;
+            const dispute2 = call("KlerosLiquid", "getDispute", d.disputeID);
+
+            if (!dispute2) {
+              return acc;
+            }
+
+            if (Number(d.appeal) !== dispute2.votesLengths.length - 1) {
+              acc.active.push({
+                ID: d.disputeID,
+                draws: numberOfVotes,
+                status: 1,
+              });
+              return acc;
+            }
+
+            if (dispute.period === "1") {
+              const vote = call("KlerosLiquid", "getVote", d.disputeID, d.appeal, d.voteID);
+              const isVoteCommitted =
+                vote?.commit !== "0x0000000000000000000000000000000000000000000000000000000000000000";
+              acc[vote?.voted ? "active" : "votePending"].push({
+                ID: d.disputeID,
+                draws: numberOfVotes,
+                status: !isVoteCommitted ? 0 : 1,
+                isVoteCommitted: isVoteCommitted,
+              });
+            } else if (dispute.period === "2") {
+              const vote = call("KlerosLiquid", "getVote", d.disputeID, d.appeal, d.voteID);
+              acc[vote?.voted ? "active" : "votePending"].push({
+                ID: d.disputeID,
+                draws: numberOfVotes,
+                status: !vote?.voted ? 0 : 1,
+              });
+            } else {
+              acc[dispute.period === "4" ? "executed" : "active"].push({
+                ID: d.disputeID,
+                draws: numberOfVotes,
+              });
+            }
+
             return acc;
           },
           { active: [], executed: [], loading: false, votePending: [] }
@@ -62,6 +82,7 @@ export default function Cases() {
   );
 
   const filteredDisputes = disputes[["votePending", "active", "executed"][filter]];
+  const sortedDisputes = [...filteredDisputes].sort((a, b) => a.status - b.status);
 
   return (
     <>
@@ -84,12 +105,12 @@ export default function Cases() {
       <Divider />
       <Spin spinning={disputes.loading}>
         <Row gutter={48}>
-          {filteredDisputes.length === 0 ? (
+          {sortedDisputes.length === 0 ? (
             <StyledCol>You don&rsquo;t have any {["pending", "active", "closed"][filter]} cases.</StyledCol>
           ) : (
-            filteredDisputes.map((dispute) => (
+            sortedDisputes.map((dispute) => (
               <Col key={dispute.ID} md={12} xl={8}>
-                <CaseCard ID={dispute.ID} draws={dispute.draws} />
+                <CaseCard ID={dispute.ID} draws={dispute.draws} isVoteCommitted={dispute.isVoteCommitted} />
               </Col>
             ))
           )}