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

Author: tractorss

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

@@ -5,7 +5,7 @@ import { normalize } from "viem/ens";
 export const isHexAddress = (str: string): boolean => /^0x[a-fA-F0-9]{40}$/.test(str);
 export const isHexId = (str: string): boolean => /^0x[a-fA-F0-9]{1,64}$/.test(str);
 export const isMultiaddr = (str: string): boolean =>
-  /^\/(?:ip4|ip6|dns4|dns6|dnsaddr|tcp|udp|utp|tls|ws|wss|p2p-circuit|p2p-webrtc-star|p2p-webrtc-direct|p2p-websocket-star|onion|ipfs)(\/[^\s\/]+)+$|^ipfs:\/\/[a-zA-Z0-9]+\/[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)?$/.test(
+  /^\/(?:ip4|ip6|dns4|dns6|dnsaddr|tcp|udp|utp|tls|ws|wss|p2p-circuit|p2p-webrtc-star|p2p-webrtc-direct|p2p-websocket-star|onion)(\/[^\s\/]+)+$|^ipfs:\/\/[a-zA-Z0-9]+(\/[^\s]*)?$/.test(
     str
   );
 
@@ -56,9 +56,7 @@ const DisputeDetailsSchema = z.object({
   description: z.string(),
   question: z.string(),
   answers: z.array(AnswerSchema),
-  policyURI: z.string().refine((value) => isMultiaddr(value), {
-    message: "Provided policy URI is not a valid multiaddr.",
-  }),
+  policyURI: z.string(),
   attachment: AttachmentSchema.optional(),
   frontendUrl: z.string().optional(),
   metadata: MetadataSchema.optional(),

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

@@ -46,17 +46,17 @@ const StyledA = styled.a`
 const presets = [
   {
     title: "Escrow",
-    txnHash: "0x85e60cb407c9a38e625263cc762ff4283d01f38201825e1d20109d8664cfa7d4",
+    txnHash: "0x2565b756e500240544f7fc36f938462c7efbbd2e343c57979f81fecdf1054e23",
     chainId: 421614,
   },
   {
     title: "Curated Lists",
-    txnHash: "0x6e5ad6f7436ef8570b50b0fbec76a11ccedbed85030c670e59d8f6617a499108",
+    txnHash: "0xa7981830bf8144ab2070f3a639bd36b204c4c48ee1fafef66abaf60272418ed4",
     chainId: 421614,
   },
   {
     title: "Trump-Biden",
-    txnHash: "0x9a3a420174f3c55c2b3eb2e77266777b74028b845e528a90142b5b57aafbdb90",
+    txnHash: "0x83934c07f6476b2fd8c43cf856819134a58c007cb6938c6990fb3058b243ba0c",
     chainId: 421614,
   },
 ];

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

@@ -105,6 +105,11 @@ const UpperContainer = styled.div`
     `
   )}
 `;
+
+const StyledJSONEditor = styled(JSONEditor)`
+  height: 300px;
+  width: 100%;
+`;
 const StyledForm = styled.form`
   display: flex;
   flex-direction: column;
@@ -150,6 +155,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 [params, setParams] = useState<DisputeRequest>({
     _arbitrable: "0x10f7A6f42Af606553883415bc8862643A6e63fdA",
@@ -178,7 +184,13 @@ const DisputeTemplateView = () => {
         setLoading(true);
 
         setTimeout(() => {
-          const initialContext = {
+          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,
             arbitratorDisputeID: debouncedParams._arbitratorDisputeID,
@@ -187,6 +199,8 @@ const DisputeTemplateView = () => {
             templateUri: debouncedParams._templateUri,
           };
 
+          if (customContext) initialContext = { ...initialContext, ...customContext };
+
           const fetchData = async () => {
             try {
               const data = dataMappingsInput ? await executeActions(JSON.parse(dataMappingsInput), initialContext) : {};
@@ -210,7 +224,7 @@ const DisputeTemplateView = () => {
     if (disputeTemplateInput || dataMappingsInput || debouncedParams) {
       scheduleFetchData();
     }
-  }, [disputeTemplateInput, dataMappingsInput, debouncedParams]);
+  }, [disputeTemplateInput, dataMappingsInput, debouncedParams, customContextInput]);
 
   return (
     <>
@@ -280,6 +294,16 @@ const DisputeTemplateView = () => {
               placeholder="ipfs://... (optional)"
             />
           </StyledRow>
+          <StyledRow>
+            <StyledP>{"Custom Context :"}</StyledP>
+            <StyledJSONEditor
+              content={{ text: customContextInput }}
+              mode={Mode.text}
+              onChange={(val: any) => {
+                setCustomContextInput(val.text);
+              }}
+            />
+          </StyledRow>
         </StyledForm>
         <div>
           <FetchFromIDInput

web-devtools/src/components/JSONEditor.tsx

@@ -59,6 +59,6 @@ const JSONEditor = (props: any) => {
     }
   }, [props]);
 
-  return <Container ref={refContainer}></Container>;
+  return <Container ref={refContainer} className={props.className}></Container>;
 };
 export default JSONEditor;