Fix TrustSet transaction example.

Monaco component.

.gitignore

@@ -32,3 +32,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.vscode

components/Accounts.tsx

@@ -31,6 +31,7 @@ import transactionsData from "../content/transactions.json";
 import { SetHookDialog } from "./SetHookDialog";
 import { addFunds } from "../state/actions/addFaucetAccount";
 import { deleteHook } from "../state/actions/deployHook";
+import { capitalize } from "../utils/helpers";
 
 export const AccountDialog = ({
   activeAccountAddress,
@@ -42,12 +43,12 @@ export const AccountDialog = ({
   const snap = useSnapshot(state);
   const [showSecret, setShowSecret] = useState(false);
   const activeAccount = snap.accounts.find(
-    (account) => account.address === activeAccountAddress
+    account => account.address === activeAccountAddress
   );
   return (
     <Dialog
       open={Boolean(activeAccountAddress)}
-      onOpenChange={(open) => {
+      onOpenChange={open => {
         setShowSecret(false);
         !open && setActiveAccountAddress(null);
       }}
@@ -99,7 +100,7 @@ export const AccountDialog = ({
               tabIndex={-1}
               onClick={() => {
                 const index = state.accounts.findIndex(
-                  (acc) => acc.address === activeAccount?.address
+                  acc => acc.address === activeAccount?.address
                 );
                 state.accounts.splice(index, 1);
               }}
@@ -165,7 +166,7 @@ export const AccountDialog = ({
                     }}
                     ghost
                     size="xs"
-                    onClick={() => setShowSecret((curr) => !curr)}
+                    onClick={() => setShowSecret(curr => !curr)}
                   >
                     {showSecret ? "Hide" : "Show"}
                   </Button>
@@ -252,7 +253,7 @@ export const AccountDialog = ({
                   }}
                 >
                   {activeAccount && activeAccount.hooks.length > 0
-                    ? activeAccount.hooks.map((i) => {
+                    ? activeAccount.hooks.map(i => {
                         return (
                           <a
                             key={i}
@@ -301,7 +302,7 @@ interface AccountProps {
   showHookStats?: boolean;
 }
 
-const Accounts: FC<AccountProps> = (props) => {
+const Accounts: FC<AccountProps> = props => {
   const snap = useSnapshot(state);
   const [activeAccountAddress, setActiveAccountAddress] = useState<
     string | null
@@ -309,7 +310,7 @@ const Accounts: FC<AccountProps> = (props) => {
   useEffect(() => {
     const fetchAccInfo = async () => {
       if (snap.clientStatus === "online") {
-        const requests = snap.accounts.map((acc) =>
+        const requests = snap.accounts.map(acc =>
           snap.client?.send({
             id: `hooks-builder-req-info-${acc.address}`,
             command: "account_info",
@@ -322,7 +323,7 @@ const Accounts: FC<AccountProps> = (props) => {
           const balance = res?.account_data?.Balance as string;
           const sequence = res?.account_data?.Sequence as number;
           const accountToUpdate = state.accounts.find(
-            (acc) => acc.address === address
+            acc => acc.address === address
           );
           if (accountToUpdate) {
             accountToUpdate.xrp = balance;
@@ -330,7 +331,7 @@ const Accounts: FC<AccountProps> = (props) => {
             accountToUpdate.error = null;
           } else {
             const oldAccount = state.accounts.find(
-              (acc) => acc.address === res?.account
+              acc => acc.address === res?.account
             );
             if (oldAccount) {
               oldAccount.xrp = "0";
@@ -341,7 +342,7 @@ const Accounts: FC<AccountProps> = (props) => {
             }
           }
         });
-        const objectRequests = snap.accounts.map((acc) => {
+        const objectRequests = snap.accounts.map(acc => {
           return snap.client?.send({
             id: `hooks-builder-req-objects-${acc.address}`,
             command: "account_objects",
@@ -352,7 +353,7 @@ const Accounts: FC<AccountProps> = (props) => {
         objectResponses.forEach((res: any) => {
           const address = res?.account as string;
           const accountToUpdate = state.accounts.find(
-            (acc) => acc.address === address
+            acc => acc.address === address
           );
           if (accountToUpdate) {
             accountToUpdate.hooks =
@@ -416,9 +417,7 @@ const Accounts: FC<AccountProps> = (props) => {
             <Wallet size="15px" /> <Text css={{ lineHeight: 1 }}>Accounts</Text>
           </Heading>
           <Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
-            <Button ghost size="sm" onClick={() => addFaucetAccount(true)}>
+            <ImportAccountDialog type="create" />
-              Create
-            </Button>
             <ImportAccountDialog />
           </Flex>
         </Flex>
@@ -435,7 +434,7 @@ const Accounts: FC<AccountProps> = (props) => {
             overflowY: "auto",
           }}
         >
-          {snap.accounts.map((account) => (
+          {snap.accounts.map(account => (
             <Flex
               column
               key={account.address + account.name}
@@ -488,7 +487,7 @@ const Accounts: FC<AccountProps> = (props) => {
                 {!props.hideDeployBtn && (
                   <div
                     className="hook-deploy-button"
-                    onClick={(e) => {
+                    onClick={e => {
                       e.stopPropagation();
                     }}
                   >
@@ -514,32 +513,71 @@ const Accounts: FC<AccountProps> = (props) => {
   );
 };
 
-export const transactionsOptions = transactionsData.map((tx) => ({
+export const transactionsOptions = transactionsData.map(tx => ({
   value: tx.TransactionType,
   label: tx.TransactionType,
 }));
 
-const ImportAccountDialog = () => {
+const ImportAccountDialog = ({
-  const [value, setValue] = useState("");
+  type = "import",
+}: {
+  type?: "import" | "create";
+}) => {
+  const [secret, setSecret] = useState("");
+  const [name, setName] = useState("");
+
+  const btnText = type === "import" ? "Import" : "Create";
+  const title = type === "import" ? "Import Account" : "Create Account";
+
+  const handleSubmit = async () => {
+    if (type === "create") {
+      const value = capitalize(name);
+      await addFaucetAccount(value, true);
+      setName("");
+      setSecret("");
+      return;
+    }
+    importAccount(secret, name);
+    setName("");
+    setSecret("");
+  };
   return (
     <Dialog>
       <DialogTrigger asChild>
         <Button ghost size="sm">
-          Import
+          {btnText}
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent aria-describedby={undefined}>
-        <DialogTitle>Import account</DialogTitle>
+        <DialogTitle css={{ mb: "$4" }}>{title}</DialogTitle>
-        <DialogDescription>
+        <Flex column>
-          <Label>Add account secret</Label>
+          <Box css={{ mb: "$2" }}>
-          <Input
+            <Label>
-            name="secret"
+              Account name <Text muted>(optional)</Text>
-            type="password"
+            </Label>
-            autoComplete="new-password"
+            <Input
-            value={value}
+              name="name"
-            onChange={(e) => setValue(e.target.value)}
+              type="text"
-          />
+              autoComplete="off"
-        </DialogDescription>
+              autoCapitalize="on"
+              value={name}
+              onChange={e => setName(e.target.value)}
+            />
+          </Box>
+          {type === "import" && (
+            <Box>
+              <Label>Account secret</Label>
+              <Input
+                required
+                name="secret"
+                type="password"
+                autoComplete="new-password"
+                value={secret}
+                onChange={e => setSecret(e.target.value)}
+              />
+            </Box>
+          )}
+        </Flex>
 
         <Flex
           css={{
@@ -552,14 +590,8 @@ const ImportAccountDialog = () => {
             <Button outline>Cancel</Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button
+            <Button type="submit" variant="primary" onClick={handleSubmit}>
-              variant="primary"
+              {title}
-              onClick={() => {
-                importAccount(value);
-                setValue("");
-              }}
-            >
-              Import account
             </Button>
           </DialogClose>
         </Flex>

components/DebugStream.tsx

@@ -87,7 +87,7 @@ const addListeners = (account: ISelect | null) => {
     if (streamState.socket) {
       interval = setInterval(() => {
         streamState.socket?.send("");
-      }, 10000);
+      }, 45000);
     }
 
     streamState.socket.addEventListener("open", () => onOpen(account));

components/DeployEditor.tsx

@@ -1,7 +1,6 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
-import { useSnapshot, ref } from "valtio";
+import { useSnapshot } from "valtio";
-import Editor, { loader } from "@monaco-editor/react";
+
-import type monaco from "monaco-editor";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
 import NextLink from "next/link";
@@ -10,24 +9,16 @@ import filesize from "filesize";
 
 import Box from "./Box";
 import Container from "./Container";
-import dark from "../theme/editor/amy.json";
-import light from "../theme/editor/xcode_default.json";
 import state from "../state";
 import wat from "../utils/wat-highlight";
 
 import EditorNavigation from "./EditorNavigation";
 import { Button, Text, Link, Flex } from ".";
-
+import Monaco from "./Monaco";
-loader.config({
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
 
 const FILESIZE_BREAKPOINTS: [number, number] = [2 * 1024, 5 * 1024];
 
 const DeployEditor = () => {
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
   const snap = useSnapshot(state);
   const router = useRouter();
   const { theme } = useTheme();
@@ -36,7 +27,7 @@ const DeployEditor = () => {
 
   const activeFile = snap.files[snap.active]?.compiledContent
     ? snap.files[snap.active]
-    : snap.files.filter((file) => file.compiledContent)[0];
+    : snap.files.filter(file => file.compiledContent)[0];
   const compiledSize = activeFile?.compiledContent?.byteLength || 0;
   const color =
     compiledSize > FILESIZE_BREAKPOINTS[1]
@@ -45,6 +36,10 @@ const DeployEditor = () => {
       ? "$warning"
       : "$success";
 
+  const isContentChanged =
+    activeFile && activeFile.compiledValueSnapshot !== activeFile.content;
+  // const hasDeployErros = activeFile && activeFile.containsErrors;
+
   const CompiledStatView = activeFile && (
     <Flex
       column
@@ -80,6 +75,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
+          incorporate your latest changes in the build.
+        </Text>
+      )}
     </Flex>
   );
   const NoContentView = !snap.loading && router.isReady && (
@@ -99,7 +100,7 @@ const DeployEditor = () => {
     </Text>
   );
   const isContent =
-    snap.files?.filter((file) => file.compiledWatContent).length > 0 &&
+    snap.files?.filter(file => file.compiledWatContent).length > 0 &&
     router.isReady;
   return (
     <Box
@@ -126,32 +127,38 @@ const DeployEditor = () => {
         ) : !showContent ? (
           CompiledStatView
         ) : (
-          <Editor
+          <Monaco
             className="hooks-editor"
             defaultLanguage={"wat"}
             language={"wat"}
             path={`file://tmp/c/${activeFile?.name}.wat`}
             value={activeFile?.compiledWatContent || ""}
-            beforeMount={(monaco) => {
+            beforeMount={monaco => {
               monaco.languages.register({ id: "wat" });
               monaco.languages.setLanguageConfiguration("wat", wat.config);
               monaco.languages.setMonarchTokensProvider("wat", wat.tokens);
-              if (!state.editorCtx) {
-                state.editorCtx = ref(monaco.editor);
-                // @ts-expect-error
-                monaco.editor.defineTheme("dark", dark);
-                // @ts-expect-error
-                monaco.editor.defineTheme("light", light);
-              }
             }}
-            onMount={(editor, monaco) => {
+            onMount={editor => {
-              editorRef.current = editor;
               editor.updateOptions({
                 glyphMargin: true,
                 readOnly: true,
               });
             }}
             theme={theme === "dark" ? "dark" : "light"}
+            overlay={
+              <Flex
+                css={{
+                  m: "$1",
+                  ml: "auto",
+                  fontSize: "$sm",
+                  color: "$textMuted",
+                }}
+              >
+                <Link onClick={() => setShowContent(false)}>
+                  Exit editor mode
+                </Link>
+              </Flex>
+            }
           />
         )}
       </Container>

components/HooksEditor.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from "react";
 import { useSnapshot, ref } from "valtio";
-import Editor from "@monaco-editor/react";
 import type monaco from "monaco-editor";
 import { ArrowBendLeftUp } from "phosphor-react";
 import { useTheme } from "next-themes";
@@ -8,8 +7,6 @@ import { useRouter } from "next/router";
 
 import Box from "./Box";
 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";
@@ -22,10 +19,12 @@ import { listen } from "@codingame/monaco-jsonrpc";
 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;
-  if (apiHeaderFiles.find((h) => currPath?.endsWith(h))) {
+  if (apiHeaderFiles.find(h => currPath?.endsWith(h))) {
     editor.updateOptions({ readOnly: true });
   } else {
     editor.updateOptions({ readOnly: false });
@@ -42,7 +41,7 @@ const setMarkers = (monacoE: typeof monaco) => {
     .getModelMarkers({})
     // Filter out the markers that are hooks specific
     .filter(
-      (marker) =>
+      marker =>
         typeof marker?.code === "string" &&
         // Take only markers that starts with "hooks-"
         marker?.code?.includes("hooks-")
@@ -56,16 +55,16 @@ const setMarkers = (monacoE: typeof monaco) => {
   // Add decoration (aka extra hoverMessages) to markers in the
   // exact same range (location) where the markers are
   const models = monacoE.editor.getModels();
-  models.forEach((model) => {
+  models.forEach(model => {
     decorations[model.id] = model?.deltaDecorations(
       decorations?.[model.id] || [],
       markers
-        .filter((marker) =>
+        .filter(marker =>
           marker?.resource.path
             .split("/")
             .includes(`${state.files?.[state.active]?.name}`)
         )
-        .map((marker) => ({
+        .map(marker => ({
           range: new monacoE.Range(
             marker.startLineNumber,
             marker.startColumn,
@@ -113,6 +112,13 @@ const HooksEditor = () => {
       setMarkers(monacoRef.current);
     }
   }, [snap.active]);
+  useEffect(() => {
+    return () => {
+      saveAllFiles();
+    };
+  }, []);
+
+  const file = snap.files[snap.active];
   return (
     <Box
       css={{
@@ -127,16 +133,16 @@ const HooksEditor = () => {
     >
       <EditorNavigation />
       {snap.files.length > 0 && router.isReady ? (
-        <Editor
+        <Monaco
-          className="hooks-editor"
           keepCurrentModel
-          defaultLanguage={snap.files?.[snap.active]?.language}
+          defaultLanguage={file?.language}
-          language={snap.files?.[snap.active]?.language}
+          language={file?.language}
-          path={`file:///work/c/${snap.files?.[snap.active]?.name}`}
+          path={`file:///work/c/${file?.name}`}
-          defaultValue={snap.files?.[snap.active]?.content}
+          defaultValue={file?.content}
-          beforeMount={(monaco) => {
+          // onChange={val => (state.files[snap.active].content = val)} // Auto save?
+          beforeMount={monaco => {
             if (!snap.editorCtx) {
-              snap.files.forEach((file) =>
+              snap.files.forEach(file =>
                 monaco.editor.createModel(
                   file.content,
                   file.language,
@@ -161,7 +167,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();
@@ -177,7 +183,6 @@ const HooksEditor = () => {
               });
             }
 
-            // // hook editor to global state
             // editor.updateOptions({
             //   minimap: {
             //     enabled: false,
@@ -186,10 +191,6 @@ const HooksEditor = () => {
             // });
             if (!state.editorCtx) {
               state.editorCtx = ref(monaco.editor);
-              // @ts-expect-error
-              monaco.editor.defineTheme("dark", dark);
-              // @ts-expect-error
-              monaco.editor.defineTheme("light", light);
             }
           }}
           onMount={(editor, monaco) => {
@@ -217,13 +218,13 @@ const HooksEditor = () => {
             });
 
             // Hacky way to hide Peek menu
-            editor.onContextMenu((e) => {
+            editor.onContextMenu(e => {
               const host =
                 document.querySelector<HTMLElement>(".shadow-root-host");
 
               const contextMenuItems =
                 host?.shadowRoot?.querySelectorAll("li.action-item");
-              contextMenuItems?.forEach((k) => {
+              contextMenuItems?.forEach(k => {
                 // If menu item contains "Peek" lets hide it
                 if (k.querySelector(".action-label")?.textContent === "Peek") {
                   // @ts-expect-error

components/Monaco.tsx

@@ -0,0 +1,75 @@
+import Editor, { loader, EditorProps, Monaco } from "@monaco-editor/react";
+import { CSS } from "@stitches/react";
+import type monaco from "monaco-editor";
+import { useTheme } from "next-themes";
+import { FC, MutableRefObject, ReactNode } from "react";
+import { Flex } from ".";
+import dark from "../theme/editor/amy.json";
+import light from "../theme/editor/xcode_default.json";
+
+export type MonacoProps = EditorProps & {
+  id?: string;
+  rootProps?: { css: CSS } & Record<string, any>;
+  overlay?: ReactNode;
+  editorRef?: MutableRefObject<monaco.editor.IStandaloneCodeEditor>;
+  monacoRef?: MutableRefObject<typeof monaco>;
+};
+
+loader.config({
+  paths: {
+    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
+  },
+});
+
+const Monaco: FC<MonacoProps> = ({
+  id,
+  path = `file:///${id}`,
+  className = id,
+  language = "json",
+  overlay,
+  editorRef,
+  monacoRef,
+  beforeMount,
+  rootProps,
+  ...rest
+}) => {
+  const { theme } = useTheme();
+  const setTheme = (monaco: Monaco) => {
+    monaco.editor.defineTheme("dark", dark as any);
+    monaco.editor.defineTheme("light", light as any);
+  };
+  return (
+    <Flex
+      fluid
+      column
+      {...rootProps}
+      css={{
+        position: "relative",
+        height: "100%",
+        ...rootProps?.css,
+      }}
+    >
+      <Editor
+        className={className}
+        language={language}
+        path={path}
+        beforeMount={monaco => {
+          beforeMount?.(monaco);
+
+          setTheme(monaco);
+        }}
+        theme={theme === "dark" ? "dark" : "light"}
+        {...rest}
+      />
+      {overlay && (
+        <Flex
+          css={{ position: "absolute", bottom: 0, right: 0, width: "100%" }}
+        >
+          {overlay}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default Monaco;

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

components/Transaction/json.tsx

@@ -1,9 +1,4 @@
-import Editor, { loader, useMonaco } from "@monaco-editor/react";
 import { FC, useCallback, useEffect, useState } from "react";
-import { useTheme } from "next-themes";
-
-import dark from "../../theme/editor/amy.json";
-import light from "../../theme/editor/xcode_default.json";
 import { useSnapshot } from "valtio";
 import state, {
   prepareState,
@@ -11,18 +6,13 @@ import state, {
   TransactionState,
 } from "../../state";
 import Text from "../Text";
-import Flex from "../Flex";
+import { Flex, Link } from "..";
-import { Link } from "..";
 import { showAlert } from "../../state/actions/showAlert";
 import { parseJSON } from "../../utils/json";
 import { extractSchemaProps } from "../../utils/schema";
 import amountSchema from "../../content/amount-schema.json";
-
+import Monaco from "../Monaco";
-loader.config({
+import type monaco from "monaco-editor";
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
 
 interface JsonProps {
   value?: string;
@@ -40,7 +30,6 @@ export const TxJson: FC<JsonProps> = ({
 }) => {
   const { editorSettings, accounts } = useSnapshot(state);
   const { editorValue = value, estimatedFee } = txState;
-  const { theme } = useTheme();
   const [hasUnsaved, setHasUnsaved] = useState(false);
   const [currTxType, setCurrTxType] = useState<string | undefined>(
     txState.selectedTransaction?.value
@@ -95,9 +84,6 @@ export const TxJson: FC<JsonProps> = ({
     });
   };
 
-  const path = `file:///${header}`;
-  const monaco = useMonaco();
-
   const getSchemas = useCallback(async (): Promise<any[]> => {
     const txObj = transactionsData.find(
       td => td.TransactionType === currTxType
@@ -177,55 +163,63 @@ export const TxJson: FC<JsonProps> = ({
     ];
   }, [accounts, currTxType, estimatedFee, header]);
 
+  const [monacoInst, setMonacoInst] = useState<typeof monaco>();
   useEffect(() => {
-    if (!monaco) return;
+    if (!monacoInst) return;
     getSchemas().then(schemas => {
-      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      monacoInst.languages.json.jsonDefaults.setDiagnosticsOptions({
         validate: true,
         schemas,
       });
     });
-  }, [getSchemas, monaco]);
+  }, [getSchemas, monacoInst]);
 
   return (
-    <Flex
+    <Monaco
-      fluid
+      rootProps={{
-      column
+        css: { height: "calc(100% - 45px)" },
-      css={{ height: "calc(100% - 45px)", position: "relative" }}
+      }}
-    >
+      language={"json"}
-      <Editor
+      id={header}
-        className="hooks-editor"
+      height="100%"
-        language={"json"}
+      value={editorValue}
-        path={path}
+      onChange={val => setState({ editorValue: val })}
-        height="100%"
+      onMount={(editor, monaco) => {
-        beforeMount={monaco => {
+        editor.updateOptions({
-          monaco.editor.defineTheme("dark", dark as any);
+          minimap: { enabled: false },
-          monaco.editor.defineTheme("light", light as any);
+          glyphMargin: true,
-        }}
+          tabSize: editorSettings.tabSize,
-        value={editorValue}
+          dragAndDrop: true,
-        onChange={val => setState({ editorValue: val })}
+          fontSize: 14,
-        onMount={(editor, monaco) => {
+        });
-          editor.updateOptions({
-            minimap: { enabled: false },
-            glyphMargin: true,
-            tabSize: editorSettings.tabSize,
-            dragAndDrop: true,
-            fontSize: 14,
-          });
 
-          // register onExit cb
+        setMonacoInst(monaco);
-          const model = editor.getModel();
+        // register onExit cb
-          model?.onWillDispose(() => onExit(model.getValue()));
+        const model = editor.getModel();
-        }}
+        model?.onWillDispose(() => onExit(model.getValue()));
-        theme={theme === "dark" ? "dark" : "light"}
+      }}
-      />
+      overlay={
-      {hasUnsaved && (
+        hasUnsaved ? (
-        <Text muted small css={{ position: "absolute", bottom: 0, right: 0 }}>
+          <Flex
-          This file has unsaved changes.{" "}
+            row
-          <Link onClick={() => saveState(editorValue, currTxType)}>save</Link>{" "}
+            align="center"
-          <Link onClick={discardChanges}>discard</Link>
+            css={{ fontSize: "$xs", color: "$textMuted", ml: 'auto' }}
-        </Text>
+          >
-      )}
+            <Text muted small>
-    </Flex>
+              This file has unsaved changes.
+            </Text>
+            <Link
+              css={{ ml: "$1" }}
+              onClick={() => saveState(editorValue, currTxType)}
+            >
+              save
+            </Link>
+            <Link css={{ ml: "$1" }} onClick={discardChanges}>
+              discard
+            </Link>
+          </Flex>
+        ) : undefined
+      }
+    />
   );
 };

components/Transaction/ui.tsx

@@ -38,22 +38,23 @@ export const TxUI: FC<UIProps> = ({
     txFields,
   } = txState;
 
-  const transactionsOptions = transactionsData.map((tx) => ({
+
+  const transactionsOptions = transactionsData.map(tx => ({
     value: tx.TransactionType,
     label: tx.TransactionType,
   }));
 
-  const accountOptions: SelectOption[] = accounts.map((acc) => ({
+  const accountOptions: SelectOption[] = accounts.map(acc => ({
     label: acc.name,
     value: acc.address,
   }));
 
   const destAccountOptions: SelectOption[] = accounts
-    .map((acc) => ({
+    .map(acc => ({
       label: acc.name,
       value: acc.address,
     }))
-    .filter((acc) => acc.value !== selectedAccount?.value);
+    .filter(acc => acc.value !== selectedAccount?.value);
 
   const [feeLoading, setFeeLoading] = useState(false);
 
@@ -97,32 +98,37 @@ export const TxUI: FC<UIProps> = ({
     [estimateFee, handleSetField]
   );
 
-  const handleChangeTxType = (tt: SelectOption) => {
+  const handleChangeTxType = useCallback(
-    setState({ selectedTransaction: tt });
+    (tt: SelectOption) => {
+      setState({ selectedTransaction: tt });
 
-    const newState = resetOptions(tt.value);
+      const newState = resetOptions(tt.value);
 
-    handleEstimateFee(newState, true);
+      handleEstimateFee(newState, true);
-  };
+    },
+    [handleEstimateFee, resetOptions, setState]
+  );
 
   const specialFields = ["TransactionType", "Account", "Destination"];
 
   const otherFields = Object.keys(txFields).filter(
-    (k) => !specialFields.includes(k)
+    k => !specialFields.includes(k)
   ) as [keyof TxFields];
 
   const switchToJson = () =>
     setState({ editorSavedValue: null, viewType: "json" });
 
+  // default tx
   useEffect(() => {
+    if (selectedTransaction?.value) return;
+
     const defaultOption = transactionsOptions.find(
-      (tt) => tt.value === "Payment"
+      tt => tt.value === "Payment"
     );
     if (defaultOption) {
       handleChangeTxType(defaultOption);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleChangeTxType, selectedTransaction?.value, transactionsOptions]);
-  }, []);
 
   return (
     <Container
@@ -204,7 +210,7 @@ export const TxUI: FC<UIProps> = ({
             />
           </Flex>
         )}
-        {otherFields.map((field) => {
+        {otherFields.map(field => {
           let _value = txFields[field];
 
           let value: string | undefined;
@@ -255,7 +261,7 @@ export const TxUI: FC<UIProps> = ({
                   <Input
                     type={isFee ? "number" : "text"}
                     value={value}
-                    onChange={(e) => {
+                    onChange={e => {
                       if (isFee) {
                         const val = e.target.value
                           .replaceAll(".", "")
@@ -267,7 +273,7 @@ export const TxUI: FC<UIProps> = ({
                     }}
                     onKeyPress={
                       isFee
-                        ? (e) => {
+                        ? e => {
                             if (e.key === "." || e.key === ",") {
                               e.preventDefault();
                             }

content/amount-schema.json

@@ -40,9 +40,9 @@
       {
         "label": "Token",
         "body": {
-          "currency": "${1:13.1}",
+          "currency": "${1:USD}",
-          "value": "${2:FOO}",
+          "value": "${2:100}",
-          "description": "${3:rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpns}"
+          "issuer": "${3:rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpns}"
         }
       }
     ]

content/transactions.json

@@ -212,9 +212,13 @@
     "Fee": "12",
     "Flags": 262144,
     "LastLedgerSequence": 8007750,
-    "Amount": {
+    "LimitAmount": {
-      "$value": "100",
+      "$type": "json",
-      "$type": "xrp"
+      "$value": {
+        "currency": "USD",
+        "issuer": "rsP3mgGb2tcYUrxiLFiHJiQXhsziegtwBc",
+        "value": "100"
+      }
     },
     "Sequence": 12
   }

state/actions/addFaucetAccount.ts

@@ -27,7 +27,7 @@ export const names = [
  * new account with 10 000 XRP. Hooks Testnet /newcreds endpoint
  * is protected with CORS so that's why we did our own endpoint
  */
-export const addFaucetAccount = async (showToast: boolean = false) => {
+export const addFaucetAccount = async (name?: string, showToast: boolean = false) => {
   // Lets limit the number of faucet accounts to 5 for now
   if (state.accounts.length > 5) {
     return toast.error("You can only have maximum 6 accounts");
@@ -52,7 +52,7 @@ export const addFaucetAccount = async (showToast: boolean = false) => {
       }
       const currNames = state.accounts.map(acc => acc.name);
       state.accounts.push({
-        name: names.filter(name => !currNames.includes(name))[0],
+        name: name || names.filter(name => !currNames.includes(name))[0],
         xrp: (json.xrp || 0 * 1000000).toString(),
         address: json.address,
         secret: json.secret,

state/actions/compileCode.ts

@@ -14,19 +14,21 @@ import { ref } from "valtio";
  */
 export const compileCode = async (activeId: number) => {
   // Save the file to global state
-  saveFile(false);
+  saveFile(false, activeId);
   if (!process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT) {
     throw Error("Missing env!");
   }
   // Bail out if we're already compiling
   if (state.compiling) {
-    // if compiling is ongoing return
+    // if compiling is ongoing return // TODO Inform user about it.
     return;
   }
   // Set loading state to true
   state.compiling = true;
   state.logs = []
+  const file = state.files[activeId]
   try {
+    file.containsErrors = false
     const res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
       method: "POST",
       headers: {
@@ -40,8 +42,8 @@ export const compileCode = async (activeId: number) => {
           {
             type: "c",
             options: state.compileOptions.optimizationLevel || '-O2',
-            name: state.files[activeId].name,
+            name: file.name,
-            src: state.files[activeId].content,
+            src: file.content,
           },
         ],
       }),
@@ -49,15 +51,15 @@ export const compileCode = async (activeId: number) => {
     const json = await res.json();
     state.compiling = false;
     if (!json.success) {
-      state.logs.push({ type: "error", message: json.message });
+      const errors = [json.message]
       if (json.tasks && json.tasks.length > 0) {
         json.tasks.forEach((task: any) => {
           if (!task.success) {
-            state.logs.push({ type: "error", message: task?.console });
+            errors.push(task?.console)
           }
         });
       }
-      return toast.error(`Couldn't compile!`, { position: "bottom-center" });
+      throw errors
     }
     state.logs.push({
       type: "success",
@@ -67,8 +69,9 @@ 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);
+    file.compiledContent = ref(bufferData);
-    state.files[state.active].lastCompiled = new Date();
+    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) => {
@@ -84,10 +87,23 @@ export const compileCode = async (activeId: number) => {
     });
   } catch (err) {
     console.log(err);
-    state.logs.push({
+
-      type: "error",
+    if (err instanceof Array && typeof err[0] === 'string') {
-      message: "Error occured while compiling!",
+      err.forEach(message => {
-    });
+        state.logs.push({
+          type: "error",
+          message,
+        });
+      })
+    }
+    else {
+      state.logs.push({
+        type: "error",
+        message: "Something went wrong, check your connection try again later!",
+      });
+    }
     state.compiling = false;
+    toast.error(`Error occurred while compiling!`, { position: "bottom-center" });
+    file.containsErrors = true
   }
 };

state/actions/deployHook.tsx

@@ -189,7 +189,7 @@ export const deployHook = async (
       console.log(err);
       state.deployLogs.push({
         type: "error",
-        message: "Error occured while deploying",
+        message: "Error occurred while deploying",
       });
     }
     if (currentAccount) {
@@ -272,10 +272,10 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
       }
     } catch (err) {
       console.log(err);
-      toast.error("Error occured while deleting hoook", { id: toastId });
+      toast.error("Error occurred while deleting hook", { id: toastId });
       state.deployLogs.push({
         type: "error",
-        message: "Error occured while deleting hook",
+        message: "Error occurred while deleting hook",
       });
     }
     if (currentAccount) {

state/actions/downloadAsZip.ts

@@ -13,7 +13,7 @@ export const downloadAsZip = async () => {
         const zipFileName = guessZipFileName(files);
         zipped.saveFile(zipFileName);
     } catch (error) {
-        toast.error('Error occured while creating zip file, try again later')
+        toast.error('Error occurred while creating zip file, try again later')
     } finally {
         state.zipLoading = false
     }

state/actions/importAccount.ts

@@ -5,7 +5,7 @@ import state from '../index';
 import { names } from './addFaucetAccount';
 
 // Adds test account to global state with secret key
-export const importAccount = (secret: string) => {
+export const importAccount = (secret: string, name?: string) => {
   if (!secret) {
     return toast.error("You need to add secret!");
   }
@@ -19,7 +19,7 @@ export const importAccount = (secret: string) => {
     if (err?.message) {
       toast.error(err.message)
     } else {
-      toast.error('Error occured while importing account')
+      toast.error('Error occurred while importing account')
     }
     return;
   }
@@ -27,7 +27,7 @@ export const importAccount = (secret: string) => {
     return toast.error(`Couldn't create account!`);
   }
   state.accounts.push({
-    name: names[state.accounts.length],
+    name: name || names[state.accounts.length],
     address: account.address || "",
     secret: account.secret.familySeed || "",
     xrp: "0",

state/actions/saveFile.ts

@@ -2,14 +2,15 @@ import toast from "react-hot-toast";
 import state from '../index';
 
 // Saves the current editor content to global state
-export const saveFile = (showToast: boolean = true) => {
+export const saveFile = (showToast: boolean = true, activeId?: number) => {
   const editorModels = state.editorCtx?.getModels();
   const sought = '/' + state.files[state.active].name;
   const currentModel = editorModels?.find((editorModel) => {
     return editorModel.uri.path.endsWith(sought);
   });
+  const file = state.files[activeId || state.active]
   if (state.files.length > 0) {
-    state.files[state.active].content = currentModel?.getValue() || "";
+    file.content = currentModel?.getValue() || "";
   }
   if (showToast) {
     toast.success("Saved successfully", { position: "bottom-center" });

state/index.ts

@@ -13,9 +13,11 @@ export interface IFile {
   name: string;
   language: string;
   content: string;
+  compiledValueSnapshot?: string
   compiledContent?: ArrayBuffer | null;
   compiledWatContent?: string | null;
   lastCompiled?: Date
+  containsErrors?: boolean
 }
 
 export interface FaucetAccountRes {

state/transactions.ts

@@ -118,7 +118,7 @@ export const prepareTransaction = (data: any) => {
         // handle type: `json`
         if (_value && typeof _value === "object" && _value.$type === "json") {
             if (typeof _value.$value === "object") {
-                options[field] = _value.$value as any;
+                options[field] = { ..._value.$value } as any;
             } else {
                 try {
                     options[field] = JSON.parse(_value.$value);
@@ -131,7 +131,7 @@ export const prepareTransaction = (data: any) => {
             }
         }
 
-        // delete unneccesary fields
+        // delete unnecessary fields
         if (options[field] === undefined) {
             delete options[field];
         }

utils/comment-parser.ts

@@ -19,6 +19,6 @@ export const getErrors = (source?: string): Error | undefined => {
     );
     if (!probs.length) return undefined
     const errors = probs.map(prob => `[${prob.code}] on line ${prob.line}: ${prob.message}`)
-    const error = new Error(`The following error(s) occured while parsing JSDOC: \n${errors.join('\n')}`)
+    const error = new Error(`The following error(s) occurred while parsing JSDOC: \n${errors.join('\n')}`)
     return error
 }

utils/helpers.ts

@@ -6,4 +6,10 @@ export const guessZipFileName = (files: File[]) => {
     let parts = (files.filter(f => f.name.endsWith('.c'))[0]?.name || 'hook').split('.')
     parts = parts.length > 1 ? parts.slice(0, -1) : parts
     return parts.join('')
+}
+
+export const capitalize = (value?: string) => {
+    if (!value) return '';
+
+    return value[0].toLocaleUpperCase() + value.slice(1);
 }