Merge pull request #1982 from kleros/feat/batch-disputes

Feat/batch disputes

Author: alcercu

web/src/app.tsx

@@ -26,6 +26,7 @@ import Loader from "components/Loader";
 import Layout from "layout/index";
 
 import ErrorFallback from "./components/ErrorFallback";
+import AttachmentDisplay from "./pages/AttachmentDisplay";
 import { SentryRoutes } from "./utils/sentry";
 
 const App: React.FC = () => {
@@ -104,6 +105,14 @@ const App: React.FC = () => {
                             </Suspense>
                           }
                         />
+                        <Route
+                          path="attachment/*"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <AttachmentDisplay />
+                            </Suspense>
+                          }
+                        />
                         <Route path="*" element={<h1>Page not found</h1>} />
                       </Route>
                     </SentryRoutes>

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

@@ -71,13 +71,13 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
     <Container>
       <StyledP>Policy documents:</StyledP>
       {!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
-        <StyledInternalLink to={`attachment/?url=${getIpfsUrl(attachment.uri)}`}>
+        <StyledInternalLink to={`/attachment/?title=${"Case Policy"}&url=${getIpfsUrl(attachment.uri)}`}>
           <StyledPaperclipIcon />
           {attachment.label ?? "Attachment"}
         </StyledInternalLink>
       ) : null}
       {isUndefined(disputePolicyURI) ? null : (
-        <StyledInternalLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
+        <StyledInternalLink to={`/attachment/?title=${"Dispute Policy"}&url=${getIpfsUrl(disputePolicyURI)}`}>
           <StyledPolicyIcon />
           Dispute Policy
         </StyledInternalLink>

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

@@ -1,18 +1,37 @@
 import React, { useCallback } from "react";
+import styled from "styled-components";
 
 import { useAccount } from "wagmi";
+
 import { useAtlasProvider } from "@kleros/kleros-app";
 import { Button } from "@kleros/ui-components-library";
+
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledInfo = styled.p`
+  margin: 0;
+  padding: 0;
+`;
+
 interface IEnsureAuth {
   children: React.ReactElement;
+  message?: string;
+  buttonText?: string;
   className?: string;
 }
 
-const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
+const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonText, className }) => {
   const { address } = useAccount();
   const { isVerified, isSigningIn, authoriseUser } = useAtlasProvider();
+
   const handleClick = useCallback(() => {
     infoToast(`Signing in User...`);
 
@@ -26,13 +45,16 @@ const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
   return isVerified ? (
     children
   ) : (
-    <Button
-      text="Sign In"
-      onClick={handleClick}
-      disabled={isSigningIn || !address}
-      isLoading={isSigningIn}
-      {...{ className }}
-    />
+    <Container>
+      {message ? <StyledInfo>{message}</StyledInfo> : null}
+      <Button
+        text={buttonText ?? "Sign In"}
+        onClick={handleClick}
+        disabled={isSigningIn || !address}
+        isLoading={isSigningIn}
+        {...{ className }}
+      />
+    </Container>
   );
 };
 

web/src/components/DisputePreview/Policies.tsx

@@ -258,7 +258,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
         </BottomLeftContent>
         {fileURI && fileURI !== "-" ? (
           <FileLinkContainer>
-            <StyledInternalLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
+            <StyledInternalLink to={`/attachment/?title=${"Evidence File"}&url=${getIpfsUrl(fileURI)}`}>
               <AttachmentIcon />
               <AttachedFileText />
             </StyledInternalLink>

web/src/components/EnsureAuth.tsx

@@ -22,6 +22,7 @@ const IconContainer = styled.button`
 
 const StyledEllipseIcon = styled(Ellipse)<{ isDisabled?: boolean }>`
   circle {
+    fill: ${({ theme }) => theme.primaryBlue};
     ${({ isDisabled }) =>
       isDisabled &&
       css`

web/src/components/EvidenceCard.tsx

@@ -1,12 +1,15 @@
-import React, { createContext, useState, useContext, useMemo, useCallback } from "react";
+import React, { createContext, useState, useContext, useMemo, useCallback, useEffect } from "react";
 
+import { useLocation } from "react-router-dom";
 import { Address } from "viem";
 
 import { DEFAULT_CHAIN } from "consts/chains";
 import { klerosCoreAddress } from "hooks/contracts/generated";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { isEmpty, isUndefined } from "utils/index";
 
+export const MIN_DISPUTE_BATCH_SIZE = 2;
+
 export type Answer = {
   id: string;
   title: string;
@@ -59,6 +62,10 @@ interface INewDisputeContext {
   setIsSubmittingCase: (isSubmittingCase: boolean) => void;
   isPolicyUploading: boolean;
   setIsPolicyUploading: (isPolicyUploading: boolean) => void;
+  isBatchCreation: boolean;
+  setIsBatchCreation: (isBatchCreation: boolean) => void;
+  batchSize: number;
+  setBatchSize: (batchSize?: number) => void;
 }
 
 const getInitialDisputeData = (): IDisputeData => ({
@@ -92,13 +99,26 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
   const [disputeData, setDisputeData] = useLocalStorage<IDisputeData>("disputeData", initialDisputeData);
   const [isSubmittingCase, setIsSubmittingCase] = useState<boolean>(false);
   const [isPolicyUploading, setIsPolicyUploading] = useState<boolean>(false);
+  const [isBatchCreation, setIsBatchCreation] = useState<boolean>(false);
+  const [batchSize, setBatchSize] = useLocalStorage<number>("disputeBatchSize", MIN_DISPUTE_BATCH_SIZE);
 
   const disputeTemplate = useMemo(() => constructDisputeTemplate(disputeData), [disputeData]);
+  const location = useLocation();
 
   const resetDisputeData = useCallback(() => {
     const freshData = getInitialDisputeData();
     setDisputeData(freshData);
-  }, [setDisputeData]);
+    setBatchSize(MIN_DISPUTE_BATCH_SIZE);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    // Cleanup function to clear local storage when user leaves the route
+    if (location.pathname.includes("/resolver") || location.pathname.includes("/attachment")) return;
+
+    resetDisputeData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
 
   const contextValues = useMemo(
     () => ({
@@ -110,8 +130,23 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
       setIsSubmittingCase,
       isPolicyUploading,
       setIsPolicyUploading,
+      isBatchCreation,
+      setIsBatchCreation,
+      batchSize,
+      setBatchSize,
     }),
-    [disputeData, disputeTemplate, resetDisputeData, isSubmittingCase, isPolicyUploading, setDisputeData]
+    [
+      disputeData,
+      disputeTemplate,
+      resetDisputeData,
+      isSubmittingCase,
+      isPolicyUploading,
+      setDisputeData,
+      isBatchCreation,
+      setIsBatchCreation,
+      batchSize,
+      setBatchSize,
+    ]
   );
 
   return <NewDisputeContext.Provider value={contextValues}>{children}</NewDisputeContext.Provider>;

web/src/components/PlusMinusField.tsx

@@ -5,8 +5,8 @@ import { executeActions } from "@kleros/kleros-sdk/src/dataMappings/executeActio
 import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
 import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate";
 
-import { useGraphqlBatcher } from "context/GraphqlBatcher";
 import { DEFAULT_CHAIN } from "consts/chains";
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
 import { debounceErrorToast } from "utils/debounceErrorToast";
 import { isUndefined } from "utils/index";
 

web/src/context/NewDisputeContext.tsx

@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { REFETCH_INTERVAL, STALE_TIME } from "consts/index";
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+
+import { graphql } from "src/graphql";
+import { RoundDetailsQuery } from "src/graphql/graphql";
+import { isUndefined } from "src/utils";
+
+const roundDetailsQuery = graphql(`
+  query RoundDetails($roundID: ID!) {
+    round(id: $roundID) {
+      court {
+        id
+      }
+      nbVotes
+      disputeKit {
+        id
+      }
+    }
+  }
+`);
+
+export const useRoundDetailsQuery = (disputeId?: string, roundIndex?: number) => {
+  const isEnabled = !isUndefined(disputeId) && !isUndefined(roundIndex);
+  const { graphqlBatcher } = useGraphqlBatcher();
+
+  return useQuery<RoundDetailsQuery>({
+    queryKey: [`roundDetailsQuery${disputeId}-${roundIndex}`],
+    enabled: isEnabled,
+    refetchInterval: REFETCH_INTERVAL,
+    staleTime: STALE_TIME,
+    queryFn: async () =>
+      await graphqlBatcher.fetch({
+        id: crypto.randomUUID(),
+        document: roundDetailsQuery,
+        variables: { roundID: `${disputeId}-${roundIndex}` },
+      }),
+  });
+};