feat(web): add-dispute-resolvation-estimate-date

web/src/components/Popup/Description/DisputeCreated.tsx

@@ -1,6 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
+import Skeleton from "react-loading-skeleton";
 import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
+import { isUndefined } from "utils/index";
+import { formatDate, getCurrentTime } from "utils/date";
+import { useCourtDetails } from "hooks/queries/useCourtDetails";
 
 const Container = styled.div`
   display: flex;
@@ -24,18 +28,38 @@ const StyledSubtitle = styled(StyledTitle)`
   color: ${({ theme }) => theme.primaryText};
 `;
 interface IDisputeCreated {
-  disputeId: number;
+  courtId: string;
 }
 
-const DisputeCreated: React.FC<IDisputeCreated> = ({ disputeId }) => {
+const DisputeCreated: React.FC<IDisputeCreated> = ({ courtId }) => {
+  const { data: courtDetails } = useCourtDetails(courtId);
+
+  const date = useMemo(
+    () =>
+      !isUndefined(courtDetails?.court?.timesPerPeriod)
+        ? calculateMinResolveTime(courtDetails?.court.timesPerPeriod)
+        : undefined,
+    [courtDetails]
+  );
+
   return (
     <Container>
       <StyledTitle>
         🎉 Your case was successfully submitted to Kleros. A pool of jurors will be drawn to evaluate the case and vote
-        at most <StyledDateContainer>April 25,2021</StyledDateContainer>. 🎉
+        at most{" "}
+        {isUndefined(date) ? (
+          <Skeleton width={60} height={20} />
+        ) : (
+          <StyledDateContainer>{formatDate(date)}</StyledDateContainer>
+        )}
+        . 🎉
       </StyledTitle>
       <StyledSubtitle>Now, it’s time to submit evidence to support the case.</StyledSubtitle>
     </Container>
   );
 };
+
+const calculateMinResolveTime = (timesPerPeriod: string[]) =>
+  timesPerPeriod.reduce((acc, val) => acc + parseInt(val), 0) + getCurrentTime();
+
 export default DisputeCreated;

web/src/components/Popup/index.tsx

@@ -124,6 +124,7 @@ interface IAppeal {
 interface IDisputeCreated {
   popupType: PopupType.DISPUTE_CREATED;
   disputeId: number;
+  courtId: string;
 }
 interface IPopup {
   title: string;
@@ -188,8 +189,8 @@ const Popup: React.FC<PopupProps & IPopup> = ({
       break;
     }
     case PopupType.DISPUTE_CREATED: {
-      const { disputeId } = props as IDisputeCreated;
-      PopupComponent = <DisputeCreated disputeId={disputeId} />;
+      const { courtId } = props as IDisputeCreated;
+      PopupComponent = <DisputeCreated courtId={courtId} />;
       break;
     }
     default:

web/src/hooks/queries/useCourtDetails.ts

@@ -17,6 +17,7 @@ const courtDetailsQuery = graphql(`
       stake
       paidETH
       paidPNK
+      timesPerPeriod
     }
   }
 `);

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

@@ -17,6 +17,7 @@ import { useDisputeKitClassicIsVoteActive } from "hooks/contracts/generated";
 import VoteIcon from "assets/svgs/icons/voted.svg";
 import InfoCircle from "tsx:svgs/icons/info-circle.svg";
 import { responsiveSize } from "styles/responsiveSize";
+import { formatDate } from "utils/date";
 
 const Container = styled.div`
   padding: ${responsiveSize(16, 32)};
@@ -35,12 +36,6 @@ const InfoContainer = styled.div`
   }
 `;
 
-function formatDate(unixTimestamp: number): string {
-  const date = new Date(unixTimestamp * 1000);
-  const options: Intl.DateTimeFormatOptions = { month: "long", day: "2-digit", year: "numeric" };
-  return date.toLocaleDateString("en-US", options);
-}
-
 interface IVoting {
   arbitrable?: `0x${string}`;
   currentPeriodIndex?: number;

web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx

@@ -19,6 +19,7 @@ const StyledButton = styled(Button)``;
 const SubmitDisputeButton: React.FC = () => {
   const publicClient = usePublicClient();
   const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [courtId, setCourtId] = useState("");
   const [disputeId, setDisputeId] = useState<number>();
 
   const { disputeTemplate, disputeData, resetDisputeData, isSubmittingCase, setIsSubmittingCase } =
@@ -27,7 +28,7 @@ const SubmitDisputeButton: React.FC = () => {
   const { config: submitCaseConfig } = usePrepareDisputeResolverCreateDisputeForTemplate({
     enabled: isTemplateValid(disputeTemplate),
     args: [
-      prepareArbitratorExtradata(disputeData.courtId, disputeData.numberOfJurors, 1), //TODO: decide which dispute kit to use
+      prepareArbitratorExtradata(disputeData.courtId ?? "1", disputeData.numberOfJurors, 1), //TODO: decide which dispute kit to use
       JSON.stringify(disputeTemplate),
       "",
       BigInt(disputeTemplate.answers.length),
@@ -58,6 +59,7 @@ const SubmitDisputeButton: React.FC = () => {
                   if (res.status === "success") {
                     const id = retrieveDisputeId(res.logs[1]);
                     setDisputeId(Number(id));
+                    setCourtId(disputeData.courtId ?? "1");
                     setIsPopupOpen(true);
                   }
 
@@ -77,6 +79,7 @@ const SubmitDisputeButton: React.FC = () => {
           popupType={PopupType.DISPUTE_CREATED}
           setIsOpen={setIsPopupOpen}
           disputeId={disputeId}
+          courtId={courtId}
         />
       )}
     </>

web/src/utils/date.ts

@@ -19,3 +19,9 @@ export function getOneYearAgoTimestamp(): number {
   const currentTime = new Date().getTime() / 1000;
   return currentTime - 31536000; // One year in seconds
 }
+
+export function formatDate(unixTimestamp: number): string {
+  const date = new Date(unixTimestamp * 1000);
+  const options: Intl.DateTimeFormatOptions = { month: "long", day: "2-digit", year: "numeric" };
+  return date.toLocaleDateString("en-US", options);
+}