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}` },
+      }),
+  });
+};

web/src/hooks/queries/usePopulatedDisputeData.ts

@@ -37,10 +37,15 @@ const useTransactionBatcher = (
   options: TransactionBatcherOptions = { enabled: true }
 ) => {
   const validatedConfigs = configs ?? [];
+  const totalValue = validatedConfigs.reduce((sum, config) => {
+    return sum + (config?.value ?? BigInt(0));
+  }, BigInt(0));
+
   const {
     data: batchConfig,
     isLoading,
     isError,
+    error,
   } = useSimulateTransactionBatcherBatchSend({
     query: {
       enabled: !isUndefined(configs) && options.enabled,
@@ -50,6 +55,7 @@ const useTransactionBatcher = (
       validatedConfigs.map((config) => config?.value ?? BigInt(0)),
       validatedConfigs.map((config) => encodeFunctionData(config)),
     ],
+    value: totalValue,
   });
   const { writeContractAsync } = useWriteTransactionBatcherBatchSend();
 
@@ -58,7 +64,7 @@ const useTransactionBatcher = (
     [writeContractAsync]
   );
 
-  return { executeBatch, batchConfig, isError, isLoading };
+  return { executeBatch, batchConfig, isError, isLoading, error };
 };
 
 export default useTransactionBatcher;

web/src/hooks/queries/useRoundDetailsQuery.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate, useLocation, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -64,24 +64,13 @@ const StyledButton = styled(Button)`
   }
 `;
 
-const Header: React.FC = () => {
+const Header: React.FC<{ title: string }> = ({ title }) => {
   const navigate = useNavigate();
-  const { id } = useParams();
-  const location = useLocation();
 
   const handleReturn = () => {
     navigate(-1);
   };
 
-  let title = "";
-  if (location.pathname.includes("policy")) {
-    title = `Policy - Case #${id}`;
-  } else if (location.pathname.includes("evidence")) {
-    title = "Attached File";
-  } else if (location.pathname.includes("attachment")) {
-    title = `Attachment - Case #${id}`;
-  }
-
   return (
     <Container>
       <TitleContainer>

web/src/hooks/useTransactionBatcher.tsx

@@ -0,0 +1,83 @@
+import React, { lazy, Suspense } from "react";
+import styled from "styled-components";
+
+import { useSearchParams } from "react-router-dom";
+
+import NewTabIcon from "svgs/icons/new-tab.svg";
+
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
+
+import { ExternalLink } from "components/ExternalLink";
+import Loader from "components/Loader";
+
+import Header from "./Header";
+
+const FileViewer = lazy(() => import("components/FileViewer"));
+
+const Container = styled.div`
+  width: 100%;
+  background-color: ${({ theme }) => theme.lightBackground};
+  padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-bottom: calc(76px + (96 - 76) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  max-width: ${MAX_WIDTH_LANDSCAPE};
+  margin: 0 auto;
+`;
+
+const AttachmentContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const LoaderContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const StyledExternalLink = styled(ExternalLink)`
+  display: flex;
+  align-items: center;
+  align-self: flex-end;
+  gap: 8px;
+`;
+
+const StyledNewTabIcon = styled(NewTabIcon)`
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const AttachmentDisplay: React.FC = () => {
+  const [searchParams] = useSearchParams();
+
+  const url = searchParams.get("url");
+  const title = searchParams.get("title") ?? "Attachment";
+  return (
+    <Container>
+      <AttachmentContainer>
+        <Header {...{ title }} />
+        {url ? (
+          <>
+            <StyledExternalLink to={url} rel="noreferrer" target="_blank">
+              Open in new tab <StyledNewTabIcon />
+            </StyledExternalLink>
+            <Suspense
+              fallback={
+                <LoaderContainer>
+                  <Loader width={"48px"} height={"48px"} />
+                </LoaderContainer>
+              }
+            >
+              <FileViewer url={url} />
+            </Suspense>
+          </>
+        ) : null}
+      </AttachmentContainer>
+    </Container>
+  );
+};
+
+export default AttachmentDisplay;

web/src/pages/Cases/AttachmentDisplay/Header.tsx renamed to web/src/pages/AttachmentDisplay/Header.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { Routes, Route } from "react-router-dom";
+
 import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
-import { Routes, Route } from "react-router-dom";
-
-import AttachmentDisplay from "./AttachmentDisplay";
 import CaseDetails from "./CaseDetails";
 import CasesFetcher from "./CasesFetcher";
 
@@ -28,9 +27,6 @@ const Cases: React.FC = () => (
   <Container>
     <Routes>
       <Route path="/display/:page/:order/:filter" element={<CasesFetcher />} />
-      <Route path="/:id/evidence/attachment/*" element={<AttachmentDisplay />} />
-      <Route path="/:id/overview/policy/attachment/*" element={<AttachmentDisplay />} />
-      <Route path="/:id/overview/attachment/*" element={<AttachmentDisplay />} />
       <Route path="/:id/*" element={<CaseDetails />} />
     </Routes>
   </Container>

web/src/pages/AttachmentDisplay/index.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Card, Radio } from "@kleros/ui-components-library";
+
+import CaseFromScratchIcon from "svgs/icons/caseFromScratch.svg";
+import DuplicateCaseIcon from "svgs/icons/duplicateCase.svg";
+
+import { responsiveSize } from "styles/responsiveSize";
+
+import { Divider } from "components/Divider";
+import { NumberInputField } from "components/NumberInputField";
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+export enum CreationMethod {
+  Scratch,
+  Duplicate,
+}
+
+const StyledCard = styled(Card)<{ selected?: boolean }>`
+  height: fit-content;
+  width: 100%;
+  background: ${({ theme, selected }) => (selected ? theme.whiteBackground : theme.lightBackground)};
+`;
+
+const CardTopContent = styled.div`
+  width: 100%;
+  padding: 8px ${responsiveSize(16, 24)};
+  display: flex;
+  align-items: center;
+  gap: ${responsiveSize(8, 16)};
+`;
+
+const CardBottomContent = styled.div`
+  width: 100%;
+  padding: 16px ${responsiveSize(16, 24)};
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${responsiveSize(8, 16)};
+`;
+
+const Icon = styled.svg`
+  width: 48px;
+  height: 48px;
+  circle {
+    fill: ${({ theme }) => theme.lightBlue};
+    stroke: ${({ theme }) => theme.primaryBlue};
+  }
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const StyledP = styled.p`
+  padding: 0;
+  font-size: 16px;
+  flex: 1;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const StyledRadio = styled(Radio)`
+  align-self: center;
+  padding-left: 16px;
+
+  > span {
+    transform: translateY(-50%);
+  }
+`;
+
+const Label = styled.label`
+  font-size: 14px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const StyledNumberField = styled(NumberInputField)`
+  max-width: 128px;
+  input {
+    border: 1px solid ${({ theme, variant }) => (variant === "error" ? theme.error : theme.stroke)};
+  }
+`;
+
+const ErrorMsg = styled.small`
+  font-size: 16px;
+  font-weight: 400;
+  color: ${({ theme }) => theme.error};
+`;
+
+interface ICreationCard {
+  cardMethod: CreationMethod;
+  selectedMethod: CreationMethod;
+  setCreationMethod: (method: CreationMethod) => void;
+  disputeID?: string;
+  setDisputeID?: (id?: string) => void;
+  isInvalidDispute?: boolean;
+}
+
+const CreationCard: React.FC<ICreationCard> = ({
+  cardMethod,
+  selectedMethod,
+  setCreationMethod,
+  disputeID,
+  setDisputeID,
+  isInvalidDispute,
+}) => {
+  return (
+    <StyledCard hover onClick={() => setCreationMethod(cardMethod)} selected={cardMethod === selectedMethod}>
+      <CardTopContent>
+        <Icon as={cardMethod === CreationMethod.Scratch ? CaseFromScratchIcon : DuplicateCaseIcon} />
+        <StyledP>
+          {cardMethod === CreationMethod.Scratch ? "Create a case from scratch" : "Duplicate an existing case"}
+        </StyledP>
+        <StyledRadio label="" checked={cardMethod === selectedMethod} onChange={() => setCreationMethod(cardMethod)} />
+      </CardTopContent>
+      {cardMethod === CreationMethod.Duplicate && selectedMethod === CreationMethod.Duplicate ? (
+        <>
+          <Divider />
+          <CardBottomContent>
+            <WithHelpTooltip tooltipMsg={'The case ID can be found on the top left of the Case page. eg. "Case #300".'}>
+              <Label>{"Enter the cases's ID"}</Label>
+            </WithHelpTooltip>
+            <StyledNumberField
+              placeholder="eg. 45"
+              value={disputeID}
+              onChange={(val) => {
+                if (setDisputeID) setDisputeID(val.trim() !== "" ? val : undefined);
+              }}
+              variant={isInvalidDispute ? "error" : undefined}
+            />
+            {isInvalidDispute ? <ErrorMsg>Invalid dispute</ErrorMsg> : null}
+          </CardBottomContent>
+        </>
+      ) : null}
+    </StyledCard>
+  );
+};
+
+export default CreationCard;

web/src/pages/Cases/AttachmentDisplay/index.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useMemo, useState } from "react";
+import styled, { css } from "styled-components";
+
+import { useNavigate } from "react-router-dom";
+import { useDebounce } from "react-use";
+
+import { Button } from "@kleros/ui-components-library";
+
+import { AliasArray, Answer, useNewDisputeContext } from "context/NewDisputeContext";
+
+import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
+import { usePopulatedDisputeData } from "queries/usePopulatedDisputeData";
+import { useRoundDetailsQuery } from "queries/useRoundDetailsQuery";
+
+import { isUndefined } from "src/utils";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
+import Header from "../Header";
+
+import CreationCard, { CreationMethod } from "./CreationCard";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 84vw;
+
+  ${landscapeStyle(
+    () => css`
+      width: ${responsiveSize(442, 700, 900)};
+
+      padding-bottom: 240px;
+    `
+  )}
+`;
+
+const CardContainer = styled.div`
+  width: 100%;
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+`;
+
+const Landing: React.FC = () => {
+  const navigate = useNavigate();
+  const [creationMethod, setCreationMethod] = useState<CreationMethod>(CreationMethod.Scratch);
+
+  const [disputeID, setDisputeID] = useState<string>();
+  const [debouncedDisputeID, setDebouncedDisputeID] = useState<string>();
+  const { disputeData, setDisputeData } = useNewDisputeContext();
+  useDebounce(() => setDebouncedDisputeID(disputeID), 500, [disputeID]);
+
+  const { data: dispute, isLoading: isLoadingDispute } = useDisputeDetailsQuery(debouncedDisputeID);
+  const {
+    data: populatedDispute,
+    isError: isErrorPopulatedDisputeQuery,
+    isLoading: isPopulatingDispute,
+  } = usePopulatedDisputeData(debouncedDisputeID, dispute?.dispute?.arbitrated.id as `0x${string}`);
+
+  // we want the genesis round's court and numberOfJurors
+  const {
+    data: roundData,
+    isError: isErrorRoundQuery,
+    isLoading: isLoadingRound,
+  } = useRoundDetailsQuery(debouncedDisputeID, 0);
+
+  const isLoading = useMemo(
+    () => isLoadingDispute || isPopulatingDispute || isLoadingRound,
+    [isLoadingDispute, isPopulatingDispute, isLoadingRound]
+  );
+
+  const isInvalidDispute = useMemo(() => {
+    if (isUndefined(debouncedDisputeID) || isLoading) return false;
+    if (dispute?.dispute === null) return true;
+    if (!isUndefined(populatedDispute)) {
+      return isErrorRoundQuery || isErrorPopulatedDisputeQuery || Object.keys(populatedDispute).length === 0;
+    }
+    return false;
+  }, [debouncedDisputeID, isLoading, populatedDispute, isErrorRoundQuery, isErrorPopulatedDisputeQuery, dispute]);
+
+  useEffect(() => {
+    if (isUndefined(populatedDispute) || isUndefined(roundData) || isInvalidDispute) return;
+
+    const answers = populatedDispute.answers.reduce<Answer[]>((acc, val) => {
+      acc.push({ ...val, id: parseInt(val.id, 16).toString() });
+      return acc;
+    }, []);
+
+    let aliasesArray: AliasArray[] | undefined;
+    if (!isUndefined(populatedDispute.aliases)) {
+      aliasesArray = Object.entries(populatedDispute.aliases).map(([key, value], index) => ({
+        name: key,
+        address: value,
+        id: (index + 1).toString(),
+      }));
+    }
+
+    setDisputeData({
+      ...disputeData,
+      title: populatedDispute.title,
+      description: populatedDispute.description,
+      category: populatedDispute.category,
+      policyURI: populatedDispute.policyURI,
+      question: populatedDispute.question,
+      courtId: roundData.round?.court.id,
+      numberOfJurors: roundData.round?.nbVotes,
+      disputeKitId: parseInt(roundData.round?.disputeKit.id ?? "1", 10),
+      answers,
+      aliasesArray: aliasesArray ?? disputeData.aliasesArray,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [populatedDispute, roundData, isInvalidDispute]);
+
+  return (
+    <Container>
+      <Header text="Create a case" />
+      <CardContainer>
+        <CreationCard
+          cardMethod={CreationMethod.Scratch}
+          selectedMethod={creationMethod}
+          {...{ disputeID, setDisputeID, setCreationMethod, isInvalidDispute }}
+        />
+        <CreationCard
+          cardMethod={CreationMethod.Duplicate}
+          selectedMethod={creationMethod}
+          {...{ disputeID, setDisputeID, setCreationMethod, isInvalidDispute }}
+        />
+      </CardContainer>
+
+      <Button
+        text="Next"
+        isLoading={isLoading}
+        disabled={
+          isLoading ||
+          isInvalidDispute ||
+          (creationMethod === CreationMethod.Duplicate && isUndefined(debouncedDisputeID))
+        }
+        onClick={() => navigate("/resolver/title")}
+      />
+    </Container>
+  );
+};
+
+export default Landing;

web/src/pages/Cases/index.tsx

@@ -0,0 +1,120 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+
+import { useNavigate } from "react-router-dom";
+import { useAccount, useBalance, usePublicClient } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import { DEFAULT_CHAIN } from "consts/chains";
+import { MIN_DISPUTE_BATCH_SIZE, useNewDisputeContext } from "context/NewDisputeContext";
+import { disputeResolverAbi, disputeResolverAddress } from "hooks/contracts/generated";
+import useTransactionBatcher from "hooks/useTransactionBatcher";
+import { isUndefined } from "utils/index";
+import { parseWagmiError } from "utils/parseWagmiError";
+import { prepareArbitratorExtradata } from "utils/prepareArbitratorExtradata";
+import { wrapWithToast } from "utils/wrapWithToast";
+
+import { EnsureChain } from "components/EnsureChain";
+import { ErrorButtonMessage } from "components/ErrorButtonMessage";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
+
+import { isTemplateValid } from "./SubmitDisputeButton";
+
+const StyledButton = styled(Button)``;
+
+const SubmitBatchDisputesButton: React.FC = () => {
+  const publicClient = usePublicClient();
+  const navigate = useNavigate();
+  const { disputeTemplate, disputeData, resetDisputeData, isSubmittingCase, setIsSubmittingCase, batchSize } =
+    useNewDisputeContext();
+
+  const { address, chainId } = useAccount();
+  const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
+
+  const insufficientBalance = useMemo(() => {
+    const arbitrationCost = disputeData.arbitrationCost ? BigInt(disputeData.arbitrationCost) : BigInt(0);
+    return userBalance && userBalance.value < arbitrationCost * BigInt(batchSize ?? MIN_DISPUTE_BATCH_SIZE);
+  }, [userBalance, disputeData, batchSize]);
+
+  const {
+    executeBatch,
+    batchConfig,
+    isLoading: isLoadingConfig,
+    error,
+    isError,
+  } = useTransactionBatcher(
+    Array.from({ length: batchSize }, () => ({
+      abi: disputeResolverAbi,
+      address: disputeResolverAddress[chainId ?? DEFAULT_CHAIN],
+      functionName: "createDisputeForTemplate",
+      args: [
+        prepareArbitratorExtradata(
+          disputeData.courtId ?? "1",
+          disputeData.numberOfJurors ?? 3,
+          disputeData.disputeKitId ?? 1
+        ),
+        JSON.stringify(disputeTemplate),
+        "",
+        BigInt(disputeTemplate.answers.length),
+      ],
+      value: BigInt(disputeData.arbitrationCost ?? 0),
+    })),
+    {
+      enabled: !insufficientBalance && isTemplateValid(disputeTemplate),
+    }
+  );
+
+  const isButtonDisabled = useMemo(
+    () =>
+      isError ||
+      isSubmittingCase ||
+      !isTemplateValid(disputeTemplate) ||
+      isBalanceLoading ||
+      insufficientBalance ||
+      isLoadingConfig,
+    [isSubmittingCase, insufficientBalance, isBalanceLoading, disputeTemplate, isLoadingConfig, isError]
+  );
+
+  const errorMsg = useMemo(() => {
+    if (insufficientBalance) return "Insufficient balance";
+    else if (error) {
+      return parseWagmiError(error);
+    }
+    return null;
+  }, [error, insufficientBalance]);
+
+  return (
+    <EnsureChain>
+      <div>
+        <StyledButton
+          text="Create cases"
+          disabled={isButtonDisabled}
+          isLoading={(isSubmittingCase || isBalanceLoading || isLoadingConfig) && !insufficientBalance}
+          onClick={() => {
+            if (batchConfig && publicClient) {
+              setIsSubmittingCase(true);
+              wrapWithToast(async () => await executeBatch(batchConfig), publicClient)
+                .then((res) => {
+                  if (res.status && !isUndefined(res.result)) {
+                    resetDisputeData();
+                    navigate("/cases/display/1/desc/all");
+                  }
+                })
+                .finally(() => {
+                  setIsSubmittingCase(false);
+                });
+            }
+          }}
+        />
+        {errorMsg && (
+          <ErrorButtonMessage>
+            <ClosedCircleIcon /> {errorMsg}
+          </ErrorButtonMessage>
+        )}
+      </div>
+    </EnsureChain>
+  );
+};
+
+export default SubmitBatchDisputesButton;

web/src/pages/Resolver/Landing/CreationCard.tsx

@@ -42,7 +42,12 @@ const SubmitDisputeButton: React.FC = () => {
     return userBalance && userBalance.value < arbitrationCost;
   }, [userBalance, disputeData]);
 
-  const { data: submitCaseConfig, error } = useSimulateDisputeResolverCreateDisputeForTemplate({
+  const {
+    data: submitCaseConfig,
+    error,
+    isLoading: isLoadingConfig,
+    isError,
+  } = useSimulateDisputeResolverCreateDisputeForTemplate({
     query: {
       enabled: !insufficientBalance && isTemplateValid(disputeTemplate),
     },
@@ -62,8 +67,14 @@ const SubmitDisputeButton: React.FC = () => {
   const { writeContractAsync: submitCase } = useWriteDisputeResolverCreateDisputeForTemplate();
 
   const isButtonDisabled = useMemo(
-    () => isSubmittingCase || !isTemplateValid(disputeTemplate) || isBalanceLoading || insufficientBalance,
-    [isSubmittingCase, insufficientBalance, isBalanceLoading, disputeTemplate]
+    () =>
+      isError ||
+      isSubmittingCase ||
+      !isTemplateValid(disputeTemplate) ||
+      isBalanceLoading ||
+      insufficientBalance ||
+      isLoadingConfig,
+    [isSubmittingCase, insufficientBalance, isBalanceLoading, disputeTemplate, isLoadingConfig, isError]
   );
 
   const errorMsg = useMemo(() => {
@@ -82,9 +93,9 @@ const SubmitDisputeButton: React.FC = () => {
           <StyledButton
             text="Submit the case"
             disabled={isButtonDisabled}
-            isLoading={(isSubmittingCase || isBalanceLoading) && !insufficientBalance}
+            isLoading={(isSubmittingCase || isBalanceLoading || isLoadingConfig) && !insufficientBalance}
             onClick={() => {
-              if (submitCaseConfig) {
+              if (submitCaseConfig && publicClient) {
                 setIsSubmittingCase(true);
                 wrapWithToast(async () => await submitCase(submitCaseConfig.request), publicClient)
                   .then((res) => {
@@ -123,7 +134,7 @@ const SubmitDisputeButton: React.FC = () => {
   );
 };
 
-const isTemplateValid = (disputeTemplate: IDisputeTemplate) => {
+export const isTemplateValid = (disputeTemplate: IDisputeTemplate) => {
   const areVotingOptionsFilled =
     disputeTemplate.question !== "" &&
     disputeTemplate.answers.every((answer) => answer.title !== "" && answer.description !== "");

web/src/pages/Resolver/Landing/index.tsx

@@ -1,10 +1,15 @@
 import React from "react";
 import styled from "styled-components";
 
+import { useNewDisputeContext } from "context/NewDisputeContext";
+
+import { isUndefined } from "src/utils";
+
 import { responsiveSize } from "styles/responsiveSize";
 
 import NextButton from "./NextButton";
 import PreviousButton from "./PreviousButton";
+import SubmitBatchDisputesButton from "./SubmitBatchDisputesButton";
 import SubmitDisputeButton from "./SubmitDisputeButton";
 
 const Container = styled.div`
