Fix/dispute template key check

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

@@ -1,3 +1,6 @@
 export * from "./populateTemplate";
 export * from "./retrieveVariables";
 export * from "./disputeDetailsTypes";
+
+export const isUndefined = (maybeObject: any): maybeObject is undefined | null =>
+  typeof maybeObject === "undefined" || maybeObject === null;

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

@@ -2,6 +2,7 @@ import mustache from "mustache";
 import retrieveVariables from "./retrieveVariables";
 import { ActionMapping } from "./actionTypes";
 import { InvalidContextError } from "../../errors";
+import { isUndefined } from ".";
 
 export function replacePlaceholdersWithValues(
   mapping: ActionMapping,
@@ -35,7 +36,8 @@ const validateContext = (template: string, context: Record<string, unknown>) =>
   const variables = retrieveVariables(template);
 
   variables.forEach((variable) => {
-    if (!context[variable]) throw new InvalidContextError(`Expected key "${variable}" to be provided in context.`);
+    if (isUndefined(context[variable]))
+      throw new InvalidContextError(`Expected key "${variable}" to be provided in context.`);
   });
   return true;
 };

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

@@ -26,6 +26,8 @@ import ReactMarkdown from "components/ReactMarkdown";
 import FetchDisputeRequestInput, { DisputeRequest } from "./FetchDisputeRequestInput";
 import FetchFromIDInput from "./FetchFromIdInput";
 import CustomContextInputs from "./CustomContextInputs";
+import { debounceErrorToast } from "utils/debounceErrorToast";
+import { isEmpty } from "utils/isEmpty";
 
 const Container = styled.div`
   height: auto;
@@ -193,12 +195,14 @@ const DisputeTemplateView = () => {
           if (customContext) initialContext = { ...initialContext, ...customContext };
 
           const fetchData = async () => {
+            if (isEmpty(disputeTemplateInput)) return;
             try {
               const data = dataMappingsInput ? await executeActions(JSON.parse(dataMappingsInput), initialContext) : {};
               const finalDisputeDetails = populateTemplate(disputeTemplateInput, data);
               setDisputeDetails(finalDisputeDetails);
-            } catch (e) {
+            } catch (e: any) {
               console.error(e);
+              debounceErrorToast(e?.message);
               setDisputeDetails(undefined);
             } finally {
               setLoading(false);

web-devtools/src/hooks/queries/useDisputeTemplateFromId.ts

@@ -5,6 +5,7 @@ import { isUndefined } from "utils/isUndefined";
 
 import { graphql } from "src/graphql-generated";
 import { DisputeTemplateQuery } from "src/graphql-generated/graphql";
+import { isEmpty } from "utils/isEmpty";
 
 const disputeTemplateQuery = graphql(`
   query DisputeTemplate($id: ID!) {
@@ -18,7 +19,7 @@ const disputeTemplateQuery = graphql(`
 `);
 
 export const useDisputeTemplateFromId = (templateId?: string) => {
-  const isEnabled = !isUndefined(templateId);
+  const isEnabled = !isUndefined(templateId) && !isEmpty(templateId);
   const { graphqlBatcher } = useGraphqlBatcher();
 
   return useQuery<DisputeTemplateQuery>({

web-devtools/src/utils/isEmpty.ts

@@ -0,0 +1 @@
+export const isEmpty = (str: string): boolean => str.trim() === "";