diff --git a/web/src/components/Popup/Description/DisputeCreated.tsx b/web/src/components/Popup/Description/DisputeCreated.tsx index a7dd8f632..22d4a10d7 100644 --- a/web/src/components/Popup/Description/DisputeCreated.tsx +++ b/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 = ({ disputeId }) => { +const DisputeCreated: React.FC = ({ courtId }) => { + const { data: courtDetails } = useCourtDetails(courtId); + + const date = useMemo( + () => + !isUndefined(courtDetails?.court?.timesPerPeriod) + ? calculateMinResolveTime(courtDetails?.court.timesPerPeriod) + : undefined, + [courtDetails] + ); + return ( πŸŽ‰ Your case was successfully submitted to Kleros. A pool of jurors will be drawn to evaluate the case and vote - at most April 25,2021. πŸŽ‰ + at most{" "} + {isUndefined(date) ? ( + + ) : ( + {formatDate(date)} + )} + . πŸŽ‰ Now, it’s time to submit evidence to support the case. ); }; + +const calculateMinResolveTime = (timesPerPeriod: string[]) => + timesPerPeriod.reduce((acc, val) => acc + parseInt(val), 0) + getCurrentTime(); + export default DisputeCreated; diff --git a/web/src/components/Popup/index.tsx b/web/src/components/Popup/index.tsx index 3f7b3eb4f..ea19f7007 100644 --- a/web/src/components/Popup/index.tsx +++ b/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 = ({ break; } case PopupType.DISPUTE_CREATED: { - const { disputeId } = props as IDisputeCreated; - PopupComponent = ; + const { courtId } = props as IDisputeCreated; + PopupComponent = ; break; } default: diff --git a/web/src/hooks/queries/useCourtDetails.ts b/web/src/hooks/queries/useCourtDetails.ts index 14c708e34..0cbf5546c 100644 --- a/web/src/hooks/queries/useCourtDetails.ts +++ b/web/src/hooks/queries/useCourtDetails.ts @@ -17,6 +17,7 @@ const courtDetailsQuery = graphql(` stake paidETH paidPNK + timesPerPeriod } } `); diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx index 087ad4199..813c27f48 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx +++ b/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; diff --git a/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx b/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx index 0252f33b3..3b2080553 100644 --- a/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx +++ b/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(); 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} /> )} diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts index c0d586ac4..148ac085b 100644 --- a/web/src/utils/date.ts +++ b/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); +}