Dispute creation wizard (basic) integrated to the court v2

web/src/app.tsx

@@ -14,6 +14,8 @@ import Cases from "./pages/Cases";
 import Dashboard from "./pages/Dashboard";
 import Courts from "./pages/Courts";
 import DisputeTemplateView from "./pages/DisputeTemplateView";
+import DisputeResolver from "./pages/Resolver";
+import { NewDisputeProvider } from "./context/NewDisputeContext";
 
 const App: React.FC = () => {
   return (
@@ -22,16 +24,19 @@ const App: React.FC = () => {
         <RefetchOnBlock />
         <Web3Provider>
           <IsListProvider>
-            <SentryRoutes>
-              <Route path="/" element={<Layout />}>
-                <Route index element={<Home />} />
-                <Route path="cases/*" element={<Cases />} />
-                <Route path="courts/*" element={<Courts />} />
-                <Route path="dashboard/:page/:order/:filter" element={<Dashboard />} />
-                <Route path="disputeTemplate" element={<DisputeTemplateView />} />
-                <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
-              </Route>
-            </SentryRoutes>
+            <NewDisputeProvider>
+              <SentryRoutes>
+                <Route path="/" element={<Layout />}>
+                  <Route index element={<Home />} />
+                  <Route path="cases/*" element={<Cases />} />
+                  <Route path="courts/*" element={<Courts />} />
+                  <Route path="dashboard/:page/:order/:filter" element={<Dashboard />} />
+                  <Route path="disputeTemplate" element={<DisputeTemplateView />} />
+                  <Route path="resolver/*" element={<DisputeResolver />} />
+                  <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
+                </Route>
+              </SentryRoutes>
+            </NewDisputeProvider>
           </IsListProvider>
         </Web3Provider>
       </QueryClientProvider>

web/src/components/ConnectWallet/AccountDisplay.tsx

@@ -4,6 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import { useAccount, useNetwork, useEnsAvatar, useEnsName } from "wagmi";
 import Identicon from "react-identicons";
 import { shortenAddress } from "utils/shortenAddress";
+import { isAddress } from "viem";
 
 const Container = styled.div`
   display: flex;
@@ -134,7 +135,7 @@ export const AddressOrName: React.FC<IAddressOrName> = ({ address: propAddress }
     chainId: 1,
   });
 
-  return <label>{data ?? (address && shortenAddress(address))}</label>;
+  return <label>{data ?? (isAddress(address) ? shortenAddress(address) : address)}</label>;
 };
 
 export const ChainDisplay: React.FC = () => {

web/src/components/DisputePreview/Alias.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+import { AddressOrName, IdenticonOrAvatar } from "../ConnectWallet/AccountDisplay";
+import { Alias } from "context/NewDisputeContext";
+import { isUndefined } from "utils/index";
+import { useEnsAddress } from "wagmi";
+import { isAddress } from "viem";
+import Skeleton from "react-loading-skeleton";
+
+const AliasContainer = styled.div`
+  min-height: 32px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  > label {
+    color: ${({ theme }) => theme.primaryText};
+    font-size: 14px;
+  }
+`;
+
+interface IAlias {
+  alias: Alias;
+}
+
+const AliasDisplay: React.FC<IAlias> = ({ alias }) => {
+  const { data: addressFromENS, isLoading } = useEnsAddress({
+    enabled: !isAddress(alias.address), // if alias.address is not an Address, we treat it as ENS and try to fetch address from there
+    name: alias.address,
+    chainId: 1,
+  });
+
+  // try fetching ens name, else go with address
+  const address = addressFromENS ?? alias.address;
+
+  return (
+    <AliasContainer>
+      {isLoading ? <Skeleton width={30} height={24} /> : <IdenticonOrAvatar address={address} size="24" />}
+      <TextContainer>
+        {isLoading ? <Skeleton width={30} height={24} /> : <AddressOrName address={address} />}&nbsp;
+        {!isUndefined(alias.name) && alias.name !== "" ? <label>({alias.name})</label> : null}
+      </TextContainer>
+    </AliasContainer>
+  );
+};
+
+export default AliasDisplay;

web/src/pages/Cases/CaseDetails/Overview/DisputeContext.tsx → web/src/components/DisputePreview/DisputeContext.tsx

@@ -3,6 +3,9 @@ import ReactMarkdown from "components/ReactMarkdown";
 import styled from "styled-components";
 import { StyledSkeleton } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
+import { Answer as IAnswer, IDisputeTemplate } from "context/NewDisputeContext";
+import AliasDisplay from "./Alias";
+import { responsiveSize } from "styles/responsiveSize";
 
 const StyledH1 = styled.h1`
   margin: 0;
@@ -11,6 +14,10 @@ const StyledH1 = styled.h1`
 const QuestionAndDescription = styled.div`
   display: flex;
   flex-direction: column;
+  div:first-child p:first-of-type {
+    font-size: 16px;
+    font-weight: 600;
+  }
 `;
 
 const StyledReactMarkDown = styled(ReactMarkdown)`
@@ -31,32 +38,24 @@ const AnswersContainer = styled.div`
 const Answer = styled.div`
   margin: 0px;
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: ${responsiveSize(2, 8)};
 `;
 
-interface IAnswer {
-  id?: string;
-  title: string;
-  description?: string;
-  reserved?: boolean;
-}
-
-interface IDisputeTemplate {
-  answers: IAnswer[];
-  arbitrableAddress: string;
-  arbitrableChainID: string;
-  arbitratorAddress: string;
-  arbitratorChainID: string;
-  category?: string;
-  description: string;
-  frontendUrl?: string;
-  lang?: string;
-  policyURI?: string;
-  question: string;
-  specification?: string;
-  title: string;
-}
+const AliasesContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${responsiveSize(8, 20)};
+`;
 
+const Divider = styled.hr`
+  width: 100%;
+  display: flex;
+  border: none;
+  height: 1px;
+  background-color: ${({ theme }) => theme.stroke};
+  margin: 0;
+`;
 interface IDisputeContext {
   disputeTemplate: IDisputeTemplate;
 }
@@ -86,13 +85,27 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeTemplate }) =
         {isUndefined(disputeTemplate) ? null : <h3>Voting Options</h3>}
         <AnswersContainer>
           {disputeTemplate?.answers?.map((answer: IAnswer, i: number) => (
-            <Answer key={i}>
+            <Answer key={answer.title}>
               <small>Option {i + 1}:</small>
-              <label>{answer.title}</label>
+              <label>
+                {answer.title}
+                {answer.description ? ` - ${answer.description}` : null}
+              </label>
             </Answer>
           ))}
         </AnswersContainer>
       </VotingOptions>
+
+      {isUndefined(disputeTemplate?.aliases) ? null : (
+        <>
+          <Divider />
+          <AliasesContainer>
+            {disputeTemplate.aliases.map((alias) => (
+              <AliasDisplay alias={alias} key={alias.address} />
+            ))}
+          </AliasesContainer>
+        </>
+      )}
     </>
   );
 };

