Merge branch 'dev' into dev

Author: kemuru

kleros-sdk/src/dataMappings/retrieveRealityData.ts

@@ -50,7 +50,6 @@ export const retrieveRealityData = async (realityQuestionID: string, arbitrable?
   };
 
   const questionData = await executeAction(questionMapping);
-  console.log("questionData", questionData);
 
   const templateMapping: AbiEventMapping = {
     type: "abi/event",
@@ -66,7 +65,6 @@ export const retrieveRealityData = async (realityQuestionID: string, arbitrable?
   };
 
   const templateData = await executeAction(templateMapping);
-  console.log("templateData", templateData);
 
   if (!templateData) {
     throw new NotFoundError("Template Data", "Failed to retrieve template data");
@@ -82,8 +80,6 @@ export const retrieveRealityData = async (realityQuestionID: string, arbitrable?
     questionData.realityQuestion
   );
 
-  console.log("populatedTemplate", populatedTemplate);
-
   let answers: RealityAnswer[] = [];
   if (populatedTemplate.type === "bool") {
     answers = [

kleros-sdk/src/dataMappings/utils/populateTemplate.ts

@@ -9,10 +9,8 @@ export const populateTemplate = (mustacheTemplate: string, data: any): DisputeDe
 
   const validation = DisputeDetailsSchema.safeParse(dispute);
   if (!validation.success) {
-    console.error("Validation errors:", validation.error.errors, "\n\nDispute details:", `${JSON.stringify(dispute)}`);
-    throw new InvalidFormatError("Invalid dispute details format");
+    throw validation.error;
   }
-  console.log(dispute);
 
   return dispute;
 };

web/src/app.tsx

@@ -95,7 +95,7 @@ const App: React.FC = () => {
                             </Suspense>
                           }
                         />
-                        <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
+                        <Route path="*" element={<h1>Page not found</h1>} />
                       </Route>
                     </SentryRoutes>
                   </NewDisputeProvider>

web/src/components/CasesDisplay/index.tsx

@@ -24,6 +24,10 @@ const StyledTitle = styled.h1`
   margin: 0px;
 `;
 
+const StyledLabel = styled.label`
+  font-size: 16px;
+`;
+
 interface ICasesDisplay extends ICasesGrid {
   numberDisputes?: number;
   numberClosedDisputes?: number;
@@ -54,10 +58,10 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
         ) : null}
       </TitleContainer>
       <Search />
-      <StatsAndFilters totalDisputes={numberDisputes ?? 0} closedDisputes={numberClosedDisputes ?? 0} />
+      <StatsAndFilters totalDisputes={numberDisputes || 0} closedDisputes={numberClosedDisputes || 0} />
 
       {disputes?.length === 0 ? (
-        <h1>No cases found</h1>
+        <StyledLabel>No cases found</StyledLabel>
       ) : (
         <CasesGrid
           disputes={disputes}

web/src/components/DisputePreview/DisputeContext.tsx

@@ -26,14 +26,11 @@ const QuestionAndDescription = styled.div`
   word-wrap: break-word;
   div:first-child p:first-of-type {
     font-size: 16px;
-    font-weight: 600;
+    font-weight: 400;
+    margin: 0;
   }
 `;
 
-const StyledReactMarkDown = styled(ReactMarkdown)`
-  margin: 0px;
-`;
-
 const VotingOptions = styled(QuestionAndDescription)`
   display: flex;
   flex-direction: column;
@@ -45,16 +42,30 @@ const AnswersContainer = styled.div`
   flex-direction: column;
 `;
 
+const AnswersHeader = styled.h3`
+  margin: 0;
+`;
+
 const Answer = styled.div`
   margin: 0px;
   display: flex;
   flex-wrap: wrap;
-  gap: ${responsiveSize(2, 8)};
+  gap: 6px;
   > label {
     max-width: 100%;
   }
 `;
 
+const StyledSmall = styled.small`
+  color: ${({ theme }) => theme.secondaryText};
+  font-weight: 400;
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.primaryText};
+  font-weight: 600;
+`;
+
 const AliasesContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -70,11 +81,11 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
   const errMsg = isRpcError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR;
   return (
     <>
-      <StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : disputeDetails?.title ?? errMsg}</StyledH1>
+      <StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}</StyledH1>
       {!isUndefined(disputeDetails) && (
         <QuestionAndDescription>
-          <StyledReactMarkDown>{disputeDetails?.question}</StyledReactMarkDown>
-          <StyledReactMarkDown>{disputeDetails?.description}</StyledReactMarkDown>
+          <ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
+          <ReactMarkdown>{disputeDetails?.description}</ReactMarkdown>
         </QuestionAndDescription>
       )}
       {isUndefined(disputeDetails?.frontendUrl) ? null : (
@@ -83,15 +94,15 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
         </a>
       )}
       <VotingOptions>
-        {isUndefined(disputeDetails) ? null : <h3>Voting Options</h3>}
+        {isUndefined(disputeDetails) ? null : <AnswersHeader>Voting Options</AnswersHeader>}
         <AnswersContainer>
           {disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
             <Answer key={answer.title}>
-              <small>Option {i + 1}:</small>
-              <label>
+              <StyledSmall>{i + 1 + `.`}</StyledSmall>
+              <StyledLabel>
                 {answer.title}
-                {answer.description ? ` - ${answer.description}` : null}
-              </label>
+                {answer.description.trim() ? ` - ${answer.description}` : null}
+              </StyledLabel>
             </Answer>
           ))}
         </AnswersContainer>

web/src/components/DisputePreview/Policies.tsx

@@ -1,44 +1,30 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
 import PaperclipIcon from "svgs/icons/paperclip.svg";
 import PolicyIcon from "svgs/icons/policy.svg";
 
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { isUndefined } from "utils/index";
 
-import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import { InternalLink } from "components/InternalLink";
 
-const ShadeArea = styled.div`
+const Container = styled.div`
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px 16px;
   padding: ${responsiveSize(16, 20)} ${responsiveSize(16, 32)};
-  margin-top: 16px;
   background-color: ${({ theme }) => theme.mediumBlue};
-
-  ${landscapeStyle(
-    () => css`
-      flex-direction: row;
-      justify-content: space-between;
-    `
-  )};
 `;
 
 const StyledP = styled.p`
   font-size: 14px;
-  margin-top: 0;
-  margin-bottom: 16px;
+  margin: 0;
   color: ${({ theme }) => theme.primaryBlue};
-  ${landscapeStyle(
-    () => css`
-      margin-bottom: 0;
-    `
-  )};
 `;
 
 const StyledPolicyIcon = styled(PolicyIcon)`
@@ -51,13 +37,6 @@ const StyledPaperclipIcon = styled(PaperclipIcon)`
   fill: ${({ theme }) => theme.primaryBlue};
 `;
 
-const LinkContainer = styled.div`
-  display: flex;
-  gap: ${responsiveSize(16, 24)};
-  flex-wrap: wrap;
-  align-items: center;
-`;
-
 const StyledInternalLink = styled(InternalLink)`
   display: flex;
   gap: 4px;
@@ -82,28 +61,26 @@ interface IPolicies {
 
 export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attachment }) => {
   return (
-    <ShadeArea>
-      <StyledP>Make sure you read and understand the Policies</StyledP>
-      <LinkContainer>
-        {!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
-          <StyledInternalLink to={`attachment/?url=${getIpfsUrl(attachment.uri)}`}>
-            <StyledPaperclipIcon />
-            {attachment.label ?? "Attachment"}
-          </StyledInternalLink>
-        ) : null}
-        {isUndefined(disputePolicyURI) ? null : (
-          <StyledInternalLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
-            <StyledPolicyIcon />
-            Dispute Policy
-          </StyledInternalLink>
-        )}
-        {isUndefined(courtId) ? null : (
-          <StyledInternalLink to={`/courts/${courtId}/policy?section=description`}>
-            <StyledPolicyIcon />
-            Court Policy
-          </StyledInternalLink>
-        )}
-      </LinkContainer>
-    </ShadeArea>
+    <Container>
+      <StyledP>Policy documents:</StyledP>
+      {!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
+        <StyledInternalLink to={`attachment/?url=${getIpfsUrl(attachment.uri)}`}>
+          <StyledPaperclipIcon />
+          {attachment.label ?? "Attachment"}
+        </StyledInternalLink>
+      ) : null}
+      {isUndefined(disputePolicyURI) ? null : (
+        <StyledInternalLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
+          <StyledPolicyIcon />
+          Dispute Policy
+        </StyledInternalLink>
+      )}
+      {isUndefined(courtId) ? null : (
+        <StyledInternalLink to={`/courts/${courtId}/policy?section=description`}>
+          <StyledPolicyIcon />
+          Court Policy
+        </StyledInternalLink>
+      )}
+    </Container>
   );
 };

