Content changed warning on deploy page.

components/DeployEditor.tsx

@@ -36,6 +36,9 @@ const DeployEditor = () => {
       ? "$warning"
       : "$success";
 
+  const isContentChanged =
+    activeFile && activeFile.compiledValueSnapshot !== activeFile.content;
+
   const CompiledStatView = activeFile && (
     <Flex
       column
@@ -71,6 +74,12 @@ const DeployEditor = () => {
       <Button variant="link" onClick={() => setShowContent(true)}>
         View as WAT-file
       </Button>
+      {isContentChanged && (
+        <Text warning>
+          File contents were changed after last compile, compile again to
+          incoperate your latest changes in the build.
+        </Text>
+      )}
     </Flex>
   );
   const NoContentView = !snap.loading && router.isReady && (

components/HooksEditor.tsx

@@ -20,6 +20,7 @@ import ReconnectingWebSocket from "reconnecting-websocket";
 
 import docs from "../xrpl-hooks-docs/docs";
 import Monaco from "./Monaco";
+import { saveAllFiles } from '../state/actions/saveFile';
 
 const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
   const currPath = editor.getModel()?.uri.path;
@@ -111,6 +112,11 @@ const HooksEditor = () => {
       setMarkers(monacoRef.current);
     }
   }, [snap.active]);
+  useEffect(() => {
+    return () => {
+      saveAllFiles();
+    };
+  }, []);
 
   const file = snap.files[snap.active];
   return (
@@ -133,6 +139,7 @@ const HooksEditor = () => {
           language={file?.language}
           path={`file:///work/c/${file?.name}`}
           defaultValue={file?.content}
+          // onChange={val => (state.files[snap.active].content = val)} // Auto save?
           beforeMount={monaco => {
             if (!snap.editorCtx) {
               snap.files.forEach(file =>

components/Text.tsx

@@ -20,6 +20,11 @@ const Text = styled("span", {
         color: "$error",
       },
     },
+    warning: {
+      true: {
+        color: "$warning",
+      },
+    },
     monospace: {
       true: {
         fontFamily: "$monospace",
@@ -28,8 +33,8 @@ const Text = styled("span", {
     block: {
       true: {
         display: "block",
-      }
-    }
+      },
+    },
   },
 });
 

state/actions/compileCode.ts

@@ -67,8 +67,10 @@ export const compileCode = async (activeId: number) => {
     });
     // Decode base64 encoded wasm that is coming back from the endpoint
     const bufferData = await decodeBinary(json.output);
-    state.files[state.active].compiledContent = ref(bufferData);
-    state.files[state.active].lastCompiled = new Date();
+    const file = state.files[state.active]
+    file.compiledContent = ref(bufferData);
+    file.lastCompiled = new Date();
+    file.compiledValueSnapshot = file.content
     // Import wabt from and create human readable version of wasm file and
     // put it into state
     import("wabt").then((wabt) => {

state/index.ts

@@ -13,6 +13,7 @@ export interface IFile {
   name: string;
   language: string;
   content: string;
+  compiledValueSnapshot?: string
   compiledContent?: ArrayBuffer | null;
   compiledWatContent?: string | null;
   lastCompiled?: Date