Dispute template preview enhancements

web/package.json

@@ -107,6 +107,7 @@
     "react-toastify": "^9.1.3",
     "react-use": "^17.4.3",
     "styled-components": "^5.3.11",
+    "vanilla-jsoneditor": "^0.21.4",
     "viem": "^1.21.4",
     "wagmi": "^1.4.13"
   }

web/src/components/JSONEditor.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef } from "react";
+import styled, { css } from "styled-components";
+import { JSONEditor as Editor, JSONEditorPropsOptional } from "vanilla-jsoneditor";
+import { landscapeStyle } from "styles/landscapeStyle";
+
+const Container = styled.div`
+  width: 100%;
+  height: calc(100vh - 180px);
+
+  --text-color: ${({ theme }) => theme.primaryText};
+  --jse-text-readonly: ${({ theme }) => theme.primaryText};
+  --jse-theme-color: ${({ theme }) => theme.primaryPurple};
+  --jse-background-color: ${({ theme }) => theme.whiteBackground};
+  --jse-panel-background: ${({ theme }) => theme.hoveredShadow};
+  --jse-theme-color-highlight: ${({ theme }) => theme.lightPurple};
+  --jse-value-color-string: ${({ theme }) => theme.primaryText};
+  --jse-value-color-number: ${({ theme }) => theme.primaryBlue};
+  --jse-value-color-null: ${({ theme }) => theme.error};
+  --jse-main-border: 1px solid ${({ theme }) => theme.stroke};
+  --jse-key-color: ${({ theme }) => theme.tint};
+  --jse-value-color: ${({ theme }) => theme.success};
+  --jse-delimiter-color: ${({ theme }) => theme.primaryText};
+  .cm-gutter-lint {
+    width: 0.6em;
+  }
+  ${landscapeStyle(
+    () => css`
+      width: 30vw;
+      height: calc(100vh - 300px);
+    `
+  )}
+`;
+
+const JSONEditor = (props: JSONEditorPropsOptional) => {
+  const refContainer = useRef(null);
+  const refEditor = useRef<Editor | null>(null);
+
+  useEffect(() => {
+    refEditor.current = new Editor({
+      target: refContainer.current,
+      props: {
+        ...props,
+      },
+    });
+
+    return () => {
+      if (refEditor.current) {
+        refEditor.current.destroy();
+        refEditor.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (refEditor.current) {
+      refEditor.current.updateProps(props);
+    }
+  }, [props]);
+
+  return <Container ref={refContainer}></Container>;
+};
+export default JSONEditor;

web/src/hooks/queries/useDisputeTemplateFromId.ts

@@ -0,0 +1,27 @@
+import { graphql } from "src/graphql";
+import { useQuery } from "@tanstack/react-query";
+import { graphqlQueryFnHelper } from "utils/graphqlQueryFnHelper";
+import { isUndefined } from "utils/index";
+import { DisputeTemplateQuery } from "src/graphql/graphql";
+
+const disputeTemplateQuery = graphql(`
+  query DisputeTemplate($id: ID!) {
+    disputeTemplate(id: $id) {
+      id
+      templateTag
+      templateData
+      templateDataMappings
+    }
+  }
+`);
+
+export const useDisputeTemplateFromId = (templateId?: string) => {
+  const isEnabled = !isUndefined(templateId);
+
+  return useQuery<DisputeTemplateQuery>({
+    queryKey: [`disputeTemplate${templateId}`],
+    enabled: isEnabled,
+    staleTime: Infinity,
+    queryFn: async () => await graphqlQueryFnHelper(disputeTemplateQuery, { id: templateId?.toString() }, true),
+  });
+};

web/src/layout/Header/navbar/Explore.tsx

@@ -49,7 +49,7 @@ const StyledLink = styled(Link)<{ isActive: boolean }>`
 `;
 
 const HiddenLink = styled(StyledLink)<{ isActive: boolean }>`
-  color: ${({ isActive, theme }) => (isActive ? theme.primaryText : theme.primaryPurple)};
+  color: ${({ isActive, theme }) => (isActive ? theme.primaryText : "transparent")};
 `;
 
 const links = [
@@ -61,7 +61,7 @@ const links = [
 
 const Explore: React.FC = () => {
   const location = useLocation();
-  const { toggleIsOpen } = useOpenContext();
+  const { isOpen, toggleIsOpen } = useOpenContext();
 
   return (
     <Container>
@@ -77,15 +77,17 @@ const Explore: React.FC = () => {
           </StyledLink>
         </LinkContainer>
       ))}
-      <LinkContainer>
-        <HiddenLink
-          to="/disputeTemplate"
-          onClick={toggleIsOpen}
-          isActive={location.pathname.startsWith("/disputeTemplate")}
-        >
-          Dev
-        </HiddenLink>
-      </LinkContainer>
+      {!isOpen && (
+        <LinkContainer>
+          <HiddenLink
+            to="/disputeTemplate"
+            onClick={toggleIsOpen}
+            isActive={location.pathname.startsWith("/disputeTemplate")}
+          >
+            Dev
+          </HiddenLink>
+        </LinkContainer>
+      )}
     </Container>
   );
 };