web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx

@@ -1,14 +1,9 @@
-import React, { useMemo } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
 
-import LawBalanceIcon from "svgs/icons/law-balance.svg";
-
-import { useCourtTree } from "hooks/queries/useCourtTree";
-
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import Field, { IField } from "components/Field";
-import { getCourtsPath } from "pages/Courts/CourtDetails";
 
 import CardLabel from "../CardLabels";
 
@@ -22,12 +17,6 @@ const Container = styled.div`
   justify-content: flex-end;
 `;
 
-const CourtBranchFieldContainer = styled.div`
-  display: flex;
-  margin-top: 16px;
-  flex-wrap: wrap;
-`;
-
 const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>`
   display: flex;
   flex-direction: column;
@@ -42,7 +31,6 @@ const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>`
     css`
       ${landscapeStyle(
         () => css`
-          margin-top: 16px;
           gap: 32px;
           flex-direction: row;
           flex-wrap: wrap;
@@ -56,7 +44,6 @@ const StyledField = styled(Field)`
   max-width: 100%;
   label {
     &.value {
-      margin-left: 8px;
       overflow: hidden;
       text-overflow: ellipsis;
       text-wrap: auto;
@@ -66,36 +53,9 @@ const StyledField = styled(Field)`
 
 type IDisputeInfoCard = { fieldItems: FieldItem[] } & IDisputeInfo;
 
