Update TrustSet transaction default fields.

Update wrong amount schema.
Merge pull request #239 from XRPLF/feat/monaco-comp
2022-07-14 19:29:13 +05:30 · 2022-07-14 19:19:59 +05:30 · 2022-07-14 13:51:24 +05:30 · 2022-07-13 20:11:21 +05:30 · 2022-07-13 19:49:54 +05:30 · 2022-07-13 16:50:47 +05:30
35 changed files with 846 additions and 736 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -32,3 +32,4 @@ yarn-error.log*

 # vercel
 .vercel
+.vscode
--- a/components/Accounts.tsx
+++ b/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);
              }}
@@ -116,9 +117,16 @@ export const AccountDialog = ({
                <Text
                  css={{
                    fontFamily: "$monospace",
+                    a: { "&:hover": { textDecoration: "underline" } },
                  }}
                >
-                  {activeAccount?.address}
+                  <a
+                    href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${activeAccount?.address}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {activeAccount?.address}
+                  </a>
                </Text>
              </Flex>
              <Flex css={{ marginLeft: "auto", color: "$mauve12" }}>
@@ -158,7 +166,7 @@ export const AccountDialog = ({
                    }}
                    ghost
                    size="xs"
-                    onClick={() => setShowSecret((curr) => !curr)}
+                    onClick={() => setShowSecret(curr => !curr)}
                  >
                    {showSecret ? "Hide" : "Show"}
                  </Button>
@@ -215,7 +223,11 @@ export const AccountDialog = ({
                  </Button>
                </Text>
              </Flex>
-              <Flex css={{ marginLeft: "auto" }}>
+              <Flex
+                css={{
+                  marginLeft: "auto",
+                }}
+              >
                <a
                  href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${activeAccount?.address}`}
                  target="_blank"
@@ -237,10 +249,22 @@ export const AccountDialog = ({
                <Text
                  css={{
                    fontFamily: "$monospace",
+                    a: { "&:hover": { textDecoration: "underline" } },
                  }}
                >
                  {activeAccount && activeAccount.hooks.length > 0
-                    ? activeAccount.hooks.map((i) => truncate(i, 12)).join(",")
+                    ? activeAccount.hooks.map(i => {
+                        return (
+                          <a
+                            key={i}
+                            href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${i}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {truncate(i, 12)}
+                          </a>
+                        );
+                      })
                    : "–"}
                </Text>
              </Flex>
@@ -278,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
@@ -286,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",
@@ -299,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;
@@ -307,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";
@@ -318,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",
@@ -329,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 =
@@ -393,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)}>
-              Create
-            </Button>
+            <ImportAccountDialog type="create" />
            <ImportAccountDialog />
          </Flex>
        </Flex>
@@ -412,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}
@@ -465,7 +487,7 @@ const Accounts: FC<AccountProps> = (props) => {
                {!props.hideDeployBtn && (
                  <div
                    className="hook-deploy-button"
-                    onClick={(e) => {
+                    onClick={e => {
                      e.stopPropagation();
                    }}
                  >
@@ -491,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 [value, setValue] = useState("");
+const ImportAccountDialog = ({
+  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>
-        <DialogTitle>Import account</DialogTitle>
-        <DialogDescription>
-          <Label>Add account secret</Label>
-          <Input
-            name="secret"
-            type="password"
-            autoComplete="new-password"
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-          />
-        </DialogDescription>
+      <DialogContent aria-describedby={undefined}>
+        <DialogTitle css={{ mb: "$4" }}>{title}</DialogTitle>
+        <Flex column>
+          <Box css={{ mb: "$2" }}>
+            <Label>
+              Account name <Text muted>(optional)</Text>
+            </Label>
+            <Input
+              name="name"
+              type="text"
+              autoComplete="off"
+              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={{
@@ -529,14 +590,8 @@ const ImportAccountDialog = () => {
            <Button outline>Cancel</Button>
          </DialogClose>
          <DialogClose asChild>
-            <Button
-              variant="primary"
-              onClick={() => {
-                importAccount(value);
-                setValue("");
-              }}
-            >
-              Import account
+            <Button type="submit" variant="primary" onClick={handleSubmit}>
+              {title}
            </Button>
          </DialogClose>
        </Flex>
--- a/components/DebugStream.tsx
+++ b/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));
--- a/components/DeployEditor.tsx
+++ b/components/DeployEditor.tsx
@@ -1,7 +1,6 @@
-import React, { useRef, useState } from "react";
-import { useSnapshot, ref } from "valtio";
-import Editor, { loader } from "@monaco-editor/react";
-import type monaco from "monaco-editor";
+import React, { useState } from "react";
+import { useSnapshot } from "valtio";
+
 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 ".";
-
-loader.config({
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
+import Monaco from "./Monaco";

 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) => {
-              editorRef.current = editor;
+            onMount={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>
--- a/components/EditorNavigation.tsx
+++ b/components/EditorNavigation.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import {
  Plus,
  Share,
@@ -101,7 +101,7 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
      if (!filename) {
        return { error: "You need to add filename" };
      }
-      if (snap.files.find(file => file.name === filename)) {
+      if (snap.files.find((file) => file.name === filename)) {
        return { error: "Filename already exists." };
      }

@@ -132,22 +132,55 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
    createNewFile(filename);
    setFilename("");
  }, [filename, setIsNewfileDialogOpen, setFilename, validateFilename]);
-
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
  const files = snap.files;
  return (
    <Flex css={{ flexShrink: 0, gap: "$0" }}>
      <Flex
+        id="kissa"
+        ref={scrollRef}
        css={{
          overflowX: "scroll",
+          overflowY: "hidden",
          py: "$3",
+          pb: "$0",
          flex: 1,
          "&::-webkit-scrollbar": {
-            height: 0,
-            background: "transparent",
+            height: "0.3em",
+            background: "rgba(0,0,0,.0)",
+          },
+          "&::-webkit-scrollbar-gutter": "stable",
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: "rgba(0,0,0,.2)",
+            outline: "0px",
+            borderRadius: "9999px",
+          },
+          scrollbarColor: "rgba(0,0,0,.2) rgba(0,0,0,0)",
+          scrollbarGutter: "stable",
+          scrollbarWidth: "thin",
+          ".dark &": {
+            "&::-webkit-scrollbar": {
+              background: "rgba(0,0,0,.0)",
+            },
+            "&::-webkit-scrollbar-gutter": "stable",
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: "rgba(255,255,255,.2)",
+              outline: "0px",
+              borderRadius: "9999px",
+            },
+            scrollbarColor: "rgba(255,255,255,.2) rgba(0,0,0,0)",
+            scrollbarGutter: "stable",
+            scrollbarWidth: "thin",
          },
        }}
+        onWheelCapture={(e) => {
+          if (scrollRef.current) {
+            scrollRef.current.scrollLeft += e.deltaY;
+          }
+        }}
      >
-        <Container css={{ flex: 1 }}>
+        <Container css={{ flex: 1 }} ref={containerRef}>
          <Stack
            css={{
              gap: "$3",
@@ -233,8 +266,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                    <Label>Filename</Label>
                    <Input
                      value={filename}
-                      onChange={e => setFilename(e.target.value)}
-                      onKeyPress={e => {
+                      onChange={(e) => setFilename(e.target.value)}
+                      onKeyPress={(e) => {
                        if (e.key === "Enter") {
                          handleConfirm();
                        }
@@ -509,8 +542,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
              type="number"
              min="1"
              value={editorSettings.tabSize}
-              onChange={e =>
-                setEditorSettings(curr => ({
+              onChange={(e) =>
+                setEditorSettings((curr) => ({
                  ...curr,
                  tabSize: Number(e.target.value),
                }))
--- a/components/HooksEditor.tsx
+++ b/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
-          className="hooks-editor"
+        <Monaco
          keepCurrentModel
-          defaultLanguage={snap.files?.[snap.active]?.language}
-          language={snap.files?.[snap.active]?.language}
-          path={`file:///work/c/${snap.files?.[snap.active]?.name}`}
-          defaultValue={snap.files?.[snap.active]?.content}
-          beforeMount={(monaco) => {
+          defaultLanguage={file?.language}
+          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) =>
+              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
--- a/components/LogBox.tsx
+++ b/components/LogBox.tsx
@@ -6,7 +6,7 @@ import {
  useState,
  useCallback,
 } from "react";
-import { Notepad, Prohibit } from "phosphor-react";
+import { IconProps, Notepad, Prohibit } from "phosphor-react";
 import useStayScrolled from "react-stay-scrolled";
 import NextLink from "next/link";

@@ -24,6 +24,7 @@ interface ILogBox {
  logs: ILog[];
  renderNav?: () => ReactNode;
  enhanced?: boolean;
+  Icon?: FC<IconProps>;
 }

 const LogBox: FC<ILogBox> = ({
@@ -33,6 +34,7 @@ const LogBox: FC<ILogBox> = ({
  children,
  renderNav,
  enhanced,
+  Icon = Notepad,
 }) => {
  const logRef = useRef<HTMLPreElement>(null);
  const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
@@ -82,14 +84,14 @@ const LogBox: FC<ILogBox> = ({
              gap: "$3",
            }}
          >
-            <Notepad size="15px" /> <Text css={{ lineHeight: 1 }}>{title}</Text>
+            <Icon size="15px" /> <Text css={{ lineHeight: 1 }}>{title}</Text>
          </Heading>
          <Flex
            row
            align="center"
-            css={{
-              width: "50%", // TODO make it max without breaking layout!
-            }}
+            // css={{
+            //   maxWidth: "100%", // TODO make it max without breaking layout!
+            // }}
          >
            {renderNav?.()}
          </Flex>
@@ -162,11 +164,11 @@ export const Log: FC<ILog> = ({
    (str?: string): ReactNode => {
      if (!str || !accounts.length) return null;

-      const pattern = `(${accounts.map((acc) => acc.address).join("|")})`;
+      const pattern = `(${accounts.map(acc => acc.address).join("|")})`;
      const res = regexifyString({
        pattern: new RegExp(pattern, "gim"),
        decorator: (match, idx) => {
-          const name = accounts.find((acc) => acc.address === match)?.name;
+          const name = accounts.find(acc => acc.address === match)?.name;
          return (
            <Link
              key={match + idx}
@@ -188,13 +190,13 @@ export const Log: FC<ILog> = ({
  );

  let message: ReactNode;
-  
-  if (typeof _message === 'string') {
+
+  if (typeof _message === "string") {
    _message = _message.trim().replace(/\n /gi, "\n");
-    message = enrichAccounts(_message)
-  }
-  else {
-    message = _message
+    if (_message) message = enrichAccounts(_message);
+    else message = <Text muted>{'""'}</Text>
+  } else {
+    message = _message;
  }

  const jsonData = enrichAccounts(_jsonData);
--- a/components/LogBoxForScripts.tsx
+++ b/components/LogBoxForScripts.tsx
@@ -1,234 +0,0 @@
-import {
-  useRef,
-  useLayoutEffect,
-  ReactNode,
-  FC,
-  useState,
-  useCallback,
-} from "react";
-import { FileJs, Prohibit } from "phosphor-react";
-import useStayScrolled from "react-stay-scrolled";
-import NextLink from "next/link";
-
-import Container from "./Container";
-import LogText from "./LogText";
-import state, { ILog } from "../state";
-import { Pre, Link, Heading, Button, Text, Flex, Box } from ".";
-import regexifyString from "regexify-string";
-import { useSnapshot } from "valtio";
-import { AccountDialog } from "./Accounts";
-import RunScript from "./RunScript";
-
-interface ILogBox {
-  title: string;
-  clearLog?: () => void;
-  logs: ILog[];
-  renderNav?: () => ReactNode;
-  enhanced?: boolean;
-  showButtons?: boolean;
-}
-
-const LogBox: FC<ILogBox> = ({
-  title,
-  clearLog,
-  logs,
-  children,
-  renderNav,
-  enhanced,
-  showButtons = true,
-}) => {
-  const logRef = useRef<HTMLPreElement>(null);
-  const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
-  const snap = useSnapshot(state);
-  useLayoutEffect(() => {
-    stayScrolled();
-  }, [stayScrolled, logs]);
-
-  return (
-    <Flex
-      as="div"
-      css={{
-        display: "flex",
-        borderTop: "1px solid $mauve6",
-        background: "$mauve1",
-        position: "relative",
-        flex: 1,
-        height: "100%",
-      }}
-    >
-      <Container
-        css={{
-          px: 0,
-          height: "100%",
-        }}
-      >
-        <Flex
-          fluid
-          css={{
-            height: "48px",
-            alignItems: "center",
-            fontSize: "$sm",
-            fontWeight: 300,
-          }}
-        >
-          <Heading
-            as="h3"
-            css={{
-              fontWeight: 300,
-              m: 0,
-              fontSize: "11px",
-              color: "$mauve12",
-              px: "$3",
-              textTransform: "uppercase",
-              alignItems: "center",
-              display: "inline-flex",
-              gap: "$3",
-              mr: "$3",
-            }}
-          >
-            <FileJs size="15px" /> <Text css={{ lineHeight: 1 }}>{title}</Text>
-          </Heading>
-          {showButtons && (
-            <Flex css={{ gap: "$3" }}>
-              {snap.files
-                .filter((f) => f.name.endsWith(".js"))
-                .map((file) => (
-                  <RunScript file={file} key={file.name} />
-                ))}
-            </Flex>
-          )}
-          <Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
-            {clearLog && (
-              <Button ghost size="xs" onClick={clearLog}>
-                <Prohibit size="14px" />
-              </Button>
-            )}
-          </Flex>
-        </Flex>
-        <Box
-          as="pre"
-          ref={logRef}
-          css={{
-            margin: 0,
-            // display: "inline-block",
-            display: "flex",
-            flexDirection: "column",
-            width: "100%",
-            height: "calc(100% - 48px)", // 100% minus the logbox header height
-            overflowY: "auto",
-            fontSize: "13px",
-            fontWeight: "$body",
-            fontFamily: "$monospace",
-            px: "$3",
-            pb: "$2",
-            whiteSpace: "normal",
-          }}
-        >
-          {logs?.map((log, index) => (
-            <Box
-              as="span"
-              key={log.type + index}
-              css={{
-                "@hover": {
-                  "&:hover": {
-                    backgroundColor: enhanced ? "$backgroundAlt" : undefined,
-                  },
-                },
-                p: enhanced ? "$1" : undefined,
-                my: enhanced ? "$1" : undefined,
-              }}
-            >
-              <Log {...log} />
-            </Box>
-          ))}
-          {children}
-        </Box>
-      </Container>
-    </Flex>
-  );
-};
-
-export const Log: FC<ILog> = ({
-  type,
-  timestring,
-  message: _message,
-  link,
-  linkText,
-  defaultCollapsed,
-  jsonData: _jsonData,
-}) => {
-  const [expanded, setExpanded] = useState(!defaultCollapsed);
-  const { accounts } = useSnapshot(state);
-  const [dialogAccount, setDialogAccount] = useState<string | null>(null);
-
-  const enrichAccounts = useCallback(
-    (str?: string): ReactNode => {
-      if (!str || !accounts.length) return null;
-
-      const pattern = `(${accounts.map((acc) => acc.address).join("|")})`;
-      const res = regexifyString({
-        pattern: new RegExp(pattern, "gim"),
-        decorator: (match, idx) => {
-          const name = accounts.find((acc) => acc.address === match)?.name;
-          return (
-            <Link
-              key={match + idx}
-              as="a"
-              onClick={() => setDialogAccount(match)}
-              title={match}
-              highlighted
-            >
-              {name || match}
-            </Link>
-          );
-        },
-        input: str,
-      });
-
-      return <>{res}</>;
-    },
-    [accounts]
-  );
-
-  let message: ReactNode;
-
-  if (typeof _message === "string") {
-    _message = _message.trim().replace(/\n /gi, "\n");
-    message = enrichAccounts(_message);
-  } else {
-    message = _message;
-  }
-
-  const jsonData = enrichAccounts(_jsonData);
-
-  return (
-    <>
-      <AccountDialog
-        setActiveAccountAddress={setDialogAccount}
-        activeAccountAddress={dialogAccount}
-      />
-      <LogText variant={type}>
-        {timestring && (
-          <Text muted monospace>
-            {timestring}{" "}
-          </Text>
-        )}
-        <Pre>{message} </Pre>
-        {link && (
-          <NextLink href={link} shallow passHref>
-            <Link as="a">{linkText}</Link>
-          </NextLink>
-        )}
-        {jsonData && (
-          <Link onClick={() => setExpanded(!expanded)} as="a">
-            {expanded ? "Collapse" : "Expand"}
-          </Link>
-        )}
-        {expanded && jsonData && <Pre block>{jsonData}</Pre>}
-      </LogText>
-      <br />
-    </>
-  );
-};
-
-export default LogBox;
--- a/components/Monaco.tsx
+++ b/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;
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -340,6 +340,8 @@ const Navigation = () => {
              height: 0,
              background: "transparent",
            },
+            scrollbarColor: "transparent",
+            scrollbarWidth: "none",
          }}
        >
          <Stack
--- a/components/RunScript/index.tsx
+++ b/components/RunScript/index.tsx
@@ -1,10 +1,14 @@
-import * as Handlebars from "handlebars";
 import { Play, X } from "phosphor-react";
-import { useCallback, useEffect, useState } from "react";
-import state, { IFile, ILog } from "../../state";
+import {
+  HTMLInputTypeAttribute,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import state, { IAccount, IFile, ILog } from "../../state";
 import Button from "../Button";
 import Box from "../Box";
-import Input from "../Input";
+import Input, { Label } from "../Input";
 import Stack from "../Stack";
 import {
  Dialog,
@@ -17,16 +21,21 @@ import {
 import Flex from "../Flex";
 import { useSnapshot } from "valtio";
 import Select from "../Select";
+import Text from "../Text";
 import { saveFile } from "../../state/actions/saveFile";
+import { getErrors, getTags } from "../../utils/comment-parser";
+import toast from "react-hot-toast";

-Handlebars.registerHelper(
-  "customize_input",
-  function (/* dynamic arguments */) {
-    return new Handlebars.SafeString(arguments[0]);
+const generateHtmlTemplate = (code: string, data?: Record<string, any>) => {
+  let processString: string | undefined;
+  const process = { env: { NODE_ENV: "production" } } as any;
+  if (data) {
+    Object.keys(data).forEach(key => {
+      process.env[key] = data[key];
+    });
  }
-);
+  processString = JSON.stringify(process);

-const generateHtmlTemplate = (code: string) => {
  return `
  <html>
  <head>
@@ -55,8 +64,21 @@ const generateHtmlTemplate = (code: string) => {
        parent.window.postMessage({ type: 'warning', args: args || [] }, '*');
        warnLog.apply(console, args);
      }
+
+     
+      var process = '${processString || "{}"}';
+      process = JSON.parse(process);
+      window.process = process
+
+      function windowErrorHandler(event) {
+        event.preventDefault() // to prevent automatically logging to console
+        console.error(event.error?.toString())
+      }
+
+      window.addEventListener('error', windowErrorHandler);
    </script>
-    <script type="module">   
+
+    <script type="module">
      ${code}
    </script>
  </head>
@@ -69,72 +91,57 @@ const generateHtmlTemplate = (code: string) => {
 type Fields = Record<
  string,
  {
-    key: string;
+    name: string;
    value: string;
-    label?: string;
-    type?: string;
-    attach?: "account_secret" | "account_address" | string;
+    type?: "Account" | `Account.${keyof IAccount}` | HTMLInputTypeAttribute;
+    description?: string;
+    required?: boolean;
  }
 >;

 const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
  const snap = useSnapshot(state);
  const [templateError, setTemplateError] = useState("");
-  const getFieldValues = useCallback(() => {
-    try {
-      const parsed = Handlebars.parse(content);
-      const names = parsed.body
-        .filter((i) => i.type === "MustacheStatement")
-        .map((block) => {
-          // @ts-expect-error
-          const type = block.hash?.pairs?.find((i) => i.key == "type");
-          // @ts-expect-error
-          const attach = block.hash?.pairs?.find((i) => i.key == "attach");
-          // @ts-expect-error
-          const label = block.hash?.pairs?.find((i) => i.key == "label");
-          const key =
-            // @ts-expect-error
-            block?.path?.original === "customize_input"
-              ? // @ts-expect-error
-                block?.params?.[0].original
-              : // @ts-expect-error
-                block?.path?.original;
-          return {
-            key,
-            label: label?.value?.original || key,
-            attach: attach?.value?.original,
-            type: type?.value?.original,
-            value: "",
-          };
-        });
-      const defaultState: Fields = {};
-
-      if (names) {
-        names.forEach((field) => (defaultState[field.key] = field));
-      }
-      setTemplateError("");
-      return defaultState;
-    } catch (err) {
-      console.log(err);
-      setTemplateError("Could not parse template");
-      return undefined;
-    }
-  }, [content]);
-
-  // const defaultFieldValues = getFieldValues();
-
  const [fields, setFields] = useState<Fields>({});
  const [iFrameCode, setIframeCode] = useState("");
  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const runScript = () => {
-    const fieldsToSend: Record<string, string> = {};
-    Object.entries(fields).map(([key, obj]) => {
-      fieldsToSend[key] = obj.value;
-    });
-    const template = Handlebars.compile(content, { strict: false });
+
+  const getFields = useCallback(() => {
+    const inputTags = ["input", "param", "arg", "argument"];
+    const tags = getTags(content)
+      .filter(tag => inputTags.includes(tag.tag))
+      .filter(tag => !!tag.name);
+
+    let _fields = tags.map(tag => ({
+      name: tag.name,
+      value: tag.default || "",
+      type: tag.type,
+      description: tag.description,
+      required: !tag.optional,
+    }));
+
+    const fields: Fields = _fields.reduce((acc, field) => {
+      acc[field.name] = field;
+      return acc;
+    }, {} as Fields);
+
+    const error = getErrors(content);
+    if (error) setTemplateError(error.message);
+    else setTemplateError("");
+
+    return fields;
+  }, [content]);
+
+  const runScript = useCallback(() => {
    try {
-      const code = template(fieldsToSend);
-      setIframeCode(generateHtmlTemplate(code));
+      let data: any = {};
+      Object.keys(fields).forEach(key => {
+        data[key] = fields[key].value;
+      });
+      const template = generateHtmlTemplate(content, data);
+
+      setIframeCode(template);
+
      state.scriptLogs = [
        ...snap.scriptLogs,
        { type: "success", message: "Started running..." },
@@ -146,7 +153,7 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
        { type: "error", message: err?.message || "Could not parse template" },
      ];
    }
-  };
+  }, [content, fields, snap.scriptLogs]);

  useEffect(() => {
    const handleEvent = (e: any) => {
@@ -163,17 +170,29 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
  }, [snap.scriptLogs]);

  useEffect(() => {
-    const newDefaultState = getFieldValues();
-    setFields(newDefaultState || {});
-  }, [content, setFields, getFieldValues]);
+    const defaultFields = getFields() || {};
+    setFields(defaultFields);
+  }, [content, setFields, getFields]);

-  const options = snap.accounts?.map((acc) => ({
+  const accOptions = snap.accounts?.map(acc => ({
+    ...acc,
    label: acc.name,
-    secret: acc.secret,
-    address: acc.address,
    value: acc.address,
  }));

+  const isDisabled = Object.values(fields).some(
+    field => field.required && !field.value
+  );
+
+  const handleRun = useCallback(() => {
+    if (isDisabled)
+      return toast.error("Please fill in all the required fields.");
+
+    state.scriptLogs = [];
+    runScript();
+    setIsDialogOpen(false);
+  }, [isDisabled, runScript]);
+
  return (
    <>
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
@@ -191,74 +210,87 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
        <DialogContent>
          <DialogTitle>Run {name} script</DialogTitle>
          <DialogDescription>
-            You are about to run scripts provided by the developer of the hook,
-            make sure you know what you are doing.
-            <br />
+            <Box>
+              You are about to run scripts provided by the developer of the
+              hook, make sure you trust the author before you continue.
+            </Box>
            {templateError && (
              <Box
                as="span"
-                css={{ display: "block", color: "$error", mt: "$3" }}
+                css={{
+                  display: "block",
+                  color: "$error",
+                  mt: "$3",
+                  whiteSpace: "pre",
+                }}
              >
-                Error occured while parsing template, modify script and try
-                again!
+                {templateError}
              </Box>
            )}
-            <br />
-            {Object.keys(fields).length > 0
-              ? `You also need to fill in following parameters to run the script`
-              : ""}
-          </DialogDescription>
-          <Stack css={{ width: "100%" }}>
-            {Object.keys(fields).map((key) => (
-              <Box key={key} css={{ width: "100%" }}>
-                <label>
-                  {fields[key]?.label || key}{" "}
-                  {fields[key].attach === "account_secret" &&
-                    `(Script uses account secret)`}
-                </label>
-                {fields[key].attach === "account_secret" ||
-                fields[key].attach === "account_address" ? (
-                  <Select
-                    css={{ mt: "$1" }}
-                    options={options}
-                    onChange={(val: any) => {
-                      setFields({
-                        ...fields,
-                        [key]: {
-                          ...fields[key],
-                          value:
-                            fields[key].attach === "account_secret"
-                              ? val.secret
-                              : val.address,
-                        },
-                      });
-                    }}
-                    value={options.find(
-                      (opt) =>
-                        opt.address === fields[key].value ||
-                        opt.secret === fields[key].value
-                    )}
-                  />
-                ) : (
-                  <Input
-                    type={fields[key].type || "text"}
-                    value={
-                      typeof fields[key].value !== "string"
-                        ? // @ts-expect-error
-                          fields[key].value.value
-                        : fields[key].value
-                    }
-                    css={{ mt: "$1" }}
-                    onChange={(e) => {
-                      setFields({
-                        ...fields,
-                        [key]: { ...fields[key], value: e.target.value },
-                      });
-                    }}
-                  />
-                )}
+            {Object.keys(fields).length > 0 && (
+              <Box css={{ mt: "$4", mb: 0 }}>
+                Fill in the following parameters to run the script.
              </Box>
-            ))}
+            )}
+          </DialogDescription>
+
+          <Stack css={{ width: "100%" }}>
+            {Object.keys(fields).map(key => {
+              const { name, value, type, description, required } = fields[key];
+
+              const isAccount = type?.startsWith("Account");
+              const isAccountSecret = type === "Account.secret";
+
+              const accountField =
+                (isAccount && type?.split(".")[1]) || "address";
+
+              return (
+                <Box key={name} css={{ width: "100%" }}>
+                  <Label
+                    css={{ display: "flex", justifyContent: "space-between" }}
+                  >
+                    <span>
+                      {description || name} {required && <Text error>*</Text>}
+                    </span>
+                    {isAccountSecret && (
+                      <Text error small css={{ alignSelf: "end" }}>
+                        can access account secret key
+                      </Text>
+                    )}
+                  </Label>
+                  {isAccount ? (
+                    <Select
+                      css={{ mt: "$1" }}
+                      options={accOptions}
+                      onChange={(val: any) => {
+                        setFields({
+                          ...fields,
+                          [key]: {
+                            ...fields[key],
+                            value: val[accountField],
+                          },
+                        });
+                      }}
+                      value={accOptions.find(
+                        (acc: any) => acc[accountField] === value
+                      )}
+                    />
+                  ) : (
+                    <Input
+                      type={type || "text"}
+                      value={value}
+                      css={{ mt: "$1" }}
+                      onChange={e => {
+                        setFields({
+                          ...fields,
+                          [key]: { ...fields[key], value: e.target.value },
+                        });
+                      }}
+                    />
+                  )}
+                </Box>
+              );
+            })}
            <Flex
              css={{ justifyContent: "flex-end", width: "100%", gap: "$3" }}
            >
@@ -267,16 +299,8 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
              </DialogClose>
              <Button
                variant="primary"
-                isDisabled={
-                  (Object.entries(fields).length > 0 &&
-                    Object.entries(fields).some(([key, obj]) => !obj.value)) ||
-                  Boolean(templateError)
-                }
-                onClick={() => {
-                  state.scriptLogs = [];
-                  runScript();
-                  setIsDialogOpen(false);
-                }}
+                isDisabled={isDisabled}
+                onClick={handleRun}
              >
                Run script
              </Button>
--- a/components/SetHookDialog.tsx
+++ b/components/SetHookDialog.tsx
@@ -22,12 +22,12 @@ import {
 import { TTS, tts } from "../utils/hookOnCalculator";
 import { deployHook } from "../state/actions";
 import { useSnapshot } from "valtio";
-import state from "../state";
+import state, { SelectOption } from "../state";
 import toast from "react-hot-toast";
 import { prepareDeployHookTx, sha256 } from "../state/actions/deployHook";
 import estimateFee from "../utils/estimateFee";

-const transactionOptions = Object.keys(tts).map((key) => ({
+const transactionOptions = Object.keys(tts).map(key => ({
  label: key,
  value: key as keyof TTS,
 }));
@@ -56,9 +56,22 @@ export type SetHookData = {
 export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
  ({ accountAddress }) => {
    const snap = useSnapshot(state);
-    const account = snap.accounts.find((acc) => acc.address === accountAddress);
-
+    const activeFile = snap.files[snap.active]?.compiledContent
+      ? snap.files[snap.active]
+      : snap.files.filter(file => file.compiledContent)[0];
    const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
+
+    const accountOptions: SelectOption[] = snap.accounts.map(acc => ({
+      label: acc.name,
+      value: acc.address,
+    }));
+
+    const [selectedAccount, setSelectedAccount] = useState(
+      accountOptions.find(acc => acc.value === accountAddress)
+    );
+    const account = snap.accounts.find(
+      acc => acc.address === selectedAccount?.value
+    );
    const {
      register,
      handleSubmit,
@@ -68,11 +81,13 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
      getValues,
      formState: { errors },
    } = useForm<SetHookData>({
-      defaultValues: {
-        HookNamespace:
-          snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
-        Invoke: transactionOptions.filter((to) => to.label === "ttPAYMENT"),
-      },
+      defaultValues: snap.deployValues?.[activeFile?.name]
+        ? snap.deployValues[activeFile?.name]
+        : {
+            HookNamespace:
+              snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
+            Invoke: transactionOptions.filter(to => to.label === "ttPAYMENT"),
+          },
    });
    const { fields, append, remove } = useFieldArray({
      control,
@@ -81,14 +96,21 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
    const [formInitialized, setFormInitialized] = useState(false);
    const [estimateLoading, setEstimateLoading] = useState(false);
    const watchedFee = watch("Fee");
+
    // Update value if activeWat changes
    useEffect(() => {
-      setValue(
-        "HookNamespace",
-        snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
-      );
+      const defaultValue = snap.deployValues?.[activeFile?.name]
+        ? snap.deployValues?.[activeFile?.name].HookNamespace
+        : snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "";
+      setValue("HookNamespace", defaultValue);
      setFormInitialized(true);
-    }, [snap.activeWat, snap.files, setValue]);
+    }, [
+      snap.activeWat,
+      snap.files,
+      setValue,
+      activeFile?.name,
+      snap.deployValues,
+    ]);
    useEffect(() => {
      if (
        watchedFee &&
@@ -108,7 +130,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
    const [hashedNamespace, setHashedNamespace] = useState("");
    const namespace = watch(
      "HookNamespace",
-      snap.files?.[snap.active]?.name?.split(".")?.[0] || ""
+      snap.deployValues?.[activeFile?.name]
+        ? snap.deployValues?.[activeFile?.name].HookNamespace
+        : snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
    );
    const calculateHashedValue = useCallback(async () => {
      const hashedVal = await sha256(namespace);
@@ -136,14 +160,10 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [formInitialized]);

-    if (!account) {
-      return null;
-    }
-
    const tooLargeFile = () => {
      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];
      return Boolean(
        activeFile?.compiledContent?.byteLength &&
          activeFile?.compiledContent?.byteLength >= 64000
@@ -152,8 +172,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(

    const onSubmit: SubmitHandler<SetHookData> = async (data) => {
      const currAccount = state.accounts.find(
-        (acc) => acc.address === account.address
+        (acc) => acc.address === account?.address
      );
+      if (!account) return;
      if (currAccount) currAccount.isLoading = true;
      const res = await deployHook(account, data);
      if (currAccount) currAccount.isLoading = false;
@@ -173,8 +194,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
            uppercase
            variant={"secondary"}
            disabled={
+              !account ||
              account.isLoading ||
-              !snap.files.filter((file) => file.compiledWatContent).length ||
+              !snap.files.filter(file => file.compiledWatContent).length ||
              tooLargeFile()
            }
          >
@@ -186,14 +208,22 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
            <DialogTitle>Deploy configuration</DialogTitle>
            <DialogDescription as="div">
              <Stack css={{ width: "100%", flex: 1 }}>
+                <Box css={{ width: "100%" }}>
+                  <Label>Account</Label>
+                  <Select
+                    instanceId="deploy-account"
+                    placeholder="Select account"
+                    hideSelectedOptions
+                    options={accountOptions}
+                    value={selectedAccount}
+                    onChange={(acc: any) => setSelectedAccount(acc)}
+                  />
+                </Box>
                <Box css={{ width: "100%" }}>
                  <Label>Invoke on transactions</Label>
                  <Controller
                    name="Invoke"
                    control={control}
-                    defaultValue={transactionOptions.filter(
-                      (to) => to.label === "ttPAYMENT"
-                    )}
                    render={({ field }) => (
                      <Select
                        {...field}
@@ -210,9 +240,6 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                  <Input
                    {...register("HookNamespace", { required: true })}
                    autoComplete={"off"}
-                    defaultValue={
-                      snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
-                    }
                  />
                  {errors.HookNamespace?.type === "required" && (
                    <Box css={{ display: "inline", color: "$red11" }}>
@@ -275,7 +302,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                      type="number"
                      {...register("Fee", { required: true })}
                      autoComplete={"off"}
-                      onKeyPress={(e) => {
+                      onKeyPress={e => {
                        if (e.key === "." || e.key === ",") {
                          e.preventDefault();
                        }
@@ -307,8 +334,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                        alignContent: "center",
                        display: "flex",
                      }}
-                      onClick={async (e) => {
+                      onClick={async e => {
                        e.preventDefault();
+                        if (!account) return;
                        setEstimateLoading(true);
                        const formValues = getValues();
                        try {
@@ -407,7 +435,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
              <Button
                variant="primary"
                type="submit"
-                isLoading={account.isLoading}
+                isLoading={account?.isLoading}
              >
                Set Hook
              </Button>
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -31,13 +31,15 @@ interface TabProps {

 // TODO customise messages shown
 interface Props {
+  label?: string;
  activeIndex?: number;
  activeHeader?: string;
  headless?: boolean;
  children: ReactElement<TabProps>[];
  keepAllAlive?: boolean;
  defaultExtension?: string;
-  forceDefaultExtension?: boolean;
+  appendDefaultExtension?: boolean;
+  allowedExtensions?: string[];
  onCreateNewTab?: (name: string) => any;
  onCloseTab?: (index: number, header?: string) => any;
  onChangeActive?: (index: number, header?: string) => any;
@@ -46,6 +48,7 @@ interface Props {
 export const Tab = (props: TabProps) => null;

 export const Tabs = ({
+  label = "Tab",
  children,
  activeIndex,
  activeHeader,
@@ -55,7 +58,8 @@ export const Tabs = ({
  onCloseTab,
  onChangeActive,
  defaultExtension = "",
-  forceDefaultExtension,
+  appendDefaultExtension = false,
+  allowedExtensions,
 }: Props) => {
  const [active, setActive] = useState(activeIndex || 0);
  const tabs: TabProps[] = children.map(elem => elem.props);
@@ -86,9 +90,13 @@ export const Tabs = ({
      if (tabs.find(tab => tab.header === tabname)) {
        return { error: "Name already exists." };
      }
+      const ext = tabname.split(".").pop() || "";
+      if (allowedExtensions && !allowedExtensions.includes(ext)) {
+        return { error: "This file extension is not allowed!" };
+      }
      return { error: null };
    },
-    [tabs]
+    [allowedExtensions, tabs]
  );

  const handleActiveChange = useCallback(
@@ -101,9 +109,11 @@ export const Tabs = ({

  const handleCreateTab = useCallback(() => {
    // add default extension in case omitted
-    let _tabname = tabname.includes(".") ? tabname : tabname + defaultExtension;
-    if (forceDefaultExtension && !_tabname.endsWith(defaultExtension)) {
-      _tabname = _tabname + defaultExtension;
+    let _tabname = tabname.includes(".")
+      ? tabname
+      : `${tabname}.${defaultExtension}`;
+    if (appendDefaultExtension && !_tabname.endsWith(defaultExtension)) {
+      _tabname = `${_tabname}.${defaultExtension}`;
    }

    const chk = validateTabname(_tabname);
@@ -122,7 +132,7 @@ export const Tabs = ({
  }, [
    tabname,
    defaultExtension,
-    forceDefaultExtension,
+    appendDefaultExtension,
    validateTabname,
    onCreateNewTab,
    handleActiveChange,
@@ -206,13 +216,13 @@ export const Tabs = ({
                  size="sm"
                  css={{ alignItems: "center", px: "$2", mr: "$3" }}
                >
-                  <Plus size="16px" /> {tabs.length === 0 && "Add new tab"}
+                  <Plus size="16px" /> {tabs.length === 0 && `Add new ${label.toLocaleLowerCase()}`}
                </Button>
              </DialogTrigger>
              <DialogContent>
-                <DialogTitle>Create new tab</DialogTitle>
+                <DialogTitle>Create new {label.toLocaleLowerCase()}</DialogTitle>
                <DialogDescription>
-                  <Label>Tabname</Label>
+                  <Label>{label} name</Label>
                  <Input
                    value={tabname}
                    onChange={e => setTabname(e.target.value)}
--- a/components/Text.tsx
+++ b/components/Text.tsx
@@ -7,20 +7,35 @@ const Text = styled("span", {
  variants: {
    small: {
      true: {
-        fontSize: '$xs'
-      }
+        fontSize: "$xs",
+      },
    },
    muted: {
      true: {
-        color: '$mauve9'
-      }
+        color: "$mauve9",
+      },
+    },
+    error: {
+      true: {
+        color: "$error",
+      },
+    },
+    warning: {
+      true: {
+        color: "$warning",
+      },
    },
    monospace: {
      true: {
-        fontFamily: '$monospace'
-      }
-    }
-  }
+        fontFamily: "$monospace",
+      },
+    },
+    block: {
+      true: {
+        display: "block",
+      },
+    },
+  },
 });

 export default Text;
--- a/components/Transaction/json.tsx
+++ b/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 { Link } from "..";
+import { Flex, 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";
-
-loader.config({
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
+import Monaco from "../Monaco";
+import type monaco from "monaco-editor";

 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
-      fluid
-      column
-      css={{ height: "calc(100% - 45px)", position: "relative" }}
-    >
-      <Editor
-        className="hooks-editor"
-        language={"json"}
-        path={path}
-        height="100%"
-        beforeMount={monaco => {
-          monaco.editor.defineTheme("dark", dark as any);
-          monaco.editor.defineTheme("light", light as any);
-        }}
-        value={editorValue}
-        onChange={val => setState({ editorValue: val })}
-        onMount={(editor, monaco) => {
-          editor.updateOptions({
-            minimap: { enabled: false },
-            glyphMargin: true,
-            tabSize: editorSettings.tabSize,
-            dragAndDrop: true,
-            fontSize: 14,
-          });
+    <Monaco
+      rootProps={{
+        css: { height: "calc(100% - 45px)" },
+      }}
+      language={"json"}
+      id={header}
+      height="100%"
+      value={editorValue}
+      onChange={val => setState({ editorValue: val })}
+      onMount={(editor, monaco) => {
+        editor.updateOptions({
+          minimap: { enabled: false },
+          glyphMargin: true,
+          tabSize: editorSettings.tabSize,
+          dragAndDrop: true,
+          fontSize: 14,
+        });

-          // register onExit cb
-          const model = editor.getModel();
-          model?.onWillDispose(() => onExit(model.getValue()));
-        }}
-        theme={theme === "dark" ? "dark" : "light"}
-      />
-      {hasUnsaved && (
-        <Text muted small css={{ position: "absolute", bottom: 0, right: 0 }}>
-          This file has unsaved changes.{" "}
-          <Link onClick={() => saveState(editorValue, currTxType)}>save</Link>{" "}
-          <Link onClick={discardChanges}>discard</Link>
-        </Text>
-      )}
-    </Flex>
+        setMonacoInst(monaco);
+        // register onExit cb
+        const model = editor.getModel();
+        model?.onWillDispose(() => onExit(model.getValue()));
+      }}
+      overlay={
+        hasUnsaved ? (
+          <Flex
+            row
+            align="center"
+            css={{ fontSize: "$xs", color: "$textMuted", ml: 'auto' }}
+          >
+            <Text muted small>
+              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
+      }
+    />
  );
 };
--- a/components/Transaction/ui.tsx
+++ b/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) => {
-    setState({ selectedTransaction: tt });
+  const handleChangeTxType = useCallback(
+    (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();
                            }
--- a/content/amount-schema.json
+++ b/content/amount-schema.json
@@ -40,9 +40,9 @@
      {
        "label": "Token",
        "body": {
-          "currency": "${1:13.1}",
-          "value": "${2:FOO}",
-          "description": "${3:rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpns}"
+          "currency": "${1:USD}",
+          "value": "${2:100}",
+          "issuer": "${3:rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpns}"
        }
      }
    ]
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -212,9 +212,13 @@
    "Fee": "12",
    "Flags": 262144,
    "LastLedgerSequence": 8007750,
-    "Amount": {
-      "$value": "100",
-      "$type": "xrp"
+    "LimitAmount": {
+      "$type": "json",
+      "$value": {
+        "currency": "USD",
+        "issuer": "rsP3mgGb2tcYUrxiLFiHJiQXhsziegtwBc",
+        "value": "100"
+      }
    },
    "Sequence": 12
  }
--- a/next.config.js
+++ b/next.config.js
@@ -8,9 +8,6 @@ module.exports = {
    config.resolve.alias["vscode"] = require.resolve(
      "@codingame/monaco-languageclient/lib/vscode-compatibility"
    );
-    config.resolve.alias["handlebars"] = require.resolve(
-      "handlebars/dist/handlebars.js"
-    );
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
--- a/package.json
+++ b/package.json
@@ -25,10 +25,10 @@
    "@radix-ui/react-tooltip": "^0.1.7",
    "@stitches/react": "^1.2.8",
    "base64-js": "^1.5.1",
+    "comment-parser": "^1.3.1",
    "dinero.js": "^1.9.1",
    "file-saver": "^2.0.5",
    "filesize": "^8.0.7",
-    "handlebars": "^4.7.7",
    "javascript-time-ago": "^2.3.11",
    "jszip": "^3.7.1",
    "lodash.uniqby": "^4.7.0",
@@ -36,6 +36,7 @@
    "monaco-editor": "^0.33.0",
    "next": "^12.0.4",
    "next-auth": "^4.0.0-beta.5",
+    "next-plausible": "^3.2.0",
    "next-themes": "^0.1.1",
    "normalize-url": "^7.0.2",
    "octokit": "^1.7.0",
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,6 +7,7 @@ import { ThemeProvider } from "next-themes";
 import { Toaster } from "react-hot-toast";
 import { useRouter } from "next/router";
 import { IdProvider } from "@radix-ui/react-id";
+import PlausibleProvider from "next-plausible";

 import { darkTheme, css } from "../stitches.config";
 import Navigation from "../components/Navigation";
@@ -17,6 +18,8 @@ import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en.json";
 import { useSnapshot } from "valtio";
 import Alert from "../components/AlertDialog";
+import { Button, Flex } from "../components";
+import { ChatCircleText } from "phosphor-react";

 TimeAgo.setDefaultLocale(en.locale);
 TimeAgo.addLocale(en);
@@ -37,7 +40,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
      if (
        !gistId &&
        router.isReady &&
-        !router.pathname.includes("/sign-in") &&
+        router.pathname.includes("/develop") &&
        !snap.files.length &&
        !snap.mainModalShowed
      ) {
@@ -114,6 +117,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
          media="(prefers-color-scheme: light)"
        />
      </Head>
+
      <IdProvider>
        <SessionProvider session={session}>
          <ThemeProvider
@@ -125,23 +129,40 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
              dark: darkTheme.className,
            }}
          >
-            <Navigation />
-            <Component {...pageProps} />
-            <Toaster
-              toastOptions={{
-                className: css({
-                  backgroundColor: "$mauve1",
-                  color: "$mauve10",
-                  fontSize: "$sm",
-                  zIndex: 9999,
-                  ".dark &": {
-                    backgroundColor: "$mauve4",
-                    color: "$mauve12",
-                  },
-                })(),
-              }}
-            />
-            <Alert />
+            <PlausibleProvider
+              domain="hooks-builder.xrpl.org"
+              trackOutboundLinks
+            >
+              <Navigation />
+              <Component {...pageProps} />
+              <Toaster
+                toastOptions={{
+                  className: css({
+                    backgroundColor: "$mauve1",
+                    color: "$mauve10",
+                    fontSize: "$sm",
+                    zIndex: 9999,
+                    ".dark &": {
+                      backgroundColor: "$mauve4",
+                      color: "$mauve12",
+                    },
+                  })(),
+                }}
+              />
+              <Alert />
+              <Flex
+                as="a"
+                href="https://github.com/XRPLF/Hooks/discussions"
+                target="_blank"
+                rel="noopener noreferrer"
+                css={{ position: "fixed", right: "$4", bottom: "$4" }}
+              >
+                <Button size="sm" variant="primary" outline>
+                  <ChatCircleText size={14} style={{ marginRight: "0px" }} />
+                  Bugs & Discussions
+                </Button>
+              </Flex>
+            </PlausibleProvider>
          </ThemeProvider>
        </SessionProvider>
      </IdProvider>
--- a/pages/develop/[[...slug]].tsx
+++ b/pages/develop/[[...slug]].tsx
@@ -1,14 +1,13 @@
 import { Label } from "@radix-ui/react-label";
 import type { NextPage } from "next";
 import dynamic from "next/dynamic";
-import { Gear, Play } from "phosphor-react";
+import { FileJs, Gear, Play } from "phosphor-react";
 import Hotkeys from "react-hot-keys";
 import Split from "react-split";
 import { useSnapshot } from "valtio";
 import { ButtonGroup, Flex } from "../../components";
 import Box from "../../components/Box";
 import Button from "../../components/Button";
-import LogBoxForScripts from "../../components/LogBoxForScripts";
 import Popover from "../../components/Popover";
 import RunScript from "../../components/RunScript";
 import state from "../../state";
@@ -244,8 +243,8 @@ const Home: NextPage = () => {
              flex: 1,
            }}
          >
-            <LogBoxForScripts
-              showButtons={false}
+            <LogBox
+              Icon={FileJs}
              title="Script Log"
              logs={snap.scriptLogs}
              clearLog={() => (state.scriptLogs = [])}
--- a/pages/test/[[...slug]].tsx
+++ b/pages/test/[[...slug]].tsx
@@ -6,8 +6,9 @@ import Transaction from "../../components/Transaction";
 import state from "../../state";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
 import { transactionsState, modifyTransaction } from "../../state";
-import LogBoxForScripts from "../../components/LogBoxForScripts";
 import { useEffect, useState } from "react";
+import { FileJs } from "phosphor-react";
+import RunScript from '../../components/RunScript';

 const DebugStream = dynamic(() => import("../../components/DebugStream"), {
  ssr: false,
@@ -33,7 +34,17 @@ const Test = () => {
    return null;
  }
  const hasScripts = Boolean(
-    snap.files.filter((f) => f.name.toLowerCase()?.endsWith(".js")).length
+    snap.files.filter(f => f.name.toLowerCase()?.endsWith(".js")).length
+  );
+
+  const renderNav = () => (
+    <Flex css={{ gap: "$3" }}>
+      {snap.files
+        .filter(f => f.name.endsWith(".js"))
+        .map(file => (
+          <RunScript file={file} key={file.name} />
+        ))}
+    </Flex>
  );

  return (
@@ -50,7 +61,7 @@ const Test = () => {
        gutterSize={4}
        gutterAlign="center"
        style={{ height: "calc(100vh - 60px)" }}
-        onDragEnd={(e) => saveSplit("testVertical", e)}
+        onDragEnd={e => saveSplit("testVertical", e)}
      >
        <Flex
          row
@@ -72,19 +83,20 @@ const Test = () => {
              width: "100%",
              height: "100%",
            }}
-            onDragEnd={(e) => saveSplit("testHorizontal", e)}
+            onDragEnd={e => saveSplit("testHorizontal", e)}
          >
            <Box css={{ width: "55%", px: "$2" }}>
              <Tabs
+                label="Transaction"
                activeHeader={activeHeader}
                // TODO make header a required field
                onChangeActive={(idx, header) => {
                  if (header) transactionsState.activeHeader = header;
                }}
                keepAllAlive
-                forceDefaultExtension
-                defaultExtension=".json"
-                onCreateNewTab={(header) => modifyTransaction(header, {})}
+                defaultExtension="json"
+                allowedExtensions={["json"]}
+                onCreateNewTab={header => modifyTransaction(header, {})}
                onCloseTab={(idx, header) =>
                  header && modifyTransaction(header, undefined)
                }
@@ -110,10 +122,12 @@ const Test = () => {
              flexDirection: "column",
            }}
          >
-            <LogBoxForScripts
+            <LogBox
+              Icon={FileJs}
              title="Helper scripts"
              logs={snap.scriptLogs}
              clearLog={() => (state.scriptLogs = [])}
+              renderNav={renderNav}
            />
          </Flex>
        ) : null}
--- a/state/actions/addFaucetAccount.ts
+++ b/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,
--- a/state/actions/compileCode.ts
+++ b/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,
-            src: state.files[activeId].content,
+            name: file.name,
+            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);
-    state.files[state.active].lastCompiled = new Date();
+    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) => {
@@ -84,10 +87,23 @@ export const compileCode = async (activeId: number) => {
    });
  } catch (err) {
    console.log(err);
-    state.logs.push({
-      type: "error",
-      message: "Error occured while compiling!",
-    });
+
+    if (err instanceof Array && typeof err[0] === 'string') {
+      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
  }
 };
--- a/state/actions/deployHook.tsx
+++ b/state/actions/deployHook.tsx
@@ -126,6 +126,10 @@ export const deployHook = async (
  data: SetHookData
 ) => {
  if (typeof window !== "undefined") {
+    const activeFile = state.files[state.active]?.compiledContent
+      ? state.files[state.active]
+      : state.files.filter((file) => file.compiledContent)[0];
+    state.deployValues[activeFile.name] = data;
    const tx = await prepareDeployHookTx(account, data);
    if (!tx) {
      return;
@@ -185,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) {
@@ -268,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) {
--- a/state/actions/downloadAsZip.ts
+++ b/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
    }
--- a/state/actions/importAccount.ts
+++ b/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",
--- a/state/actions/saveFile.ts
+++ b/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" });
--- a/state/constants/templates.ts
+++ b/state/constants/templates.ts
@@ -13,13 +13,13 @@ export const templateFileIds = {

    },
    'firewall': {
-        id: '741816f53eddac862ef1ba400e1b9b84',
+        id: '1cc30f39c8a0b9c55b88c312669ca45e',  // Forked
        name: 'Firewall',
        description: 'This Hook essentially checks a blacklist of accounts',
        icon: Firewall
    },
    'notary': {
-        id: '0dfe12adb0aa75cff24c3c19497fb95a',
+        id: '87b6f5a8c2f5038fb0f20b8b510efa10', // Forked
        name: 'Notary',
        description: 'Collecting signatures for multi-sign transactions',
        icon: Notary
@@ -31,7 +31,7 @@ export const templateFileIds = {
        icon: Carbon
    },
    'peggy': {
-        id: '52e61c02e777c44c913808981a4ca61f',
+        id: '049784a83fa068faf7912f663f7b6471', // Forked
        name: 'Peggy',
        description: 'An oracle based stable coin hook',
        icon: Peggy
--- a/state/index.ts
+++ b/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 {
@@ -52,6 +54,8 @@ export interface ILog {
  defaultCollapsed?: boolean
 }

+export type DeployValue = Record<IFile['name'], any>;
+
 export interface IState {
  files: IFile[];
  gistId?: string | null;
@@ -82,7 +86,8 @@ export interface IState {
  compileOptions: {
    optimizationLevel: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os';
    strip: boolean
-  }
+  },
+  deployValues: DeployValue
 }

 // let localStorageState: null | string = null;
@@ -116,7 +121,8 @@ let initialState: IState = {
  compileOptions: {
    optimizationLevel: '-O2',
    strip: true
-  }
+  },
+  deployValues: {}
 };

 let localStorageAccounts: string | null = null;
--- a/state/transactions.ts
+++ b/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];
        }
--- a/utils/comment-parser.ts
+++ b/utils/comment-parser.ts
@@ -0,0 +1,24 @@
+import { Spec, parse, Problem } from "comment-parser"
+
+export const getTags = (source?: string): Spec[] => {
+    if (!source) return []
+    const blocks = parse(source)
+    const tags = blocks.reduce(
+        (acc, block) => acc.concat(block.tags),
+        [] as Spec[]
+    );
+    return tags
+}
+
+export const getErrors = (source?: string): Error | undefined => {
+    if (!source) return undefined
+    const blocks = parse(source)
+    const probs = blocks.reduce(
+        (acc, block) => acc.concat(block.problems),
+        [] as Problem[]
+    );
+    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) occurred while parsing JSDOC: \n${errors.join('\n')}`)
+    return error
+}
--- a/utils/helpers.ts
+++ b/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);
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -1525,6 +1525,11 @@ color-name@~1.1.4:
  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

+comment-parser@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.3.1.tgz#3d7ea3adaf9345594aedee6563f422348f165c1b"
+  integrity sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA==
+
 concat-map@0.0.1:
  version "0.0.1"
  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -2281,18 +2286,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz"
  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==

-handlebars@^4.7.7:
-  version "4.7.7"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
-  integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
-  dependencies:
-    minimist "^1.2.5"
-    neo-async "^2.6.0"
-    source-map "^0.6.1"
-    wordwrap "^1.0.0"
-  optionalDependencies:
-    uglify-js "^3.1.4"
-
 has-bigints@^1.0.1:
  version "1.0.1"
  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz"
@@ -2961,11 +2954,6 @@ natural-compare@^1.4.0:
  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=

-neo-async@^2.6.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
 next-auth@^4.0.0-beta.5:
  version "4.2.1"
  resolved "https://registry.npmjs.org/next-auth/-/next-auth-4.2.1.tgz"
@@ -2981,6 +2969,11 @@ next-auth@^4.0.0-beta.5:
    preact-render-to-string "^5.1.19"
    uuid "^8.3.2"

+next-plausible@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/next-plausible/-/next-plausible-3.2.0.tgz#d801346253e0c1cf64a02b9fc3a42050455cbc47"
+  integrity sha512-OlYcLXBG3kKd/fKMpm8SZ5IkUKSFm1/8t7cv6e5bewIqlpdZpdWuSrjbdJpbmutb2KPLXHzilKp09zmDGjy9KQ==
+
 next-themes@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.1.1.tgz#122113a458bf1d1be5ffed66778ab924c106f82a"
@@ -3655,6 +3648,14 @@ ripple-address-codec@^4.1.0, ripple-address-codec@^4.1.1, ripple-address-codec@^
    base-x "3.0.9"
    create-hash "^1.1.2"

+ripple-address-codec@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/ripple-address-codec/-/ripple-address-codec-4.2.4.tgz#a56c2168c8bb81269ea4d15ed96d6824c5a866f8"
+  integrity sha512-roAOjKz94+FboTItey1XRh5qynwt4xvfBLvbbcx+FiR94Yw2x3LrKLF2GVCMCSAh5I6PkcpADg6AbYsUbGN3nA==
+  dependencies:
+    base-x "3.0.9"
+    create-hash "^1.1.2"
+
 ripple-binary-codec@^0.2.4:
  version "0.2.7"
  resolved "https://registry.npmjs.org/ripple-binary-codec/-/ripple-binary-codec-0.2.7.tgz"
@@ -3668,7 +3669,7 @@ ripple-binary-codec@^0.2.4:
    lodash "^4.17.15"
    ripple-address-codec "^4.1.0"

-ripple-binary-codec@^1.1.3, ripple-binary-codec@^1.3.0:
+ripple-binary-codec@^1.1.3:
  version "1.3.2"
  resolved "https://registry.npmjs.org/ripple-binary-codec/-/ripple-binary-codec-1.3.2.tgz"
  integrity sha512-8VG1vfb3EM1J7ZdPXo9E57Zv2hF4cxT64gP6rGSQzODVgMjiBCWozhN3729qNTGtHItz0e82Oix8v95vWYBQ3A==
@@ -3680,6 +3681,18 @@ ripple-binary-codec@^1.1.3, ripple-binary-codec@^1.3.0:
    decimal.js "^10.2.0"
    ripple-address-codec "^4.2.3"

+ripple-binary-codec@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/ripple-binary-codec/-/ripple-binary-codec-1.4.2.tgz#cdc35353e4bc7c3a704719247c82b4c4d0b57dd3"
+  integrity sha512-EDKIyZMa/6Ay/oNgCwjD9b9CJv0zmBreeHVQeG4BYwy+9GPnIQjNeT5e/aB6OjAnhcmpgbPeBmzwmNVwzxlt0w==
+  dependencies:
+    assert "^2.0.0"
+    big-integer "^1.6.48"
+    buffer "5.6.0"
+    create-hash "^1.2.0"
+    decimal.js "^10.2.0"
+    ripple-address-codec "^4.2.4"
+
 ripple-bs58@^4.0.0:
  version "4.0.1"
  resolved "https://registry.npmjs.org/ripple-bs58/-/ripple-bs58-4.0.1.tgz"
@@ -3875,11 +3888,6 @@ source-map@^0.5.7:
  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=

-source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 split.js@^1.6.0:
  version "1.6.5"
  resolved "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz"
@@ -4111,11 +4119,6 @@ typescript@4.4.4:
  resolved "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz"
  integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==

-uglify-js@^3.1.4:
-  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.16.0.tgz#b778ba0831ca102c1d8ecbdec2d2bdfcc7353190"
-  integrity sha512-FEikl6bR30n0T3amyBh3LoiBdqHRy/f4H80+My34HOesOKyHfOsxAPAxOoqC0JUnC1amnO0IwkYC3sko51caSw==
-
 unbox-primitive@^1.0.1:
  version "1.0.1"
  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz"
@@ -4335,11 +4338,6 @@ word-wrap@^1.2.3:
  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==

-wordwrap@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
-
 wrappy@1:
  version "1.0.2"
  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
@@ -4350,10 +4348,10 @@ ws@^7.2.0:
  resolved "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz"
  integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==

-xrpl-accountlib@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/xrpl-accountlib/-/xrpl-accountlib-1.3.2.tgz"
-  integrity sha512-mXwoumGp0xUiZ7Ty/1o4FHVRK4uLnqngxdYmikZs50drMjlgCUP6GXun2Vf4Uus1fnVnxhXIw+E7peH5OjiOJA==
+xrpl-accountlib@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/xrpl-accountlib/-/xrpl-accountlib-1.5.2.tgz#8f16abe449fd60ba9ed75597f6ce3f0c45dfff43"
+  integrity sha512-lieY2/5G9DySqdtgQ0AD/aMMG5Sy/MLAmbIsmsCaF06scM5DpR8s4SsEzgHni7dOG68Wjnb2Uz6tf5aV+l4/Kg==
  dependencies:
    assert "^2.0.0"
    bip32 "^2.0.5"
@@ -4362,18 +4360,18 @@ xrpl-accountlib@^1.3.2:
    elliptic "6.5.4"
    hash.js "^1.1.7"
    ripple-address-codec "^4.1.0"
-    ripple-binary-codec "^1.3.0"
+    ripple-binary-codec "^1.4.2"
    ripple-hashes "^0.3.4"
    ripple-keypairs "^1.0.3"
    ripple-lib "^1.6.4"
    ripple-secret-codec "^1.0.2"
    xrpl-secret-numbers "^0.3.3"
-    xrpl-sign-keypairs "^2.0.1"
+    xrpl-sign-keypairs "^2.1.1"

-xrpl-client@^1.9.4:
-  version "1.9.4"
-  resolved "https://registry.npmjs.org/xrpl-client/-/xrpl-client-1.9.4.tgz"
-  integrity sha512-0+O5TbJB4GBAuZVvIrZje8VMSTTQKU8pyvuOggSmX9fhqed5c7+GGOSmKD7RWNmyQ1dZT2I70tDpzocZybtYyg==
+xrpl-client@^1.9.5:
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/xrpl-client/-/xrpl-client-1.9.5.tgz#adab5ec233a8988178ddb77b764734f5986409f6"
+  integrity sha512-B8gt/NdYbBsZ1a6iiZcA4WyFoUvqDaESekyyzo3Q2zbesN65TbA6oRU8g86HK/ll/9qA9U4Aguh/R2OoEdRe2g==
  dependencies:
    debug "^4.1.1"
    websocket "^1.0.34"
@@ -4387,13 +4385,13 @@ xrpl-secret-numbers@^0.3.3:
    brorand "^1.1.0"
    ripple-keypairs "^1.0.3"

-xrpl-sign-keypairs@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/xrpl-sign-keypairs/-/xrpl-sign-keypairs-2.0.1.tgz"
-  integrity sha512-84QbE3trxetaw0hqDADCWMx0HH1VAWnTJp0TGoKTGRf1jzTqjI7eNNNw5lmcay2MH8bW/waNzJIF8vSAJSkVrQ==
+xrpl-sign-keypairs@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/xrpl-sign-keypairs/-/xrpl-sign-keypairs-2.1.1.tgz#2f7f2855799c5d4ba091007963825eef1db21a4e"
+  integrity sha512-rKQmUCx+x7gjjJ5zv/Z7bOYR+8I36JwUCFlpuD9UzYD4w2msGQDG0rmxVENyZSfThDBVQ1kEArVn6SMDMe9LUQ==
  dependencies:
    big-integer latest
-    ripple-binary-codec "^1.3.0"
+    ripple-binary-codec "^1.4.2"
    ripple-bs58check latest
    ripple-hashes latest
    ripple-keypairs latest
Author	SHA1	Message	Date
muzam1l	b0a6815cdd	Update TrustSet transaction default fields.	2022-07-14 19:29:13 +05:30
muzam1l	3d24f0f50c	Update wrong amount schema.	2022-07-14 19:19:59 +05:30
muzamil	8e2f20c5ac	Merge pull request #239 from XRPLF/feat/monaco-comp Monaco component.	2022-07-14 13:51:24 +05:30
muzam1l	a3d094e873	Fix some more spelling errors.	2022-07-13 20:11:21 +05:30
muzam1l	ef70bfb13a	Fix spelling error	2022-07-13 19:49:54 +05:30
muzam1l	c26c7c13d1	Improve compile error handling.	2022-07-13 16:50:47 +05:30
muzam1l	fc461ddd0d	Content changed warning on deploy page.	2022-07-13 16:17:31 +05:30
muzam1l	c7001f6089	'Exit editor mode' button in wat editor.	2022-07-13 15:40:08 +05:30
muzam1l	243cbfec08	Upgrade hooks editor to comp.	2022-07-13 15:09:45 +05:30
muzam1l	1295e7fa41	Deploy editor to comp	2022-07-13 15:09:45 +05:30
muzam1l	793623d216	Migrate transaction json editor to comp.	2022-07-13 15:09:45 +05:30
muzam1l	0cde0eb240	Monaco component	2022-07-13 15:09:45 +05:30
muzamil	e2acb48e03	Merge pull request #236 from XRPLF/feat/jsdoc-to-ui User declaration of input fields via JSDOC in script files.	2022-07-12 16:53:27 +05:30
muzam1l	a4373bb970	fix spelling error	2022-07-12 12:40:35 +05:30
muzam1l	cfb791092a	Update template files of some examples to forked versions.	2022-07-11 14:44:35 +05:30
muzamil	3fcbac5ed9	Merge pull request #231 from XRPLF/feat/create-account-name Allow passing desired name while creating account.	2022-07-11 14:29:38 +05:30
muzam1l	c40b272ce8	Fix disabled prop behaviour	2022-07-07 23:34:14 +05:30
muzam1l	860ff66a8a	fix error in error handler	2022-07-07 23:25:53 +05:30
muzam1l	f4f700bea1	Handle required prop on fields.	2022-07-06 19:30:25 +05:30
muzam1l	789bc00ac3	Enhance account secret label!	2022-07-06 19:03:29 +05:30
muzam1l	6a0aabdeda	Handle jsdoc errors	2022-07-05 19:38:26 +05:30
muzam1l	175b6266e8	Add script error handling	2022-07-05 19:09:08 +05:30
muzam1l	621482e2ee	enhance empty log display	2022-07-05 18:52:45 +05:30
muzam1l	e55f48bc83	Use Single LogBox comp for scripts too	2022-07-05 18:45:52 +05:30
muzam1l	3e9e26a46a	Data variables in process.env instead of process	2022-07-05 16:58:07 +05:30
muzam1l	f0e730bb9b	Remove secret tag on type `Account`	2022-07-05 16:35:23 +05:30
muzam1l	6ce4828fc6	Remove console logs	2022-07-05 16:25:15 +05:30
muzam1l	bb0a246ae5	User declaration of input fields via JSDOC in script files.	2022-07-05 16:02:15 +05:30
Valtteri Karesto	3af2bad536	Make ping interval longer (#232 ) * Make ping interval 45s Co-authored-by: Vaclav Barta <vbarta@mangrove.cz>	2022-07-04 12:22:06 +02:00
muzam1l	4f1b877db0	Added optional tag to create account label.	2022-07-01 19:41:52 +05:30
muzamil	0289d64f5e	Merge pull request #233 from XRPLF/fix/tab-names Fix tab names	2022-07-01 19:29:33 +05:30
muzamil	868a0bcf78	Merge pull request #234 from XRPLF/feat/account-in-deploy-dialog Add account selectable in deploy dialog.	2022-07-01 18:51:04 +05:30
muzam1l	aab2476a05	Add account selectable in deploy dialog.	2022-07-01 18:06:01 +05:30
muzam1l	cb25986d72	update transaction tab labels	2022-07-01 17:30:57 +05:30
muzam1l	309ad57173	Skip auto appneding test file extension.	2022-07-01 17:26:10 +05:30
muzam1l	53afb1d3d1	Fix html erros.	2022-07-01 17:08:34 +05:30
muzam1l	31ff7c0e28	Name field in import account dialog.	2022-07-01 16:43:15 +05:30
muzam1l	dfa35df465	reset input value on submit	2022-07-01 16:27:13 +05:30
muzam1l	f163b052e1	Allow passing desired name while creating account.	2022-07-01 14:33:28 +05:30
Valtteri Karesto	25c5b9c015	Merge pull request #229 from XRPLF/feat/links-to-explorer Link from hashes/addresses to Hook Explorer	2022-06-30 15:40:57 +03:00
Valtteri Karesto	407e3946ce	Added underline on hover to links	2022-06-30 15:30:43 +03:00
Valtteri Karesto	dc5b0d71eb	Simplified hook state, since endpoint now works with hookhashes	2022-06-30 08:54:43 +03:00
Valtteri Karesto	3fd6c3f50e	Remove debug code	2022-06-29 18:03:26 +03:00
Valtteri Karesto	ec8bfc5eee	Add links to account modal	2022-06-29 15:26:33 +03:00
Valtteri Karesto	b4a0bcb90d	Merge pull request #227 from XRPLF/feat/remember-deploy-values Remember deploy values / Add feedback button	2022-06-29 14:08:47 +03:00
Valtteri Karesto	2c729e2aa4	Update button text	2022-06-29 14:04:06 +03:00
Valtteri Karesto	1cb2542170	Merge branch 'main' of github.com:eqlabs/xrpl-hooks-ide into feat/remember-deploy-values	2022-06-29 13:47:41 +03:00
Wietse Wind	00b309df34	Merge pull request #228 from XRPLF/feature/add-plausible-analytics Add plausible analytics to builder	2022-06-29 12:10:58 +02:00
Joni Juup	a6fc730de6	add plausible analytics to builder	2022-06-29 12:58:17 +03:00
Valtteri Karesto	2245c5a221	Test gh integration	2022-06-29 12:18:38 +03:00
Valtteri Karesto	60c33661ad	Add proper defaultvalue	2022-06-29 12:14:52 +03:00
Valtteri Karesto	ea21c85038	Add noopener and noreferrer to link	2022-06-29 11:37:22 +03:00
Valtteri Karesto	5478f43609	persist deploy values in memory	2022-06-29 11:32:15 +03:00
Valtteri Karesto	a9b64abb85	Add feedback button, show modal only on homepage	2022-06-29 11:31:46 +03:00
Valtteri Karesto	c6ced424d8	Merge pull request #226 from XRPLF/feat/long-navigation-support Fix #215 scrollbar issues	2022-06-28 14:59:35 +03:00
Valtteri Karesto	3a1159cffc	Make thumbs more visible	2022-06-28 14:49:34 +03:00
Valtteri Karesto	3136de1bd1	Slight style adjustments	2022-06-28 14:38:59 +03:00
Valtteri Karesto	67ffd3f1b4	Fix #215 scrollbar issues	2022-06-28 14:01:08 +03:00
Valtteri Karesto	8508cb69c4	Merge pull request #224 from XRPLF/feat/debug-stream-fixes Feat/debug stream fixes	2022-06-28 11:31:03 +03:00