Merge branch 'dev' into feat(web)/lazy-loading

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/src/components/DisputePreview/Alias.tsx

@@ -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/components/DisputePreview/DisputeContext.tsx

@@ -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/EnsureChain.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 
 import { DEFAULT_CHAIN } from "consts/chains";
 
@@ -12,7 +12,7 @@ interface IEnsureChain {
 }
 
 export const EnsureChain: React.FC<IEnsureChain> = ({ children, className }) => {
-  const chainId = useChainId();
+  const { chainId } = useAccount();
 
   return chainId === DEFAULT_CHAIN ? children : <ConnectWallet {...{ className }} />;
 };

web/src/components/Field.tsx

@@ -23,12 +23,6 @@ const FieldContainer = styled.div<FieldContainerProps>`
     width: 14px;
   }
 
-  .link {
-    color: ${({ theme }) => theme.primaryBlue};
-    :hover {
-      cursor: pointer;
-    }
-  }
   ${({ isList }) =>
     isList &&
     css`
@@ -62,6 +56,12 @@ const FieldContainer = styled.div<FieldContainerProps>`
     `};
 `;
 
+const LinkContainer = styled.div``;
+
+const StyledLink = styled(Link)`
+  color: ${({ theme }) => theme.primaryBlue};
+`;
+
 type FieldContainerProps = {
   width?: string;
   isList?: boolean;
@@ -97,15 +97,16 @@ const Field: React.FC<IField> = ({
       <Icon />
       {(!displayAsList || isOverview || isJurorBalance) && <label>{name}:</label>}
       {link ? (
-        <Link
-          className="link value"
-          to={link}
-          onClick={(event) => {
-            event.stopPropagation();
-          }}
-        >
-          {value}
-        </Link>
+        <LinkContainer className="value">
+          <StyledLink
+            to={link}
+            onClick={(event) => {
+              event.stopPropagation();
+            }}
+          >
+            {value}
+          </StyledLink>
+        </LinkContainer>
       ) : (
         <label className="value">{value}</label>
       )}

web/src/context/NewDisputeContext.tsx

@@ -12,16 +12,16 @@ export type Answer = {
   reserved?: boolean;
 };
 
-export type Alias = {
+export type AliasArray = {
   id?: string;
   name: string;
   address: string | Address;
   isValid?: boolean;
 };
 
+export type Alias = Record<string, string>;
 export interface IDisputeTemplate {
   answers: Answer[];
-  aliases?: Alias[];
   arbitrableAddress?: string;
   arbitrableChainID?: string;
   arbitratorAddress?: string;
@@ -34,6 +34,7 @@ export interface IDisputeTemplate {
   question: string;
   specification?: string;
   title: string;
+  aliases?: Alias;
   // attachment: Attachment;
   // type: string;
 }
@@ -42,6 +43,7 @@ interface IDisputeData extends IDisputeTemplate {
   courtId?: string;
   numberOfJurors: number;
   arbitrationCost?: string;
+  aliasesArray?: AliasArray[];
 }
 
 interface INewDisputeContext {
@@ -64,7 +66,7 @@ const initialDisputeData: IDisputeData = {
     { title: "", id: "1" },
     { title: "", id: "2" },
   ],
-  aliases: [
+  aliasesArray: [
     { name: "", address: "", id: "1" },
     { name: "", address: "", id: "2" },
   ],
@@ -113,13 +115,22 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
 };
 
 const constructDisputeTemplate = (disputeData: IDisputeData) => {
-  const baseTemplate = { ...disputeData } as IDisputeTemplate;
+  const baseTemplate = { ...disputeData };
 
-  if (!isUndefined(baseTemplate.aliases)) {
-    baseTemplate.aliases = baseTemplate.aliases.filter((item) => item.address !== "" && item.isValid);
-    if (baseTemplate.aliases.length === 0) delete baseTemplate.aliases;
+  if (!isUndefined(baseTemplate.aliasesArray)) {
+    baseTemplate.aliasesArray = baseTemplate.aliasesArray.filter((item) => item.address !== "" && item.isValid);
+    if (baseTemplate.aliasesArray.length === 0) delete baseTemplate.aliasesArray;
+    else {
+      const aliases: Alias = {};
+
+      for (const alias of baseTemplate.aliasesArray) {
+        aliases[alias.name] = alias.address;
+      }
+
+      baseTemplate.aliases = aliases;
+    }
   }
   if (!isUndefined(baseTemplate.policyURI) && baseTemplate.policyURI === "") delete baseTemplate.policyURI;
 
-  return baseTemplate;
+  return baseTemplate as IDisputeTemplate;
 };

web/src/hooks/queries/usePopulatedDisputeData.ts

@@ -9,6 +9,7 @@ import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/popu
 import { GENESIS_BLOCK_ARBSEPOLIA } from "consts/index";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 import { iArbitrableV2Abi } from "hooks/contracts/generated";
+import { useEvidenceGroup } from "queries/useEvidenceGroup";
 import { debounceErrorToast } from "utils/debounceErrorToast";
 import { isUndefined } from "utils/index";
 
@@ -32,6 +33,7 @@ export const usePopulatedDisputeData = (disputeID?: string, arbitrableAddress?:
   const { data: crossChainData, isError } = useIsCrossChainDispute(disputeID, arbitrableAddress);
   const isEnabled = !isUndefined(disputeID) && !isUndefined(crossChainData) && !isUndefined(arbitrableAddress);
   const { graphqlBatcher } = useGraphqlBatcher();
+  const { data: externalDisputeID } = useEvidenceGroup(disputeID, arbitrableAddress);
 
   return useQuery<DisputeDetails>({
     queryKey: [`DisputeTemplate${disputeID}${arbitrableAddress}`],
@@ -59,6 +61,8 @@ export const usePopulatedDisputeData = (disputeID?: string, arbitrableAddress?:
           const initialContext = {
             disputeID: disputeID,
             arbitrable: arbitrableAddress,
+            graphApiKey: import.meta.env.REACT_APP_GRAPH_API_KEY,
+            externalDisputeID: externalDisputeID,
           };
 
           const data = dataMappings ? await executeActions(JSON.parse(dataMappings), initialContext) : {};