feat(web-devtools): dynamic-custom-context-input

Author: Harman-singh-waraich

web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx

@@ -0,0 +1,82 @@
+import retrieveVariables from "@kleros/kleros-sdk/src/dataMappings/utils/retrieveVariables";
+import { Field } from "@kleros/ui-components-library";
+import { useMemo, useState } from "react";
+import styled from "styled-components";
+import { useDebounce } from "react-use";
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+`;
+
+const Header = styled.h2`
+  margin: 0;
+`;
+
+const InputContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+`;
+const VariableName = styled.p`
+  font-family: "Roboto Mono", monospace;
+`;
+
+// prevent duplicating input fields
+const DisputeRequestParams = [
+  "arbitrator",
+  "arbitrable",
+  "arbitratorDisputeID",
+  "externalDisputeID",
+  "templateID",
+  "templateUri",
+];
+
+interface ICustomContextInputs {
+  dataMapping: string;
+  setCustomContext: (context: Record<string, string>) => void;
+}
+const CustomContextInputs: React.FC<ICustomContextInputs> = ({ dataMapping, setCustomContext }) => {
+  const [customContext, setCustomContextInputs] = useState<Record<string, string>>();
+
+  const requiredVariables = useMemo(() => retrieveVariables(dataMapping), [dataMapping]);
+
+  useDebounce(
+    () => {
+      if (!customContext) return;
+      setCustomContext(customContext);
+    },
+    300,
+    [customContext]
+  );
+
+  return requiredVariables.length ? (
+    <Container>
+      <WithHelpTooltip tooltipMsg="These are additional variables required by the data mapping to be passed as initial context. Please ignore the variables that will come from the result of the preceeding data mappings">
+        <Header>Additional Context</Header>
+      </WithHelpTooltip>
+      {requiredVariables.map((variable, index) =>
+        DisputeRequestParams.includes(variable) ? null : (
+          <InputContainer id={`${variable}-${index}`}>
+            <VariableName>{variable}:</VariableName>
+            <Field
+              type="text"
+              name={variable}
+              value={customContext?.[variable]}
+              onChange={(e) => {
+                setCustomContextInputs((prev) => ({ ...prev, [variable]: e.target.value }));
+              }}
+              placeholder="0x..."
+            />
+          </InputContainer>
+        )
+      )}
+    </Container>
+  ) : null;
+};
+
+export default CustomContextInputs;

web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx

@@ -55,8 +55,8 @@ const presets = [
     chainId: 421614,
   },
   {
-    title: "Trump-Biden",
-    txnHash: "0x83934c07f6476b2fd8c43cf856819134a58c007cb6938c6990fb3058b243ba0c",
+    title: "Trump-Harris",
+    txnHash: "0x86db91678cf3f8c4503e37340cf2cd93bffcba84f9c43a98c090f6a4c76d8793",
     chainId: 421614,
   },
 ];

web-devtools/src/app/(main)/dispute-template/page.tsx

@@ -25,6 +25,7 @@ import ReactMarkdown from "components/ReactMarkdown";
 
 import FetchDisputeRequestInput, { DisputeRequest } from "./FetchDisputeRequestInput";
 import FetchFromIDInput from "./FetchFromIdInput";
+import CustomContextInputs from "./CustomContextInputs";
 
 const Container = styled.div`
   height: auto;
@@ -106,10 +107,6 @@ const UpperContainer = styled.div`
   )}
 `;
 
-const StyledJSONEditor = styled(JSONEditor)`
-  height: 300px;
-  width: 100%;
-`;
 const StyledForm = styled.form`
   display: flex;
   flex-direction: column;
@@ -155,7 +152,7 @@ const DisputeTemplateView = () => {
   const [disputeDetails, setDisputeDetails] = useState<DisputeDetails | undefined>(undefined);
   const [disputeTemplateInput, setDisputeTemplateInput] = useState<string>("");
   const [dataMappingsInput, setDataMappingsInput] = useState<string>("");
-  const [customContextInput, setCustomContextInput] = useState<string>("{}");
+  const [customContext, setCustomContext] = useState<Record<string, string>>();
 
   const [params, setParams] = useState<DisputeRequest>({
     _arbitrable: "0x10f7A6f42Af606553883415bc8862643A6e63fdA",
@@ -184,12 +181,6 @@ const DisputeTemplateView = () => {
         setLoading(true);
 
         setTimeout(() => {
-          let customContext = null;
-          try {
-            customContext = JSON.parse(customContextInput);
-          } catch (error) {
-            console.log("Error parsing custom context", error);
-          }
           let initialContext = {
             arbitrator: debouncedParams._arbitrator,
             arbitrable: debouncedParams._arbitrable,
@@ -224,7 +215,7 @@ const DisputeTemplateView = () => {
     if (disputeTemplateInput || dataMappingsInput || debouncedParams) {
       scheduleFetchData();
     }
-  }, [disputeTemplateInput, dataMappingsInput, debouncedParams, customContextInput]);
+  }, [disputeTemplateInput, dataMappingsInput, debouncedParams, customContext]);
 
   return (
     <>
@@ -291,18 +282,11 @@ const DisputeTemplateView = () => {
               name="_templateUri"
               value={params._templateUri}
               onChange={handleFormUpdate}
-              placeholder="ipfs://... (optional)"
+              placeholder="/ipfs/... (optional)"
             />
           </StyledRow>
           <StyledRow>
-            <StyledP>{"Custom Context :"}</StyledP>
-            <StyledJSONEditor
-              content={{ text: customContextInput }}
-              mode={Mode.text}
-              onChange={(val: any) => {
-                setCustomContextInput(val.text);
-              }}
-            />
+            <CustomContextInputs dataMapping={dataMappingsInput} setCustomContext={setCustomContext} />
           </StyledRow>
         </StyledForm>
         <div>

web-devtools/tsconfig.json

@@ -32,7 +32,6 @@
         "./*"
       ],
       "src*": [
-        "../../kleros-sdk/src/*",
         "./*"
       ],
       "svgs*": [