Merge branch 'feat/devtools' into feat(devtools)/initial-setup-for-devtool-website

Author: jaybuidl

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/populateTemplate.ts

@@ -4,7 +4,6 @@ import { validate } from "./DisputeDetailsValidator";
 
 export const populateTemplate = (mustacheTemplate: string, data: any): DisputeDetails => {
   const render = mustache.render(mustacheTemplate, data);
-  console.log("MUSTACHE RENDER: ", render);
   const dispute = JSON.parse(render);
 
   // TODO: the validation below is too strict, it should be fixed, disabled for now, FIXME

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);
 };

subgraph/core/schema.graphql

@@ -53,6 +53,7 @@ interface Evidence {
   evidence: String!
   evidenceGroup: EvidenceGroup!
   sender: User!
+  timestamp: BigInt!
 }
 
 ############
@@ -296,6 +297,7 @@ type ClassicEvidence implements Evidence @entity {
   evidence: String!
   evidenceGroup: EvidenceGroup!
   sender: User!
+  timestamp: BigInt!
 }
 
 type ClassicContribution implements Contribution @entity {

subgraph/core/src/EvidenceModule.ts

@@ -12,6 +12,7 @@ export function handleEvidenceEvent(event: EvidenceEvent): void {
   evidenceGroup.save();
   const evidence = new ClassicEvidence(`${evidenceGroupID}-${evidenceIndex.toString()}`);
   const userId = event.params._party.toHexString();
+  evidence.timestamp = event.block.timestamp;
   evidence.evidence = event.params._evidence;
   evidence.evidenceGroup = evidenceGroupID.toString();
   evidence.sender = userId;

subgraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/kleros-v2-subgraph",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",

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/app.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 
 import { Route } from "react-router-dom";
 
@@ -9,17 +9,18 @@ import IsListProvider from "context/IsListProvider";
 import { NewDisputeProvider } from "context/NewDisputeContext";
 import QueryClientProvider from "context/QueryClientProvider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
+const Home = lazy(() => import("./pages/Home"));
+const Cases = lazy(() => import("./pages/Cases"));
+const Dashboard = lazy(() => import("./pages/Dashboard"));
+const Courts = lazy(() => import("./pages/Courts"));
+const DisputeTemplateView = lazy(() => import("./pages/DisputeTemplateView"));
+const DisputeResolver = lazy(() => import("./pages/Resolver"));
+const GetPnk = lazy(() => import("./pages/GetPnk"));
 import Web3Provider from "context/Web3Provider";
 
+import Loader from "components/Loader";
 import Layout from "layout/index";
 
-import Cases from "./pages/Cases";
-import Courts from "./pages/Courts";
-import Dashboard from "./pages/Dashboard";
-import DisputeTemplateView from "./pages/DisputeTemplateView";
-import GetPnk from "./pages/GetPnk";
-import Home from "./pages/Home";
-import DisputeResolver from "./pages/Resolver";
 import { SentryRoutes } from "./utils/sentry";
 
 const App: React.FC = () => {
@@ -32,13 +33,62 @@ const App: React.FC = () => {
               <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="dispute-template" element={<DisputeTemplateView />} />
-                    <Route path="resolver/*" element={<DisputeResolver />} />
-                    <Route path="get-pnk/*" element={<GetPnk />} />
+                    <Route
+                      index
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Home />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="cases/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Cases />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="courts/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Courts />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="dashboard/:page/:order/:filter"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Dashboard />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="dispute-template"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <DisputeTemplateView />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="resolver/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <DisputeResolver />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="get-pnk/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <GetPnk />
+                        </Suspense>
+                      }
+                    />
                     <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
                   </Route>
                 </SentryRoutes>