-const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
-  isOverview,
-  showLabels,
-  fieldItems,
-  court,
-  courtId,
-  disputeID,
-  round,
-}) => {
-  const { data } = useCourtTree();
-  const courtPath = getCourtsPath(data?.court, courtId);
-  const items = useMemo(
-    () => [...(courtPath?.map((node) => ({ text: node.name, value: node.id })) ?? [])],
-    [courtPath]
-  );
-
-  const courtBranchValue = items.map((item) => item.text).join(" / ");
+const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({ isOverview, showLabels, fieldItems, disputeID, round }) => {
   return (
     <Container>
-      {court && courtId && isOverview && (
-        <CourtBranchFieldContainer>
-          <StyledField
-            link={`/courts/${courtId}`}
-            icon={LawBalanceIcon}
-            name="Court Branch"
-            value={courtBranchValue}
-            {...{ isOverview }}
-          />
-        </CourtBranchFieldContainer>
-      )}
       <RestOfFieldsContainer {...{ isOverview }}>
         {fieldItems.map((item) =>
           item.display ? <StyledField key={item.name} {...(item as IField)} {...{ isOverview }} /> : null

web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx

@@ -30,6 +30,7 @@ const RestOfFieldsContainer = styled.div`
   grid-template-columns: repeat(3, min-content);
   justify-content: start;
 `;
+
 const StyledField = styled(Field)<{ style?: string }>`
   ${({ style }) => style ?? ""}
 `;

web/src/components/DisputeView/DisputeInfo/index.tsx

@@ -76,7 +76,7 @@ const DisputeInfo: React.FC<IDisputeInfo> = ({
         name: "Court",
         value: court,
         link: `/courts/${courtId}`,
-        display: !isUndefined(court) && !isUndefined(courtId) && !isOverview,
+        display: !isUndefined(court) && !isUndefined(courtId),
       },
       {
         icon: RoundIcon,