fix for issue #39

components/HooksEditor.tsx

@@ -11,7 +11,6 @@ import Container from "./Container";
 import dark from "../theme/editor/amy.json";
 import light from "../theme/editor/xcode_default.json";
 import { saveFile } from "../state/actions";
-import { apiHeaderFiles } from "../state/constants";
 import state from "../state";
 
 import EditorNavigation from "./EditorNavigation";
@@ -27,26 +26,12 @@ loader.config({
   },
 });
 
-const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
-  const currPath = editor.getModel()?.uri.path;
-  if (apiHeaderFiles.find(h => currPath?.endsWith(h))) {
-    editor.updateOptions({ readOnly: true });
-  } else {
-    editor.updateOptions({ readOnly: false });
-  }
-};
-
 const HooksEditor = () => {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
   const subscriptionRef = useRef<ReconnectingWebSocket | null>(null);
   const snap = useSnapshot(state);
   const router = useRouter();
   const { theme } = useTheme();
-
-  useEffect(() => {
-    if (editorRef.current) validateWritability(editorRef.current);
-  }, [snap.active]);
-
   useEffect(() => {
     return () => {
       subscriptionRef?.current?.close();
@@ -71,20 +56,19 @@ const HooksEditor = () => {
           keepCurrentModel
           defaultLanguage={snap.files?.[snap.active]?.language}
           language={snap.files?.[snap.active]?.language}
-          path={`file://tmp/c/${snap.files?.[snap.active]?.name}`}
+          path={`file:///work/c/${snap.files?.[snap.active]?.name}`}
           defaultValue={snap.files?.[snap.active]?.content}
-          beforeMount={monaco => {
+          beforeMount={(monaco) => {
             if (!snap.editorCtx) {
-              snap.files.forEach(file =>
+              snap.files.forEach((file) =>
                 monaco.editor.createModel(
                   file.content,
                   file.language,
-                  monaco.Uri.parse(`file://tmp/c/${file.name}`)
+                  monaco.Uri.parse(`file:///work/c/${file.name}`)
                 )
               );
             }
 
-            // monaco.editor.createModel(value, 'c', monaco.Uri.parse('file:///tmp/c/file.c'))
             // create the web socket
             if (!subscriptionRef.current) {
               monaco.languages.register({
@@ -101,7 +85,7 @@ const HooksEditor = () => {
               // listen when the web socket is opened
               listen({
                 webSocket: webSocket as WebSocket,
-                onConnection: connection => {
+                onConnection: (connection) => {
                   // create and start the language client
                   const languageClient = createLanguageClient(connection);
                   const disposable = languageClient.start();
@@ -140,10 +124,12 @@ const HooksEditor = () => {
                 enabled: true,
               },
             });
-            editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
-              saveFile();
-            });
-            validateWritability(editor)
+            editor.addCommand(
+              monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
+              () => {
+                saveFile();
+              }
+            );
           }}
           theme={theme === "dark" ? "dark" : "light"}
         />
@@ -161,7 +147,9 @@ const HooksEditor = () => {
               <Box css={{ display: "inline-flex", pl: "35px" }}>
                 <ArrowBendLeftUp size={30} />
               </Box>
-              <Box css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}>
+              <Box
+                css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}
+              >
                 <Text
                   css={{
                     fontSize: "14px",

components/Navigation.tsx

@@ -27,7 +27,6 @@ import {
   DialogTrigger,
 } from "./Dialog";
 import PanelBox from "./PanelBox";
-import { templateFileIds } from '../state/constants';
 
 const Navigation = () => {
   const router = useRouter();
@@ -83,8 +82,12 @@ const Navigation = () => {
               <Spinner />
             ) : (
               <>
-                <Heading css={{ lineHeight: 1 }}>{snap.files?.[0]?.name || "XRPL Hooks"}</Heading>
-                <Text css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}>
+                <Heading css={{ lineHeight: 1 }}>
+                  {snap.files?.[0]?.name || "XRPL Hooks"}
+                </Heading>
+                <Text
+                  css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}
+                >
                   {snap.files.length > 0 ? "Gist: " : "Playground"}
                   <Text css={{ color: "$mauve12" }}>
                     {snap.files.length > 0 &&
@@ -96,7 +99,10 @@ const Navigation = () => {
           </Flex>
           {router.isReady && (
             <ButtonGroup css={{ marginLeft: "auto" }}>
-              <Dialog open={snap.mainModalOpen} onOpenChange={open => (state.mainModalOpen = open)}>
+              <Dialog
+                open={snap.mainModalOpen}
+                onOpenChange={(open) => (state.mainModalOpen = open)}
+              >
                 <DialogTrigger asChild>
                   <Button outline>
                     <FolderOpen size="15px" />
@@ -157,9 +163,12 @@ const Navigation = () => {
                             mb: "$7",
                           }}
                         >
-                          Hooks add smart contract functionality to the XRP Ledger.
+                          Hooks add smart contract functionality to the XRP
+                          Ledger.
                         </Text>
-                        <Flex css={{ flexDirection: "column", gap: "$2", mt: "$2" }}>
+                        <Flex
+                          css={{ flexDirection: "column", gap: "$2", mt: "$2" }}
+                        >
                           <Text
                             css={{
                               display: "inline-flex",
@@ -244,29 +253,43 @@ const Navigation = () => {
                         },
                       }}
                     >
-                      <PanelBox as="a" href={`/develop/${templateFileIds.starter}`}>
+                      <PanelBox
+                        as="a"
+                        href="/develop/be088224fb37c0075e84491da0e602c1"
+                      >
                         <Heading>Starter</Heading>
-                        <Text>Just an empty starter with essential imports</Text>
+                        <Text>
+                          Just an empty starter with essential imports
+                        </Text>
                       </PanelBox>
-                      <PanelBox as="a" href={`/develop/${templateFileIds.starter}`}>
+                      <PanelBox
+                        as="a"
+                        href="/develop/be088224fb37c0075e84491da0e602c1"
+                      >
                         <Heading>Firewall</Heading>
-                        <Text>This Hook essentially checks a blacklist of accounts</Text>
+                        <Text>
+                          This Hook essentially checks a blacklist of accounts
+                        </Text>
                       </PanelBox>
-                      <PanelBox as="a" href={`/develop/${templateFileIds.accept}`}>
+                      <PanelBox
+                        as="a"
+                        href="/develop/be088224fb37c0075e84491da0e602c1"
+                      >
                         <Heading>Accept</Heading>
-                        <Text>This hook just accepts any transaction coming through it</Text>
+                        <Text>
+                          This hook just accepts any transaction coming through
+                          it
+                        </Text>
                       </PanelBox>
-                      <PanelBox as="a" href={`/develop/${templateFileIds.notary}`}>
-                        <Heading>Notary</Heading>
-                        <Text>Collecting signatures for multi-sign transactions</Text>
-                      </PanelBox>
-                      <PanelBox as="a" href={`/develop/${templateFileIds.carbon}`}>
-                        <Heading>Carbon</Heading>
-                        <Text>Send a percentage of sum to an address</Text>
-                      </PanelBox>
-                      <PanelBox as="a" href={`/develop/${templateFileIds.peggy}`}>
-                        <Heading>Peggy</Heading>
-                        <Text>An oracle based stabe coin hook</Text>
+                      <PanelBox
+                        as="a"
+                        href="/develop/be088224fb37c0075e84491da0e602c1"
+                      >
+                        <Heading>Accept</Heading>
+                        <Text>
+                          This hook just accepts any transaction coming through
+                          it
+                        </Text>
                       </PanelBox>
                     </Flex>
                   </Flex>
@@ -313,18 +336,42 @@ const Navigation = () => {
             }}
           >
             <ButtonGroup>
-              <Link href={gistId ? `/develop/${gistId}` : "/develop"} passHref shallow>
-                <Button as="a" outline={!router.pathname.includes("/develop")} uppercase>
+              <Link
+                href={gistId ? `/develop/${gistId}` : "/develop"}
+                passHref
+                shallow
+              >
+                <Button
+                  as="a"
+                  outline={!router.pathname.includes("/develop")}
+                  uppercase
+                >
                   Develop
                 </Button>
               </Link>
-              <Link href={gistId ? `/deploy/${gistId}` : "/deploy"} passHref shallow>
-                <Button as="a" outline={!router.pathname.includes("/deploy")} uppercase>
+              <Link
+                href={gistId ? `/deploy/${gistId}` : "/deploy"}
+                passHref
+                shallow
+              >
+                <Button
+                  as="a"
+                  outline={!router.pathname.includes("/deploy")}
+                  uppercase
+                >
                   Deploy
                 </Button>
               </Link>
-              <Link href={gistId ? `/test/${gistId}` : "/test"} passHref shallow>
-                <Button as="a" outline={!router.pathname.includes("/test")} uppercase>
+              <Link
+                href={gistId ? `/test/${gistId}` : "/test"}
+                passHref
+                shallow
+              >
+                <Button
+                  as="a"
+                  outline={!router.pathname.includes("/test")}
+                  uppercase
+                >
                   Test
                 </Button>
               </Link>

state/actions/fetchFiles.ts

@@ -1,8 +1,6 @@
 import { Octokit } from "@octokit/core";
 import Router from "next/router";
 import state from '../index';
-import { templateFileIds } from '../constants';
-
 
 const octokit = new Octokit();
 
@@ -19,17 +17,6 @@ export const fetchFiles = (gistId: string) => {
 
     octokit
       .request("GET /gists/{gist_id}", { gist_id: gistId })
-      .then(res => {
-        if (!Object.values(templateFileIds).includes(gistId)) {
-          return res
-        }
-        // in case of templates, fetch header file(s) and append to res
-        return octokit.request("GET /gists/{gist_id}", { gist_id: templateFileIds.headers }).then(({ data: { files: headerFiles } }) => {
-          const files = { ...res.data.files, ...headerFiles }
-          res.data.files = files
-          return res
-        })
-      })
       .then((res) => {
         if (res.data.files && Object.keys(res.data.files).length > 0) {
           const files = Object.keys(res.data.files).map((filename) => ({
@@ -57,7 +44,6 @@ export const fetchFiles = (gistId: string) => {
         state.loading = false;
       })
       .catch((err) => {
-        // console.error(err)
         state.loading = false;
         state.logs.push({
           type: "error",

state/constants/index.ts

@@ -1 +0,0 @@
-export * from './templates'

state/constants/templates.ts

@@ -1,11 +0,0 @@
-export const templateFileIds = {
-    'starter': '1d14e51e2e02dc0a508cb0733767a914', // TODO currently same as accept
-    'accept': '1d14e51e2e02dc0a508cb0733767a914',
-    'firewall': 'bcd6d0c0fcbe52545ddb802481ff9d26',
-    'notary': 'a789c75f591eeab7932fd702ed8cf9ea',
-    'carbon': '43925143fa19735d8c6505c34d3a6a47',
-    'peggy': 'ceaf352e2a65741341033ab7ef05c448',
-    'headers': '9b448e8a55fab11ef5d1274cb59f9cf3'
-}
-
-export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'hookmacro.h']