Merge pull request #1184 from kleros/fix(web)/disable-appeal-tab-on-last-round

feat(web): disable appeal tab on last round and add info message

Author: alcercu

web/src/pages/Cases/CaseDetails/Tabs.tsx

@@ -5,6 +5,9 @@ import { Tabs as TabsComponent } from "@kleros/ui-components-library";
 import { Periods } from "consts/periods";
 import { useVotingHistory } from "hooks/queries/useVotingHistory";
 import { useDisputeDetailsQuery } from "hooks/queries/useDisputeDetailsQuery";
+import { useAppealCost } from "queries/useAppealCost";
+import { isLastRound } from "utils/isLastRound";
+import { isUndefined } from "utils/index";
 import EyeIcon from "assets/svgs/icons/eye.svg";
 import DocIcon from "assets/svgs/icons/doc.svg";
 import BalanceIcon from "assets/svgs/icons/law-balance.svg";
@@ -54,6 +57,7 @@ const Tabs: React.FC = () => {
   const { id } = useParams();
   const { data } = useDisputeDetailsQuery(id);
   const { data: votingHistory } = useVotingHistory(id);
+  const { data: appealCost } = useAppealCost(id);
   const rounds = votingHistory?.dispute?.rounds ?? [1];
   const dispute = data?.dispute;
   const currentPeriodIndex = Periods[dispute?.period ?? 0];
@@ -64,8 +68,10 @@ const Tabs: React.FC = () => {
   }, [currentPathName]);
 
   useEffect(() => {
-    TABS[3].disabled = parseInt(currentPeriodIndex) < 3 && rounds.length === 1;
-  }, [currentPeriodIndex, id, currentTab, rounds.length]);
+    TABS[3].disabled =
+      (parseInt(currentPeriodIndex) < 3 && rounds.length === 1) ||
+      (!isUndefined(appealCost) && isLastRound(appealCost) && parseInt(currentPeriodIndex) === 3);
+  }, [currentPeriodIndex, id, currentTab, rounds.length, appealCost]);
 
   return (
     <StyledTabs

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

@@ -5,11 +5,13 @@ import { useAccount } from "wagmi";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { useDrawQuery } from "queries/useDrawQuery";
+import { useAppealCost } from "queries/useAppealCost";
 import Classic from "./Classic";
 import VotingHistory from "./VotingHistory";
 import Popup, { PopupType } from "components/Popup";
 import { Periods } from "consts/periods";
 import { isUndefined } from "utils/index";
+import { isLastRound } from "utils/isLastRound";
 import { getPeriodEndTimestamp } from "components/DisputeCard";
 import { useDisputeKitClassicIsVoteActive } from "hooks/contracts/generated";
 import VoteIcon from "assets/svgs/icons/voted.svg";
@@ -44,6 +46,7 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
   const { address } = useAccount();
   const { id } = useParams();
   const { data: disputeData } = useDisputeDetailsQuery(id);
+  const { data: appealCost } = useAppealCost(id);
   const { data: drawData } = useDrawQuery(address?.toLowerCase(), id, disputeData?.dispute?.currentRound.id);
   const roundId = disputeData?.dispute?.currentRoundIndex;
   const voteId = drawData?.draws?.[0]?.voteID;
@@ -63,6 +66,15 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
 
   return (
     <>
+      {!isUndefined(appealCost) && isLastRound(appealCost) && (
+        <>
+          <InfoContainer>
+            <InfoCircle />
+            This dispute is on its last round. Vote wisely, It cannot be appealed any further.
+          </InfoContainer>
+          <br></br>
+        </>
+      )}
       {drawData?.draws.length === 0 && (
         <>
           <InfoContainer>

web/src/utils/isLastRound.ts

@@ -0,0 +1,8 @@
+import { formatEther } from "viem";
+
+export const isLastRound = (appealCost: bigint) => {
+  if (Number(formatEther(appealCost)) > Number.MAX_SAFE_INTEGER) {
+    return true;
+  }
+  return false;
+};