@@ -21,10 +26,13 @@ interface NavigationButtonsProps {
 }
 
 const NavigationButtons: React.FC<NavigationButtonsProps> = ({ prevRoute, nextRoute }) => {
+  const { isBatchCreation } = useNewDisputeContext();
+
+  const SubmitButton = isBatchCreation ? SubmitBatchDisputesButton : SubmitDisputeButton;
   return (
     <Container>
       <PreviousButton prevRoute={prevRoute} />
-      {prevRoute === "/resolver/policy" ? <SubmitDisputeButton /> : <NextButton nextRoute={nextRoute} />}
+      {isUndefined(nextRoute) ? <SubmitButton /> : <NextButton nextRoute={nextRoute} />}
     </Container>
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import styled, { css } from "styled-components";
 
 import { usePublicClient } from "wagmi";
@@ -44,6 +44,7 @@ const PersonFields: React.FC = () => {
   const publicClient = usePublicClient({ chainId: 1 });
 
   const debounceValidateAddress = (address: string, key: number) => {
+    if (isUndefined(publicClient)) return;
     // Clear the existing timer
     if (validationTimerRef.current) {
       clearTimeout(validationTimerRef.current);
@@ -59,6 +60,22 @@ const PersonFields: React.FC = () => {
       setDisputeData({ ...disputeData, aliasesArray: updatedAliases });
     }, 500);
   };
+
+  // in case of duplicate creation flow, aliasesArray will already be populated.
+  // validating addresses in case it is
+  useEffect(() => {
+    if (disputeData.aliasesArray && publicClient) {
+      disputeData.aliasesArray.map(async (alias, key) => {
+        const isValid = await validateAddress(alias.address, publicClient);
+        const updatedAliases = disputeData.aliasesArray;
+        if (isUndefined(updatedAliases) || isUndefined(updatedAliases[key])) return;
+        updatedAliases[key].isValid = isValid;
+
+        setDisputeData({ ...disputeData, aliasesArray: updatedAliases });
+      });
+    }
+  }, []);
+
   const handleAliasesWrite = (event: React.ChangeEvent<HTMLInputElement>) => {
     const key = parseInt(event.target.id.replace(/\D/g, ""), 10) - 1;
     const aliases = disputeData.aliasesArray;
@@ -68,7 +85,7 @@ const PersonFields: React.FC = () => {
     setDisputeData({ ...disputeData, aliasesArray: aliases });
 
     //since resolving ens is async, we update asynchronously too with debounce
-    event.target.name === "address" && debounceValidateAddress(event.target.value, key);
+    if (event.target.name === "address") debounceValidateAddress(event.target.value, key);
   };
 
   const showError = (alias: AliasArray) => {

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

@@ -4,15 +4,20 @@ import styled, { css } from "styled-components";
 import { useAtlasProvider, Roles } from "@kleros/kleros-app";
 import { FileUploader } from "@kleros/ui-components-library";
 
+import PolicyIcon from "svgs/icons/policy.svg";
+
 import { useNewDisputeContext } from "context/NewDisputeContext";
 import useIsDesktop from "hooks/useIsDesktop";
+import { getIpfsUrl } from "utils/getIpfsUrl";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
-import { getFileUploaderMsg } from "src/utils";
+import { getFileUploaderMsg, isUndefined } from "src/utils";
 
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
+import { InternalLink } from "components/InternalLink";
 import Header from "pages/Resolver/Header";
 
 import NavigationButtons from "../NavigationButtons";
@@ -54,6 +59,25 @@ const StyledFileUploader = styled(FileUploader)`
   }
 `;
 
+const StyledPolicyIcon = styled(PolicyIcon)`
+  width: 16px;
+  fill: ${({ theme }) => theme.primaryBlue};
+`;
+
+const StyledInternalLink = styled(InternalLink)`
+  ${hoverShortTransitionTiming}
+  display: flex;
+  gap: 4px;
+  align-self: flex-start;
+  margin-bottom: 32px;
+  margin-top: 32px;
+  &:hover {
+    svg {
+      fill: ${({ theme }) => theme.secondaryBlue};
+    }
+  }
+`;
+
 const Policy: React.FC = () => {
   const { disputeData, setDisputeData, setIsPolicyUploading } = useNewDisputeContext();
   const { uploadFile, roleRestrictions } = useAtlasProvider();
@@ -83,12 +107,18 @@ const Policy: React.FC = () => {
         criteria, a contract stating the rights and duties of the parties, or any set of pre-defined rules that are
         relevant to jurors' decision-making.
       </StyledLabel>
+
       <StyledFileUploader
         callback={handleFileUpload}
         variant={isDesktop ? "info" : undefined}
         msg={`You can attach additional information here. Important: the above description must reference the relevant parts of the file content.\n${getFileUploaderMsg(Roles.Policy, roleRestrictions)}`}
       />
-
+      {!isUndefined(disputeData.policyURI) ? (
+        <StyledInternalLink to={`/attachment/?title=${"Policy File"}&url=${getIpfsUrl(disputeData.policyURI)}`}>
+          <StyledPolicyIcon />
+          Inspect the uploaded policy
+        </StyledInternalLink>
+      ) : null}
       <NavigationButtons prevRoute="/resolver/notable-persons" nextRoute="/resolver/preview" />
     </Container>
   );

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

@@ -0,0 +1,185 @@
+import React, { useState } from "react";
+import styled, { css } from "styled-components";
+
+import { useDebounce } from "react-use";
+
+import { Card, Switch } from "@kleros/ui-components-library";
+
+import { CoinIds } from "consts/coingecko";
+import { useNewDisputeContext } from "context/NewDisputeContext";
+import { useCoinPrice } from "hooks/useCoinPrice";
+import { formatETH, formatUnitsWei, formatUSD } from "utils/format";
+
+import { isUndefined } from "src/utils";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+import { Divider } from "components/Divider";
+import PlusMinusField from "components/PlusMinusField";
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+const Container = styled(Card)`
+  width: 100%;
+  height: fit-content;
+`;
+
+const TopContent = styled.div`
+  width: 100%;
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+
+  span::before {
+    background-color: ${({ theme }) => theme.whiteBackground} !important;
+  }
+  ${landscapeStyle(
+    () => css`
+      padding: 0px 32px;
+    `
+  )}
+`;
+
+const BottomContent = styled.div`
+  width: 100%;
+  min-height: 64px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: start;
+  gap: 16px;
+  padding: 16px;
+
+  ${landscapeStyle(
+    () => css`
+      justify-content: space-between;
+      padding: 16px 32px;
+    `
+  )}
+`;
+
+const NumberDisplayContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  ${landscapeStyle(
+    () => css`
+      gap: 32px;
+    `
+  )}
+`;
+
+const NumberDisplay = styled.div`
+  min-width: 64px;
+  min-height: 64px;
+  background-color: ${({ theme }) => theme.lightBackground};
+  border: 1px solid ${({ theme }) => theme.stroke};
+  border-radius: 3px;
+  font-size: 32px;
+  color: ${({ theme }) => theme.primaryBlue};
+  text-align: center;
+  align-content: center;
+`;
+
+const Label = styled.p`
+  padding: 0;
+  margin: 0;
+  font-size: 16px;
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
+const Value = styled(Label)`
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const StyledPlusMinusField = styled(PlusMinusField)`
+  margin: 0;
+  path {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+`;
+
+const StyledP = styled.p`
+  padding: 0;
+  margin: 0;
+  font-size: 16px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const InfosContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+`;
+
+const Info = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+const BatchCreationCard: React.FC = () => {
+  const { disputeData, isBatchCreation, setIsBatchCreation, batchSize, setBatchSize } = useNewDisputeContext();
+  const [localBatchSize, setLocalBatchSize] = useState(batchSize);
+  useDebounce(() => setBatchSize(localBatchSize), 500, [localBatchSize]);
+
+  const { prices: pricesData } = useCoinPrice([CoinIds.ETH]);
+
+  const coinPrice = !isUndefined(pricesData) ? pricesData[CoinIds.ETH]?.price : undefined;
+
+  return (
+    <Container>
+      <TopContent>
+        <Switch checked={isBatchCreation} onChange={() => setIsBatchCreation(!isBatchCreation)} />
+        <WithHelpTooltip tooltipMsg="Batch Cases: You can create multiple copies of the case. ">
+          <StyledP>Create multiple cases at once</StyledP>
+        </WithHelpTooltip>
+      </TopContent>
+      {isBatchCreation ? (
+        <>
+          <Divider />
+          <BottomContent>
+            <NumberDisplayContainer>
+              <NumberDisplay>{localBatchSize}</NumberDisplay>
+              <StyledPlusMinusField
+                minValue={2}
+                currentValue={localBatchSize}
+                updateValue={(val) => setLocalBatchSize(val)}
+              />
+              <Label>(Number of cases to be created)</Label>
+            </NumberDisplayContainer>
+            <InfosContainer>
+              <Info>
+                <Label>Jurors per case:</Label>
+                <Value>{disputeData.numberOfJurors}</Value>
+              </Info>
+              <Info>
+                <Label>Total:</Label>
+                <Value>{disputeData.numberOfJurors * localBatchSize}</Value>
+              </Info>
+              <Info>
+                <Label>Total cost:</Label>
+                <Value>{formatETH(BigInt(disputeData.arbitrationCost ?? 0) * BigInt(localBatchSize))} ETH </Value>
+                {!isUndefined(coinPrice) ? (
+                  <Label>
+                    ~
+                    {formatUSD(
+                      Number(formatUnitsWei(BigInt(disputeData.arbitrationCost ?? 0) * BigInt(localBatchSize))) *
+                        coinPrice
+                    )}
+                  </Label>
+                ) : null}
+              </Info>
+            </InfosContainer>
+          </BottomContent>
+        </>
+      ) : null}
+    </Container>
+  );
+};
+
+export default BatchCreationCard;

web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx

@@ -17,20 +17,24 @@ import { Divider } from "components/Divider";
 
 import NavigationButtons from "../NavigationButtons";
 
+import BatchCreationCard from "./BatchCreationCard";
+
 const Container = styled.div`
   width: 100%;
   padding: 0px ${responsiveSize(10, 130)};
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 16px;
 `;
 
 const StyledCard = styled(Card)`
   width: 100%;
   height: auto;
   min-height: 100px;
-  margin-bottom: ${responsiveSize(130, 70)};
+  position: relative;
 `;
+
 const PreviewContainer = styled.div`
   width: 100%;
   height: auto;
@@ -52,6 +56,15 @@ const Header = styled.h2`
   )}
 `;
 
+const Overlay = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+`;
+
 const Preview: React.FC = () => {
   const { disputeData, disputeTemplate } = useNewDisputeContext();
   const { data: courtPolicy } = useCourtPolicy(disputeData.courtId);
@@ -61,6 +74,7 @@ const Preview: React.FC = () => {
     <Container>
       <Header>Preview</Header>
       <StyledCard>
+        <Overlay />
         <PreviewContainer>
           <DisputeContext disputeDetails={disputeTemplate} />
           <Divider />
@@ -76,6 +90,7 @@ const Preview: React.FC = () => {
         </PreviewContainer>
         <Policies disputePolicyURI={disputeTemplate.policyURI} courtId={disputeData.courtId} />
       </StyledCard>
+      <BatchCreationCard />
       <NavigationButtons prevRoute="/resolver/policy" />
     </Container>
   );

web/src/pages/Resolver/Policy/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
 
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useToggle } from "react-use";
 import { useAccount } from "wagmi";
 
-import { useNewDisputeContext } from "context/NewDisputeContext";
+import { useAtlasProvider } from "@kleros/kleros-app";
 
 import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
@@ -19,6 +19,7 @@ import ScrollTop from "components/ScrollTop";
 
 import Description from "./Briefing/Description";
 import Title from "./Briefing/Title";
+import Landing from "./Landing";
 import Category from "./Parameters/Category";
 import Court from "./Parameters/Court";
 import Jurors from "./Parameters/Jurors";
@@ -35,6 +36,7 @@ const Wrapper = styled.div`
 const Container = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 32px;
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(24, 32)};
@@ -76,20 +78,41 @@ const MiddleContentContainer = styled.div`
   position: relative;
 `;
 
+const Heading = styled.h1`
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
+  text-align: center;
+`;
+
+const Paragraph = styled.p`
+  padding: 0;
+  margin: 0;
+  font-size: 16px;
+  text-align: center;
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
 const DisputeResolver: React.FC = () => {
   const location = useLocation();
   const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false);
+  const { isVerified } = useAtlasProvider();
   const { isConnected } = useAccount();
   const isPreviewPage = location.pathname.includes("/preview");
-  const { resetDisputeData } = useNewDisputeContext();
 
-  useEffect(() => resetDisputeData(), []);
   return (
     <Wrapper>
       <HeroImage />
       <Container>
+        {!isConnected || !isVerified ? (
+          <>
+            <Heading>Justise as a Service</Heading>
+            <Paragraph>You send your disputes. Kleros sends back decisions.</Paragraph>
+          </>
+        ) : null}
         {isConnected ? (
-          <StyledEnsureAuth>
+          <StyledEnsureAuth buttonText="Sign in to start">
             <MiddleContentContainer>
               {isConnected && !isPreviewPage ? (
                 <HowItWorksAndTimeline>
@@ -102,7 +125,8 @@ const DisputeResolver: React.FC = () => {
                 </HowItWorksAndTimeline>
               ) : null}
               <Routes>
-                <Route index element={<Navigate to="title" replace />} />
+                <Route index element={<Navigate to="create" replace />} />
+                <Route path="/create/*" element={<Landing />} />
                 <Route path="/title/*" element={<Title />} />
                 <Route path="/description/*" element={<Description />} />
                 <Route path="/court/*" element={<Court />} />