Merge branch 'dev' into fix(web)/prevent-app-crash-while-searching-cases

Author: alcercu

kleros-sdk/src/dataMappings/actions/jsonAction.ts

@@ -2,6 +2,10 @@ import { JsonMapping } from "../utils/actionTypes";
 import { createResultObject } from "src/dataMappings/utils/createResultObject";
 
 export const jsonAction = (mapping: JsonMapping) => {
-  const { value: source, seek, populate } = mapping;
-  return createResultObject(source, seek, populate);
+  const { value, seek, populate } = mapping;
+
+  // Parse the source if it's a JSON string
+  const parsedValue = typeof value === "string" ? JSON.parse(value) : value;
+
+  return createResultObject(parsedValue, seek, populate);
 };

kleros-sdk/src/dataMappings/executeActions.ts

@@ -42,6 +42,7 @@ export const executeActions = async (mappings, initialContext = {}) => {
 
   for (const mapping of mappings) {
     const actionResult = await executeAction(mapping, context);
+
     if (actionResult) {
       Object.keys(actionResult).forEach((key) => {
         context[key] = actionResult[key];

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

@@ -1,34 +1,22 @@
-// Can this be replaced by Mustache ?
-export const createResultObject = (sourceData, seek, populate) => {
+export const createResultObject = (sourceData, seek: string[], populate: string[]) => {
   const result = {};
 
-  seek.forEach((key, idx) => {
-    let foundValue = sourceData;
-
-    if (key.includes(".")) {
-      const keyParts = key.split(".");
-      for (const part of keyParts) {
-        if (foundValue[part] !== undefined) {
-          foundValue = foundValue[part];
-        } else {
-          foundValue = undefined;
-          break;
-        }
-      }
-    } else {
-      if (typeof sourceData !== "object" || key === "0") {
-        foundValue = sourceData;
-      } else {
-        foundValue = sourceData[key];
+  const getNestedValue = (obj: any, path: string) => {
+    return path.split(".").reduce((acc, part) => {
+      if (acc && part.includes("[")) {
+        const [key, index] = part.replace(/\]/g, "").split("[");
+        return acc[key]?.[index];
       }
-    }
+      return acc ? acc[part] : undefined;
+    }, obj);
+  };
 
-    console.log(`Seek key: ${key}, Found value:`, foundValue);
+  seek.forEach((key, idx) => {
+    const foundValue = getNestedValue(sourceData, key);
     if (foundValue !== undefined) {
       result[populate[idx]] = foundValue;
-      console.log(`Populate key: ${populate[idx]}, Value to add:`, foundValue);
     }
   });
-  console.log("Result object:", result);
+
   return result;
 };

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

@@ -1,13 +1,17 @@
-export const replacePlaceholdersWithValues = (mapping: any, context: any) => {
-  let mappingAsString = JSON.stringify(mapping);
+import mustache from "mustache";
 
-  const replacedMapping = mappingAsString.replace(/\{\{(\w+)\}\}/g, (_, variableName) => {
-    if (context.hasOwnProperty(variableName)) {
-      return context[variableName];
+export const replacePlaceholdersWithValues = (mapping: any, context: any) => {
+  const replace = (obj) => {
+    if (typeof obj === "string") {
+      return mustache.render(obj, context);
+    } else if (Array.isArray(obj)) {
+      return obj.map(replace);
+    } else if (typeof obj === "object" && obj !== null) {
+      return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, replace(value)]));
     } else {
-      throw new Error(`Variable '${variableName}' not found in context.`);
+      return obj;
     }
-  });
+  };
 
-  return JSON.parse(replacedMapping);
+  return replace(mapping);
 };

web/package.json

@@ -74,6 +74,7 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {
+    "@cyntler/react-doc-viewer": "^1.16.3",
     "@filebase/client": "^0.0.5",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/ui-components-library": "^2.12.0",

web/src/assets/svgs/icons/arrow-left.svg

@@ -5,9 +5,6 @@ import Skeleton from "react-loading-skeleton";
 import { isAddress } from "viem";
 import { useEnsAddress } from "wagmi";
 
-import { Alias } from "context/NewDisputeContext";
-import { isUndefined } from "utils/index";
-
 import { AddressOrName, IdenticonOrAvatar } from "../ConnectWallet/AccountDisplay";
 
 const AliasContainer = styled.div`
@@ -26,28 +23,29 @@ const TextContainer = styled.div`
 `;
 
 interface IAlias {
-  alias: Alias;
+  name: string;
+  address: `0x${string}`;
 }
 
-const AliasDisplay: React.FC<IAlias> = ({ alias }) => {
+const AliasDisplay: React.FC<IAlias> = ({ name, address }) => {
   const { data: addressFromENS, isLoading } = useEnsAddress({
     query: {
       // if alias.address is not an Address, we treat it as ENS and try to fetch address from there
-      enabled: !isAddress(alias.address),
+      enabled: !isAddress(address),
     },
-    name: alias.address,
+    name: address,
     chainId: 1,
   });
 
   // try fetching ens name, else go with address
-  const address = addressFromENS ?? (alias.address as `0x${string}`);
+  const resolvedAddress = addressFromENS ?? (address as `0x${string}`);
 
   return (
     <AliasContainer>
-      {isLoading ? <Skeleton width={30} height={24} /> : <IdenticonOrAvatar address={address} size="24" />}
+      {isLoading ? <Skeleton width={30} height={24} /> : <IdenticonOrAvatar address={resolvedAddress} size="24" />}
       <TextContainer>
-        {isLoading ? <Skeleton width={30} height={24} /> : <AddressOrName address={address} />}&nbsp;
-        {!isUndefined(alias.name) && alias.name !== "" ? <label>({alias.name})</label> : null}
+        {isLoading ? <Skeleton width={30} height={24} /> : <AddressOrName address={resolvedAddress} />}&nbsp;
+        <label>({name})</label>
       </TextContainer>
     </AliasContainer>
   );

web/src/assets/svgs/icons/new-tab.svg

@@ -103,8 +103,8 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
         <>
           <Divider />
           <AliasesContainer>
-            {disputeDetails.aliases.map((alias) => (
-              <AliasDisplay alias={alias} key={alias.address} />
+            {Object.keys(disputeDetails.aliases).map((key) => (
+              <AliasDisplay name={key} key={key} address={disputeDetails.aliases[key]} />
             ))}
           </AliasesContainer>
         </>

web/src/components/DisputePreview/Alias.tsx

@@ -3,15 +3,16 @@ import styled, { css } from "styled-components";
 
 import Identicon from "react-identicons";
 import ReactMarkdown from "react-markdown";
+import { Link } from "react-router-dom";
 
 import { Card } from "@kleros/ui-components-library";
 
 import AttachmentIcon from "svgs/icons/attachment.svg";
 
 import { useIPFSQuery } from "hooks/useIPFSQuery";
+import { formatDate } from "utils/date";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
-import { formatDate } from "utils/date";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
@@ -65,13 +66,13 @@ const StyledA = styled.a`
   margin-left: auto;
   gap: ${responsiveSize(5, 6)};
   ${landscapeStyle(
-  () => css`
+    () => css`
       > svg {
         width: 16px;
         fill: ${({ theme }) => theme.primaryBlue};
       }
     `
-)}
+  )}
 `;
 
 const AccountContainer = styled.div`
@@ -95,22 +96,37 @@ const AccountContainer = styled.div`
 const DesktopText = styled.span`
   display: none;
   ${landscapeStyle(
-  () => css`
+    () => css`
       display: inline;
     `
-)}
+  )}
 `;
 
-const Timestamp = styled.p`
-color: ${({ theme }) => theme.secondaryText};
+const Timestamp = styled.label`
+  color: ${({ theme }) => theme.secondaryText};
 `;
 
 const MobileText = styled.span`
   ${landscapeStyle(
-  () => css`
+    () => css`
       display: none;
     `
-)}
+  )}
+`;
+
+const StyledLink = styled(Link)`
+  height: fit-content;
+  display: flex;
+  margin-left: auto;
+  gap: ${responsiveSize(5, 6)};
+  ${landscapeStyle(
+    () => css`
+      > svg {
+        width: 16px;
+        fill: ${({ theme }) => theme.primaryBlue};
+      }
+    `
+  )}
 `;
 
 const AttachedFileText: React.FC = () => (
@@ -129,6 +145,7 @@ interface IEvidenceCard {
 
 const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timestamp }) => {
   const { data } = useIPFSQuery(evidence);
+
   return (
     <StyledCard>
       <TextContainer>
@@ -147,12 +164,12 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timest
           <Identicon size="24" string={sender} />
           <p>{shortenAddress(sender)}</p>
         </AccountContainer>
-        <Timestamp>{formatDate(Number(timestamp))}</Timestamp>
+        <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
         {data && typeof data.fileURI !== "undefined" && (
-          <StyledA href={getIpfsUrl(data.fileURI)} target="_blank" rel="noreferrer">
+          <StyledLink to={`attachment/?url=${getIpfsUrl(data.fileURI)}`}>
             <AttachmentIcon />
             <AttachedFileText />
-          </StyledA>
+          </StyledLink>
         )}
       </BottomShade>
     </StyledCard>