web/src/components/LabeledInput.tsx

@@ -0,0 +1,36 @@
+import { Field, FieldProps } from "@kleros/ui-components-library";
+import React from "react";
+import styled from "styled-components";
+import { isUndefined } from "utils/index";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const StyledField = styled(Field)`
+  width: 100%;
+  > small {
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+`;
+
+const StyledLabel = styled.label`
+  width: 100%;
+  margin-bottom: 12px;
+`;
+
+interface ILabeledInput extends FieldProps {
+  label?: string;
+}
+const LabeledInput: React.FC<ILabeledInput> = (props) => {
+  return (
+    <Container>
+      {!isUndefined(props.label) ? <StyledLabel id={props.label}>{props.label}</StyledLabel> : null}
+      <StyledField {...props} id={props?.label} />
+    </Container>
+  );
+};
+
+export default LabeledInput;

web/src/components/PlusMinusField.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import Ellipse from "assets/svgs/icons/ellipse.svg";
+import Plus from "assets/svgs/icons/plus.svg";
+import Minus from "assets/svgs/icons/minus.svg";
+
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  margin: 32px 0px 48px;
+`;
+
+const IconContainer = styled.button`
+  position: relative;
+  padding: 0;
+  border-radius: 50%;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+`;
+
+const StyledEllipseIcon = styled(Ellipse)<{ isDisabled?: boolean }>`
+  circle {
+    ${({ isDisabled }) =>
+      isDisabled &&
+      css`
+        fill-opacity: 0.12;
+      `};
+  }
+`;
+
+const Icon = styled.svg`
+  fill: ${({ theme }) => theme.white};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+interface IPlusMinusField {
+  currentValue: number;
+  updateValue: (currentValue: number) => void;
+  minValue?: number;
+  className?: string;
+}
+const PlusMinusField: React.FC<IPlusMinusField> = ({ currentValue, updateValue, minValue = 0, className }) => {
+  const incrementValue = () => updateValue(++currentValue);
+  const decrementValue = () => currentValue > minValue && updateValue(--currentValue);
+  return (
+    <Container className={className}>
+      <IconContainer onClick={incrementValue}>
+        <StyledEllipseIcon />
+        <Icon as={Plus} />
+      </IconContainer>
+      <IconContainer onClick={decrementValue}>
+        <StyledEllipseIcon isDisabled={currentValue === minValue} />
+        <Icon as={Minus} />
+      </IconContainer>
+    </Container>
+  );
+};
+
+export default PlusMinusField;