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",
-      }
-    }
+      },
+    },
   },
 });