decreasing to 45s

Make ping interval 90s
Merge pull request #229 from XRPLF/feat/links-to-explorer
2022-07-01 12:36:15 +02:00 · 2022-07-01 12:32:51 +03:00 · 2022-06-30 15:40:57 +03:00 · 2022-06-30 15:30:43 +03:00 · 2022-06-30 08:54:43 +03:00 · 2022-06-29 18:03:26 +03:00
38 changed files with 1853 additions and 12828 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,5 @@
 NEXTAUTH_URL=https://example.com
+NEXTAUTH_SECRET="1234"
 GITHUB_SECRET=""
 GITHUB_ID=""
 NEXT_PUBLIC_COMPILE_API_ENDPOINT="http://localhost:9000/api/build"
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
-# XRPL Hooks IDE
+# XRPL Hooks Builder

-This is the repository for XRPL Hooks IDE. This project is built with Next.JS
+https://hooks-builder.xrpl.org/
+
+This is the repository for XRPL Hooks Builder. This project is built with Next.JS

 ## General

@@ -106,3 +108,5 @@ To learn more about Next.js, take a look at the following resources:
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+
--- a/components/Accounts.tsx
+++ b/components/Accounts.tsx
@@ -116,9 +116,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" }}>
@@ -215,7 +222,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 +248,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>
@@ -294,7 +317,6 @@ const Accounts: FC<AccountProps> = (props) => {
          })
        );
        const responses = await Promise.all(requests);
-        console.log(responses);
        responses.forEach((res: any) => {
          const address = res?.account_data?.Account as string;
          const balance = res?.account_data?.Balance as string;
@@ -356,7 +378,7 @@ const Accounts: FC<AccountProps> = (props) => {
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [snap.accounts, snap.clientStatus]);
+  }, [snap.accounts.length, snap.clientStatus]);
  return (
    <Box
      as="div"
@@ -470,7 +492,7 @@ const Accounts: FC<AccountProps> = (props) => {
                      e.stopPropagation();
                    }}
                  >
-                    <SetHookDialog account={account} />
+                    <SetHookDialog accountAddress={account.address} />
                  </div>
                )}
              </Flex>
@@ -513,6 +535,7 @@ const ImportAccountDialog = () => {
          <Input
            name="secret"
            type="password"
+            autoComplete="new-password"
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
--- a/components/DebugStream.tsx
+++ b/components/DebugStream.tsx
@@ -1,5 +1,7 @@
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
+import ReconnectingWebSocket, { CloseEvent } from "reconnecting-websocket";
 import { proxy, ref, useSnapshot } from "valtio";
+import { subscribeKey } from "valtio/utils";
 import { Select } from ".";
 import state, { ILog, transactionsState } from "../state";
 import { extractJSON } from "../utils/json";
@@ -15,7 +17,7 @@ export interface IStreamState {
  status: "idle" | "opened" | "closed";
  statusChangeTimestamp?: number;
  logs: ILog[];
-  socket?: WebSocket;
+  socket?: ReconnectingWebSocket;
 }

 export const streamState = proxy<IStreamState>({
@@ -24,12 +26,85 @@ export const streamState = proxy<IStreamState>({
  logs: [] as ILog[],
 });

+const onOpen = (account: ISelect | null) => {
+  if (!account) {
+    return;
+  }
+  // streamState.logs = [];
+  streamState.status = "opened";
+  streamState.statusChangeTimestamp = Date.now();
+
+  pushLog(`Debug stream opened for account ${account?.value}`, {
+    type: "success",
+  });
+};
+const onError = () => {
+  pushLog("Something went wrong! Check your connection and try again.", {
+    type: "error",
+  });
+};
+const onClose = (e: CloseEvent) => {
+  // 999 = closed websocket connection by switching account
+  if (e.code !== 4999) {
+    pushLog(`Connection was closed. [code: ${e.code}]`, {
+      type: "error",
+    });
+  }
+  streamState.status = "closed";
+  streamState.statusChangeTimestamp = Date.now();
+};
+const onMessage = (event: any) => {
+  // Ping returns just account address, if we get that
+  // response we don't need to log anything
+  if (event.data !== streamState.selectedAccount?.value) {
+    pushLog(event.data);
+  }
+};
+
+let interval: NodeJS.Timer | null = null;
+
+const addListeners = (account: ISelect | null) => {
+  if (account?.value && streamState.socket?.url.endsWith(account?.value)) {
+    return;
+  }
+  streamState.logs = [];
+  if (account?.value) {
+    if (interval) {
+      clearInterval(interval);
+    }
+    if (streamState.socket) {
+      streamState.socket?.removeEventListener("open", () => onOpen(account));
+      streamState.socket?.removeEventListener("close", onClose);
+      streamState.socket?.removeEventListener("error", onError);
+      streamState.socket?.removeEventListener("message", onMessage);
+    }
+
+    streamState.socket = ref(
+      new ReconnectingWebSocket(
+        `wss://${process.env.NEXT_PUBLIC_DEBUG_STREAM_URL}/${account?.value}`
+      )
+    );
+    if (streamState.socket) {
+      interval = setInterval(() => {
+        streamState.socket?.send("");
+      }, 45000);
+    }
+
+    streamState.socket.addEventListener("open", () => onOpen(account));
+    streamState.socket.addEventListener("close", onClose);
+    streamState.socket.addEventListener("error", onError);
+    streamState.socket.addEventListener("message", onMessage);
+  }
+};
+
+subscribeKey(streamState, "selectedAccount", addListeners);
+
 const DebugStream = () => {
-  const { selectedAccount, logs, socket } = useSnapshot(streamState);
+  const { selectedAccount, logs } = useSnapshot(streamState);
  const { activeHeader: activeTxTab } = useSnapshot(transactionsState);
  const { accounts } = useSnapshot(state);

-  const accountOptions = accounts.map(acc => ({
+  const accountOptions = accounts.map((acc) => ({
    label: acc.name,
    value: acc.address,
  }));
@@ -42,117 +117,21 @@ const DebugStream = () => {
        options={accountOptions}
        hideSelectedOptions
        value={selectedAccount}
-        onChange={acc => (streamState.selectedAccount = acc as any)}
+        onChange={(acc) => {
+          streamState.socket?.close(
+            4999,
+            "Old connection closed because user switched account"
+          );
+          streamState.selectedAccount = acc as any;
+        }}
        css={{ width: "100%" }}
      />
    </>
  );

-  useEffect(() => {
-    const account = selectedAccount?.value;
-    if (account && (!socket || !socket.url.endsWith(account))) {
-      socket?.close();
-      streamState.socket = ref(
-        new WebSocket(
-          `wss://${process.env.NEXT_PUBLIC_DEBUG_STREAM_URL}/${account}`
-        )
-      );
-    } else if (!account && socket) {
-      socket.close();
-      streamState.socket = undefined;
-    }
-  }, [selectedAccount?.value, socket]);
-
-  const onMount = useCallback(async () => {
-    // deliberately using `proxy` values and not the `useSnapshot` ones to have no dep list
-    const acc = streamState.selectedAccount;
-    const status = streamState.status;
-
-    if (status === "opened" && acc) {
-      // fetch the missing ones
-      try {
-        const url = `https://${process.env.NEXT_PUBLIC_DEBUG_STREAM_URL}/recent/${acc?.value}`;
-
-        // TODO Remove after api sets cors properly
-        const res = await fetch("/api/proxy", {
-          method: "POST",
-          body: JSON.stringify({ url }),
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-
-        if (!res.ok) return;
-
-        const body = await res.json();
-
-        if (!body?.logs) return;
-
-        const start = streamState.statusChangeTimestamp || 0;
-        streamState.logs = [];
-        pushLog(`Debug stream opened for account ${acc.value}`, {
-          type: "success",
-        });
-
-        const logs = Object.entries(body.logs).filter(([tm]) => +tm >= start);
-
-        logs.forEach(([tm, log]) => pushLog(log));
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    onMount();
-  }, [onMount]);
-
-  useEffect(() => {
-    const account = selectedAccount?.value;
-    const socket = streamState.socket;
-    if (!socket) return;
-
-    const onOpen = () => {
-      streamState.logs = [];
-      streamState.status = "opened";
-      streamState.statusChangeTimestamp = Date.now();
-      pushLog(`Debug stream opened for account ${account}`, {
-        type: "success",
-      });
-    };
-    const onError = () => {
-      pushLog("Something went wrong! Check your connection and try again.", {
-        type: "error",
-      });
-    };
-    const onClose = (e: CloseEvent) => {
-      pushLog(`Connection was closed. [code: ${e.code}]`, {
-        type: "error",
-      });
-      streamState.selectedAccount = null;
-      streamState.status = "closed";
-      streamState.statusChangeTimestamp = Date.now();
-    };
-    const onMessage = (event: any) => {
-      pushLog(event.data);
-    };
-
-    socket.addEventListener("open", onOpen);
-    socket.addEventListener("close", onClose);
-    socket.addEventListener("error", onError);
-    socket.addEventListener("message", onMessage);
-
-    return () => {
-      socket.removeEventListener("open", onOpen);
-      socket.removeEventListener("close", onClose);
-      socket.removeEventListener("message", onMessage);
-      socket.removeEventListener("error", onError);
-    };
-  }, [selectedAccount?.value, socket]);
-
  useEffect(() => {
    const account = transactionsState.transactions.find(
-      tx => tx.header === activeTxTab
+      (tx) => tx.header === activeTxTab
    )?.state.selectedAccount;

    if (account && account.value !== streamState.selectedAccount?.value)
--- a/components/DeployEditor.tsx
+++ b/components/DeployEditor.tsx
@@ -34,7 +34,9 @@ const DeployEditor = () => {

  const [showContent, setShowContent] = useState(false);

-  const activeFile = snap.files[snap.active];
+  const activeFile = snap.files[snap.active]?.compiledContent
+    ? snap.files[snap.active]
+    : snap.files.filter((file) => file.compiledContent)[0];
  const compiledSize = activeFile?.compiledContent?.byteLength || 0;
  const color =
    compiledSize > FILESIZE_BREAKPOINTS[1]
@@ -60,12 +62,21 @@ const DeployEditor = () => {
        {activeFile?.lastCompiled && (
          <ReactTimeAgo date={activeFile.lastCompiled} locale="en-US" />
        )}
+
        {activeFile.compiledContent?.byteLength && (
          <Text css={{ ml: "$2", color }}>
            ({filesize(activeFile.compiledContent.byteLength)})
          </Text>
        )}
      </Flex>
+      {activeFile.compiledContent?.byteLength &&
+        activeFile.compiledContent?.byteLength >= 64000 && (
+          <Flex css={{ flexDirection: "column", py: "$3", pb: "$1" }}>
+            <Text css={{ ml: "$2", color: "$error" }}>
+              File size is larger than 64kB, cannot set hook!
+            </Text>
+          </Flex>
+        )}
      <Button variant="link" onClick={() => setShowContent(true)}>
        View as WAT-file
      </Button>
@@ -119,8 +130,8 @@ const DeployEditor = () => {
            className="hooks-editor"
            defaultLanguage={"wat"}
            language={"wat"}
-            path={`file://tmp/c/${snap.files?.[snap.active]?.name}.wat`}
-            value={snap.files?.[snap.active]?.compiledWatContent || ""}
+            path={`file://tmp/c/${activeFile?.name}.wat`}
+            value={activeFile?.compiledWatContent || ""}
            beforeMount={(monaco) => {
              monaco.languages.register({ id: "wat" });
              monaco.languages.setLanguageConfiguration("wat", wat.config);
--- a/components/DeployFooter.tsx
+++ b/components/DeployFooter.tsx
@@ -1,103 +0,0 @@
-import React, { useRef, useLayoutEffect } from "react";
-import { useSnapshot } from "valtio";
-import { Play, Prohibit } from "phosphor-react";
-import useStayScrolled from "react-stay-scrolled";
-
-import Container from "./Container";
-import Box from "./Box";
-import LogText from "./LogText";
-import { compileCode } from "../state/actions";
-import state from "../state";
-import Button from "./Button";
-import Heading from "./Heading";
-
-const Footer = () => {
-  const snap = useSnapshot(state);
-  const logRef = useRef<HTMLPreElement>(null);
-  const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
-
-  useLayoutEffect(() => {
-    stayScrolled();
-  }, [snap.logs, stayScrolled]);
-
-  return (
-    <Box
-      as="footer"
-      css={{
-        display: "flex",
-        borderTop: "1px solid $mauve6",
-        background: "$mauve1",
-        position: "relative",
-      }}
-    >
-      <Container css={{ py: "$3", flexShrink: 1 }}>
-        <Heading
-          as="h3"
-          css={{ fontWeight: 300, m: 0, fontSize: "11px", color: "$mauve9" }}
-        >
-          DEVELOPMENT LOG
-        </Heading>
-        <Button
-          ghost
-          size="xs"
-          css={{
-            position: "absolute",
-            right: "$3",
-            top: "$2",
-            color: "$mauve10",
-          }}
-          onClick={() => {
-            state.logs = [];
-          }}
-        >
-          <Prohibit size="14px" />
-        </Button>
-        <Box
-          as="pre"
-          ref={logRef}
-          css={{
-            display: "flex",
-            flexDirection: "column",
-            width: "100%",
-            height: "160px",
-            fontSize: "13px",
-            fontWeight: "$body",
-            fontFamily: "$monospace",
-            overflowY: "auto",
-            wordWrap: "break-word",
-            py: 3,
-          }}
-        >
-          {snap.logs?.map((log, index) => (
-            <Box as="span" key={log.type + index}>
-              <LogText capitalize variant={log.type}>
-                {log.type}:{" "}
-              </LogText>
-              <LogText>{log.message}</LogText>
-            </Box>
-          ))}
-        </Box>
-        <Button
-          variant="primary"
-          uppercase
-          disabled={!snap.files.length}
-          isLoading={snap.compiling}
-          onClick={() => compileCode(snap.active)}
-          css={{
-            position: "absolute",
-            bottom: "$4",
-            left: "$4",
-            alignItems: "center",
-            display: "flex",
-            cursor: "pointer",
-          }}
-        >
-          <Play weight="bold" size="16px" />
-          Compile to Wasm
-        </Button>
-      </Container>
-    </Box>
-  );
-};
-
-export default Footer;
--- 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,6 @@
 import React, { useEffect, useRef } from "react";
 import { useSnapshot, ref } from "valtio";
-import Editor, { loader } from "@monaco-editor/react";
+import Editor from "@monaco-editor/react";
 import type monaco from "monaco-editor";
 import { ArrowBendLeftUp } from "phosphor-react";
 import { useTheme } from "next-themes";
@@ -23,12 +23,6 @@ import ReconnectingWebSocket from "reconnecting-websocket";

 import docs from "../xrpl-hooks-docs/docs";

-loader.config({
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
-
 const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
  const currPath = editor.getModel()?.uri.path;
  if (apiHeaderFiles.find((h) => currPath?.endsWith(h))) {
@@ -171,9 +165,9 @@ const HooksEditor = () => {
                  // create and start the language client
                  const languageClient = createLanguageClient(connection);
                  const disposable = languageClient.start();
+
                  connection.onClose(() => {
                    try {
-                      // disposable.stop();
                      disposable.dispose();
                    } catch (err) {
                      console.log("err", err);
--- a/components/LogBoxForScripts.tsx
+++ b/components/LogBoxForScripts.tsx
@@ -0,0 +1,234 @@
+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/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -30,12 +30,6 @@ import PanelBox from "./PanelBox";
 import { templateFileIds } from "../state/constants";
 import { styled } from "../stitches.config";

-import Starter from "../components/icons/Starter";
-import Firewall from "../components/icons/Firewall";
-import Notary from "../components/icons/Notary";
-import Carbon from "../components/icons/Carbon";
-import Peggy from "../components/icons/Peggy";
-
 const ImageWrapper = styled(Flex, {
  position: "relative",
  mt: "$2",
@@ -301,66 +295,18 @@ const Navigation = () => {
                        },
                      }}
                    >
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.starter}`}
-                      >
-                        <ImageWrapper>
-                          <Starter />
-                        </ImageWrapper>
-                        <Heading>Starter</Heading>
+                      {Object.values(templateFileIds).map((template) => (
+                        <PanelBox
+                          key={template.id}
+                          as="a"
+                          href={`/develop/${template.id}`}
+                        >
+                          <ImageWrapper>{template.icon()}</ImageWrapper>
+                          <Heading>{template.name}</Heading>

-                        <Text>
-                          Just a basic starter with essential imports, just
-                          accepts any transaction coming through
-                        </Text>
-                      </PanelBox>
-
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.firewall}`}
-                        css={{ alignItems: "flex-start" }}
-                      >
-                        <ImageWrapper>
-                          <Firewall />
-                        </ImageWrapper>
-                        <Heading>Firewall</Heading>
-                        <Text>
-                          This Hook essentially checks a blacklist of accounts
-                        </Text>
-                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.notary}`}
-                      >
-                        <ImageWrapper>
-                          <Notary />
-                        </ImageWrapper>
-                        <Heading>Notary</Heading>
-                        <Text>
-                          Collecting signatures for multi-sign transactions
-                        </Text>
-                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.carbon}`}
-                      >
-                        <ImageWrapper>
-                          <Carbon />
-                        </ImageWrapper>
-                        <Heading>Carbon</Heading>
-                        <Text>Send a percentage of sum to an address</Text>
-                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.peggy}`}
-                      >
-                        <ImageWrapper>
-                          <Peggy />
-                        </ImageWrapper>
-                        <Heading>Peggy</Heading>
-                        <Text>An oracle based stable coin hook</Text>
-                      </PanelBox>
+                          <Text>{template.description}</Text>
+                        </PanelBox>
+                      ))}
                    </Flex>
                  </Flex>
                  <DialogClose asChild>
@@ -394,6 +340,8 @@ const Navigation = () => {
              height: 0,
              background: "transparent",
            },
+            scrollbarColor: "transparent",
+            scrollbarWidth: "none",
          }}
        >
          <Stack
--- a/components/RunScript/index.tsx
+++ b/components/RunScript/index.tsx
@@ -0,0 +1,314 @@
+import * as Handlebars from "handlebars";
+import { Play, X } from "phosphor-react";
+import { useCallback, useEffect, useState } from "react";
+import state, { IFile, ILog } from "../../state";
+import Button from "../Button";
+import Box from "../Box";
+import Input from "../Input";
+import Stack from "../Stack";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from "../Dialog";
+import Flex from "../Flex";
+import { useSnapshot } from "valtio";
+import Select from "../Select";
+import { saveFile } from "../../state/actions/saveFile";
+
+Handlebars.registerHelper(
+  "customize_input",
+  function (/* dynamic arguments */) {
+    return new Handlebars.SafeString(arguments[0]);
+  }
+);
+
+const generateHtmlTemplate = (code: string) => {
+  return `
+  <html>
+  <head>
+    <script>
+      var log = console.log;
+      var errorLog = console.error;
+      var infoLog = console.info;
+      var warnLog = console.warn
+      console.log = function(){
+        var args = Array.from(arguments);
+        parent.window.postMessage({ type: 'log', args: args || [] }, '*');
+        log.apply(console, args);
+      }
+      console.error = function(){
+        var args = Array.from(arguments);
+        parent.window.postMessage({ type: 'error', args: args || [] }, '*');
+        errorLog.apply(console, args);
+      }
+      console.info = function(){
+        var args = Array.from(arguments);
+        parent.window.postMessage({ type: 'info', args: args || [] }, '*');
+        infoLog.apply(console, args);
+      }
+      console.warn = function(){
+        var args = Array.from(arguments);
+        parent.window.postMessage({ type: 'warning', args: args || [] }, '*');
+        warnLog.apply(console, args);
+      }
+    </script>
+    <script type="module">   
+      ${code}
+    </script>
+  </head>
+  <body>
+  </body>
+  </html>
+  `;
+};
+
+type Fields = Record<
+  string,
+  {
+    key: string;
+    value: string;
+    label?: string;
+    type?: string;
+    attach?: "account_secret" | "account_address" | string;
+  }
+>;
+
+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 });
+    try {
+      const code = template(fieldsToSend);
+      setIframeCode(generateHtmlTemplate(code));
+      state.scriptLogs = [
+        ...snap.scriptLogs,
+        { type: "success", message: "Started running..." },
+      ];
+    } catch (err) {
+      state.scriptLogs = [
+        ...snap.scriptLogs,
+        // @ts-expect-error
+        { type: "error", message: err?.message || "Could not parse template" },
+      ];
+    }
+  };
+
+  useEffect(() => {
+    const handleEvent = (e: any) => {
+      if (e.data.type === "log" || e.data.type === "error") {
+        const data: ILog[] = e.data.args.map((msg: any) => ({
+          type: e.data.type,
+          message: typeof msg === "string" ? msg : JSON.stringify(msg, null, 2),
+        }));
+        state.scriptLogs = [...snap.scriptLogs, ...data];
+      }
+    };
+    window.addEventListener("message", handleEvent);
+    return () => window.removeEventListener("message", handleEvent);
+  }, [snap.scriptLogs]);
+
+  useEffect(() => {
+    const newDefaultState = getFieldValues();
+    setFields(newDefaultState || {});
+  }, [content, setFields, getFieldValues]);
+
+  const options = snap.accounts?.map((acc) => ({
+    label: acc.name,
+    secret: acc.secret,
+    address: acc.address,
+    value: acc.address,
+  }));
+
+  return (
+    <>
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogTrigger asChild>
+          <Button
+            variant="primary"
+            onClick={() => {
+              saveFile(false);
+              setIframeCode("");
+            }}
+          >
+            <Play weight="bold" size="16px" /> {name}
+          </Button>
+        </DialogTrigger>
+        <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 />
+            {templateError && (
+              <Box
+                as="span"
+                css={{ display: "block", color: "$error", mt: "$3" }}
+              >
+                Error occured while parsing template, modify script and try
+                again!
+              </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 },
+                      });
+                    }}
+                  />
+                )}
+              </Box>
+            ))}
+            <Flex
+              css={{ justifyContent: "flex-end", width: "100%", gap: "$3" }}
+            >
+              <DialogClose asChild>
+                <Button outline>Cancel</Button>
+              </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);
+                }}
+              >
+                Run script
+              </Button>
+            </Flex>
+          </Stack>
+          <DialogClose asChild>
+            <Box
+              css={{
+                position: "absolute",
+                top: "$1",
+                right: "$1",
+                cursor: "pointer",
+                background: "$mauve1",
+                display: "flex",
+                borderRadius: "$full",
+                p: "$1",
+              }}
+            >
+              <X size="20px" />
+            </Box>
+          </DialogClose>
+        </DialogContent>
+      </Dialog>
+      {iFrameCode && (
+        <iframe
+          style={{ display: "none" }}
+          srcDoc={iFrameCode}
+          sandbox="allow-scripts"
+        />
+      )}
+    </>
+  );
+};
+
+export default RunScript;
--- a/components/SetHookDialog.tsx
+++ b/components/SetHookDialog.tsx
@@ -21,11 +21,11 @@ import {

 import { TTS, tts } from "../utils/hookOnCalculator";
 import { deployHook } from "../state/actions";
-import type { IAccount } from "../state";
 import { useSnapshot } from "valtio";
 import state from "../state";
 import toast from "react-hot-toast";
-import { sha256 } from "../state/actions/deployHook";
+import { prepareDeployHookTx, sha256 } from "../state/actions/deployHook";
+import estimateFee from "../utils/estimateFee";

 const transactionOptions = Object.keys(tts).map((key) => ({
  label: key,
@@ -37,6 +37,7 @@ export type SetHookData = {
    value: keyof TTS;
    label: string;
  }[];
+  Fee: string;
  HookNamespace: string;
  HookParameters: {
    HookParameter: {
@@ -52,176 +53,303 @@ export type SetHookData = {
  // }[];
 };

-export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
-  const snap = useSnapshot(state);
-  const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
-  const {
-    register,
-    handleSubmit,
-    control,
-    watch,
-    setValue,
-    formState: { errors },
-  } = useForm<SetHookData>({
-    defaultValues: {
-      HookNamespace: snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
-    },
-  });
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: "HookParameters", // unique name for your Field Array
-  });
+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 {
+      register,
+      handleSubmit,
+      control,
+      watch,
+      setValue,
+      getValues,
+      formState: { errors },
+    } = useForm<SetHookData>({
+      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,
+      name: "HookParameters", // unique name for your Field Array
+    });
+    const [formInitialized, setFormInitialized] = useState(false);
+    const [estimateLoading, setEstimateLoading] = useState(false);
+    const watchedFee = watch("Fee");

-  // Update value if activeWat changes
-  useEffect(() => {
-    setValue(
+    // Update value if activeWat changes
+    useEffect(() => {
+      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,
+      activeFile?.name,
+      snap.deployValues,
+    ]);
+    useEffect(() => {
+      if (
+        watchedFee &&
+        (watchedFee.includes(".") || watchedFee.includes(","))
+      ) {
+        setValue("Fee", watchedFee.replaceAll(".", "").replaceAll(",", ""));
+      }
+    }, [watchedFee, setValue]);
+    // const {
+    //   fields: grantFields,
+    //   append: grantAppend,
+    //   remove: grantRemove,
+    // } = useFieldArray({
+    //   control,
+    //   name: "HookGrants", // unique name for your Field Array
+    // });
+    const [hashedNamespace, setHashedNamespace] = useState("");
+    const namespace = watch(
      "HookNamespace",
-      snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
+      snap.deployValues?.[activeFile?.name]
+        ? snap.deployValues?.[activeFile?.name].HookNamespace
+        : snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
    );
-  }, [snap.activeWat, snap.files, setValue]);
-  // const {
-  //   fields: grantFields,
-  //   append: grantAppend,
-  //   remove: grantRemove,
-  // } = useFieldArray({
-  //   control,
-  //   name: "HookGrants", // unique name for your Field Array
-  // });
-  const [hashedNamespace, setHashedNamespace] = useState("");
-  const namespace = watch(
-    "HookNamespace",
-    snap.files?.[snap.active]?.name?.split(".")?.[0] || ""
-  );
-  const calculateHashedValue = useCallback(async () => {
-    const hashedVal = await sha256(namespace);
-    setHashedNamespace(hashedVal.toUpperCase());
-  }, [namespace]);
-  useEffect(() => {
-    calculateHashedValue();
-  }, [namespace, calculateHashedValue]);
+    const calculateHashedValue = useCallback(async () => {
+      const hashedVal = await sha256(namespace);
+      setHashedNamespace(hashedVal.toUpperCase());
+    }, [namespace]);
+    useEffect(() => {
+      calculateHashedValue();
+    }, [namespace, calculateHashedValue]);

-  if (!account) {
-    return null;
-  }
-
-  const onSubmit: SubmitHandler<SetHookData> = async (data) => {
-    const currAccount = state.accounts.find(
-      (acc) => acc.address === account.address
-    );
-    if (currAccount) currAccount.isLoading = true;
-    const res = await deployHook(account, data);
-    if (currAccount) currAccount.isLoading = false;
-
-    if (res && res.engine_result === "tesSUCCESS") {
-      toast.success("Transaction succeeded!");
-      return setIsSetHookDialogOpen(false);
-    }
-    toast.error(`Transaction failed! (${res?.engine_result_message})`);
-  };
-
-  return (
-    <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
-      <DialogTrigger asChild>
-        <Button
-          ghost
-          size="xs"
-          uppercase
-          variant={"secondary"}
-          disabled={
-            account.isLoading ||
-            !snap.files.filter((file) => file.compiledWatContent).length
+    // Calcucate initial fee estimate when modal opens
+    useEffect(() => {
+      if (formInitialized && account) {
+        (async () => {
+          const formValues = getValues();
+          const tx = await prepareDeployHookTx(account, formValues);
+          if (!tx) {
+            return;
          }
-        >
-          Set Hook
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <DialogTitle>Deploy configuration</DialogTitle>
-          <DialogDescription as="div">
-            <Stack css={{ width: "100%", flex: 1 }}>
-              <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}
-                      closeMenuOnSelect={false}
-                      isMulti
-                      menuPosition="fixed"
-                      options={transactionOptions}
-                    />
-                  )}
-                />
-              </Box>
-              <Box css={{ width: "100%" }}>
-                <Label>Hook Namespace Seed</Label>
-                <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" }}>
-                    Namespace is required
-                  </Box>
-                )}
-                <Box css={{ mt: "$3" }}>
-                  <Label>Hook Namespace (sha256)</Label>
-                  <Input readOnly value={hashedNamespace} />
+          const res = await estimateFee(tx, account);
+          if (res && res.base_fee) {
+            setValue("Fee", Math.round(Number(res.base_fee || "")).toString());
+          }
+        })();
+      }
+      // 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];
+      return Boolean(
+        activeFile?.compiledContent?.byteLength &&
+          activeFile?.compiledContent?.byteLength >= 64000
+      );
+    };
+
+    const onSubmit: SubmitHandler<SetHookData> = async (data) => {
+      const currAccount = state.accounts.find(
+        (acc) => acc.address === account.address
+      );
+      if (currAccount) currAccount.isLoading = true;
+      const res = await deployHook(account, data);
+      if (currAccount) currAccount.isLoading = false;
+
+      if (res && res.engine_result === "tesSUCCESS") {
+        toast.success("Transaction succeeded!");
+        return setIsSetHookDialogOpen(false);
+      }
+      toast.error(`Transaction failed! (${res?.engine_result_message})`);
+    };
+    return (
+      <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
+        <DialogTrigger asChild>
+          <Button
+            ghost
+            size="xs"
+            uppercase
+            variant={"secondary"}
+            disabled={
+              account.isLoading ||
+              !snap.files.filter((file) => file.compiledWatContent).length ||
+              tooLargeFile()
+            }
+          >
+            Set Hook
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <DialogTitle>Deploy configuration</DialogTitle>
+            <DialogDescription as="div">
+              <Stack css={{ width: "100%", flex: 1 }}>
+                <Box css={{ width: "100%" }}>
+                  <Label>Invoke on transactions</Label>
+                  <Controller
+                    name="Invoke"
+                    control={control}
+                    render={({ field }) => (
+                      <Select
+                        {...field}
+                        closeMenuOnSelect={false}
+                        isMulti
+                        menuPosition="fixed"
+                        options={transactionOptions}
+                      />
+                    )}
+                  />
                </Box>
-              </Box>
-              <Box css={{ width: "100%" }}>
-                <Label style={{ marginBottom: "10px", display: "block" }}>
-                  Hook parameters
-                </Label>
-                <Stack>
-                  {fields.map((field, index) => (
-                    <Stack key={field.id}>
-                      <Input
-                        // important to include key with field's id
-                        placeholder="Parameter name"
-                        {...register(
-                          `HookParameters.${index}.HookParameter.HookParameterName`
-                        )}
-                      />
-                      <Input
-                        placeholder="Value (hex-quoted)"
-                        {...register(
-                          `HookParameters.${index}.HookParameter.HookParameterValue`
-                        )}
-                      />
-                      <Button onClick={() => remove(index)} variant="destroy">
-                        <Trash weight="regular" size="16px" />
-                      </Button>
-                    </Stack>
-                  ))}
-                  <Button
-                    outline
-                    fullWidth
-                    type="button"
-                    onClick={() =>
-                      append({
-                        HookParameter: {
-                          HookParameterName: "",
-                          HookParameterValue: "",
+                <Box css={{ width: "100%" }}>
+                  <Label>Hook Namespace Seed</Label>
+                  <Input
+                    {...register("HookNamespace", { required: true })}
+                    autoComplete={"off"}
+                  />
+                  {errors.HookNamespace?.type === "required" && (
+                    <Box css={{ display: "inline", color: "$red11" }}>
+                      Namespace is required
+                    </Box>
+                  )}
+                  <Box css={{ mt: "$3" }}>
+                    <Label>Hook Namespace (sha256)</Label>
+                    <Input readOnly value={hashedNamespace} />
+                  </Box>
+                </Box>
+
+                <Box css={{ width: "100%" }}>
+                  <Label style={{ marginBottom: "10px", display: "block" }}>
+                    Hook parameters
+                  </Label>
+                  <Stack>
+                    {fields.map((field, index) => (
+                      <Stack key={field.id}>
+                        <Input
+                          // important to include key with field's id
+                          placeholder="Parameter name"
+                          {...register(
+                            `HookParameters.${index}.HookParameter.HookParameterName`
+                          )}
+                        />
+                        <Input
+                          placeholder="Value (hex-quoted)"
+                          {...register(
+                            `HookParameters.${index}.HookParameter.HookParameterValue`
+                          )}
+                        />
+                        <Button onClick={() => remove(index)} variant="destroy">
+                          <Trash weight="regular" size="16px" />
+                        </Button>
+                      </Stack>
+                    ))}
+                    <Button
+                      outline
+                      fullWidth
+                      type="button"
+                      onClick={() =>
+                        append({
+                          HookParameter: {
+                            HookParameterName: "",
+                            HookParameterValue: "",
+                          },
+                        })
+                      }
+                    >
+                      <Plus size="16px" />
+                      Add Hook Parameter
+                    </Button>
+                  </Stack>
+                </Box>
+                <Box css={{ width: "100%", position: "relative" }}>
+                  <Label>Fee</Label>
+                  <Box css={{ display: "flex", alignItems: "center" }}>
+                    <Input
+                      type="number"
+                      {...register("Fee", { required: true })}
+                      autoComplete={"off"}
+                      onKeyPress={(e) => {
+                        if (e.key === "." || e.key === ",") {
+                          e.preventDefault();
+                        }
+                      }}
+                      step="1"
+                      defaultValue={10000}
+                      css={{
+                        "-moz-appearance": "textfield",
+                        "&::-webkit-outer-spin-button": {
+                          "-webkit-appearance": "none",
+                          margin: 0,
                        },
-                      })
-                    }
-                  >
-                    <Plus size="16px" />
-                    Add Hook Parameter
-                  </Button>
-                </Stack>
-              </Box>
-              {/* <Box css={{ width: "100%" }}>
+                        "&::-webkit-inner-spin-button ": {
+                          "-webkit-appearance": "none",
+                          margin: 0,
+                        },
+                      }}
+                    />
+                    <Button
+                      size="xs"
+                      variant="primary"
+                      outline
+                      isLoading={estimateLoading}
+                      css={{
+                        position: "absolute",
+                        right: "$2",
+                        fontSize: "$xs",
+                        cursor: "pointer",
+                        alignContent: "center",
+                        display: "flex",
+                      }}
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        setEstimateLoading(true);
+                        const formValues = getValues();
+                        try {
+                          const tx = await prepareDeployHookTx(
+                            account,
+                            formValues
+                          );
+                          if (tx) {
+                            const res = await estimateFee(tx, account);
+
+                            if (res && res.base_fee) {
+                              setValue(
+                                "Fee",
+                                Math.round(
+                                  Number(res.base_fee || "")
+                                ).toString()
+                              );
+                            }
+                          }
+                        } catch (err) {}
+
+                        setEstimateLoading(false);
+                      }}
+                    >
+                      Suggest
+                    </Button>
+                  </Box>
+                  {errors.Fee?.type === "required" && (
+                    <Box css={{ display: "inline", color: "$red11" }}>
+                      Fee is required
+                    </Box>
+                  )}
+                </Box>
+                {/* <Box css={{ width: "100%" }}>
                <label style={{ marginBottom: "10px", display: "block" }}>
                  Hook Grants
                </label>
@@ -269,38 +397,41 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                  </Button>
                </Stack>
              </Box> */}
-            </Stack>
-          </DialogDescription>
+              </Stack>
+            </DialogDescription>

-          <Flex
-            css={{
-              marginTop: 25,
-              justifyContent: "flex-end",
-              gap: "$3",
-            }}
-          >
-            <DialogClose asChild>
-              <Button outline>Cancel</Button>
-            </DialogClose>
-            {/* <DialogClose asChild> */}
-            <Button
-              variant="primary"
-              type="submit"
-              isLoading={account.isLoading}
+            <Flex
+              css={{
+                marginTop: 25,
+                justifyContent: "flex-end",
+                gap: "$3",
+              }}
            >
-              Set Hook
-            </Button>
-            {/* </DialogClose> */}
-          </Flex>
-          <DialogClose asChild>
-            <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
-              <X size="20px" />
-            </Box>
-          </DialogClose>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
+              <DialogClose asChild>
+                <Button outline>Cancel</Button>
+              </DialogClose>
+              {/* <DialogClose asChild> */}
+              <Button
+                variant="primary"
+                type="submit"
+                isLoading={account.isLoading}
+              >
+                Set Hook
+              </Button>
+              {/* </DialogClose> */}
+            </Flex>
+            <DialogClose asChild>
+              <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
+                <X size="20px" />
+              </Box>
+            </DialogClose>
+          </form>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+
+SetHookDialog.displayName = "SetHookDialog";

 export default SetHookDialog;
--- a/components/Textarea.tsx
+++ b/components/Textarea.tsx
@@ -0,0 +1,115 @@
+import { styled } from "../stitches.config";
+
+export const Textarea = styled("textarea", {
+  // Reset
+  appearance: "none",
+  borderWidth: "0",
+  boxSizing: "border-box",
+  fontFamily: "inherit",
+  outline: "none",
+  width: "100%",
+  flex: "1",
+  backgroundColor: "$mauve4",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "$sm",
+  p: "$2",
+  fontSize: "$md",
+  lineHeight: 1,
+  color: "$mauve12",
+  boxShadow: `0 0 0 1px $colors$mauve8`,
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  "&::before": {
+    boxSizing: "border-box",
+  },
+  "&::after": {
+    boxSizing: "border-box",
+  },
+  fontVariantNumeric: "tabular-nums",
+
+  "&:-webkit-autofill": {
+    boxShadow: "inset 0 0 0 1px $colors$blue6, inset 0 0 0 100px $colors$blue3",
+  },
+
+  "&:-webkit-autofill::first-line": {
+    fontFamily: "$untitled",
+    color: "$mauve12",
+  },
+
+  "&:focus": {
+    boxShadow: `0 0 0 1px $colors$mauve10`,
+    "&:-webkit-autofill": {
+      boxShadow: `0 0 0 1px $colors$mauve10`,
+    },
+  },
+  "&::placeholder": {
+    color: "$mauve9",
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    backgroundColor: "$mauve2",
+    color: "$mauve8",
+    cursor: "not-allowed",
+    "&::placeholder": {
+      color: "$mauve7",
+    },
+  },
+
+  variants: {
+    variant: {
+      ghost: {
+        boxShadow: "none",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            boxShadow: "inset 0 0 0 1px $colors$mauve7",
+          },
+        },
+        "&:focus": {
+          backgroundColor: "$loContrast",
+          boxShadow: `0 0 0 1px $colors$mauve10`,
+        },
+        "&:disabled": {
+          backgroundColor: "transparent",
+        },
+        "&:read-only": {
+          backgroundColor: "transparent",
+        },
+      },
+      deep: {
+        backgroundColor: "$deep",
+        boxShadow: "none",
+      },
+    },
+    state: {
+      invalid: {
+        boxShadow: "inset 0 0 0 1px $colors$crimson7",
+        "&:focus": {
+          boxShadow:
+            "inset 0px 0px 0px 1px $colors$crimson8, 0px 0px 0px 1px $colors$crimson8",
+        },
+      },
+      valid: {
+        boxShadow: "inset 0 0 0 1px $colors$grass7",
+        "&:focus": {
+          boxShadow:
+            "inset 0px 0px 0px 1px $colors$grass8, 0px 0px 0px 1px $colors$grass8",
+        },
+      },
+    },
+    cursor: {
+      default: {
+        cursor: "default",
+        "&:focus": {
+          cursor: "text",
+        },
+      },
+      text: {
+        cursor: "text",
+      },
+    },
+  },
+});
+
+export default Textarea;
--- a/components/Transaction/index.tsx
+++ b/components/Transaction/index.tsx
@@ -14,6 +14,8 @@ import Button from "../Button";
 import Flex from "../Flex";
 import { TxJson } from "./json";
 import { TxUI } from "./ui";
+import { default as _estimateFee } from "../../utils/estimateFee";
+import toast from 'react-hot-toast';

 export interface TransactionProps {
  header: string;
@@ -76,13 +78,19 @@ const Transaction: FC<TransactionProps> = ({
    } else {
      setState({ txIsDisabled: false });
    }
-  }, [selectedAccount?.value, selectedTransaction?.value, setState, txIsLoading]);
+  }, [
+    selectedAccount?.value,
+    selectedTransaction?.value,
+    setState,
+    txIsLoading,
+  ]);

  const submitTest = useCallback(async () => {
    let st: TransactionState | undefined;
+    const tt = txState.selectedTransaction?.value;
    if (viewType === "json") {
      // save the editor state first
-      const pst = prepareState(editorValue || '', txState);
+      const pst = prepareState(editorValue || "", tt);
      if (!pst) return;

      st = setState(pst);
@@ -102,7 +110,7 @@ const Transaction: FC<TransactionProps> = ({
      const options = prepareOptions(st);

      if (options.Destination === null) {
-        throw Error("Destination account cannot be null")
+        throw Error("Destination account cannot be null");
      }

      await sendTransaction(account, options, { logPrefix });
@@ -116,7 +124,17 @@ const Transaction: FC<TransactionProps> = ({
      }
    }
    setState({ txIsLoading: false });
-  }, [viewType, accounts, txIsDisabled, setState, header, editorValue, txState, selectedAccount?.value, prepareOptions]);
+  }, [
+    viewType,
+    accounts,
+    txIsDisabled,
+    setState,
+    header,
+    editorValue,
+    txState,
+    selectedAccount?.value,
+    prepareOptions,
+  ]);

  const resetState = useCallback(() => {
    modifyTransaction(header, { viewType }, { replaceState: true });
@@ -129,6 +147,31 @@ const Transaction: FC<TransactionProps> = ({
    [editorSavedValue, editorSettings.tabSize, prepareOptions]
  );

+  const estimateFee = useCallback(
+    async (st?: TransactionState, opts?: { silent?: boolean }) => {
+      const state = st || txState;
+      const ptx = prepareOptions(state);
+      const account = accounts.find(
+        acc => acc.address === state.selectedAccount?.value
+      );
+      if (!account) {
+        if (!opts?.silent) {
+          toast.error("Please select account from the list.")
+        }
+        return
+      };
+
+      ptx.Account = account.address;
+      ptx.Sequence = account.sequence;
+
+      const res = await _estimateFee(ptx, account, opts);
+      const fee = res?.base_fee;
+      setState({ estimatedFee: fee });
+      return fee;
+    },
+    [accounts, prepareOptions, setState, txState]
+  );
+
  return (
    <Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
      {viewType === "json" ? (
@@ -137,9 +180,10 @@ const Transaction: FC<TransactionProps> = ({
          header={header}
          state={txState}
          setState={setState}
+          estimateFee={estimateFee}
        />
      ) : (
-        <TxUI state={txState} setState={setState} />
+        <TxUI state={txState} setState={setState} estimateFee={estimateFee} />
      )}
      <Flex
        row
--- a/components/Transaction/json.tsx
+++ b/components/Transaction/json.tsx
@@ -29,6 +29,7 @@ interface JsonProps {
  header?: string;
  setState: (pTx?: Partial<TransactionState> | undefined) => void;
  state: TransactionState;
+  estimateFee?: () => Promise<string | undefined>;
 }

 export const TxJson: FC<JsonProps> = ({
@@ -38,22 +39,37 @@ export const TxJson: FC<JsonProps> = ({
  setState,
 }) => {
  const { editorSettings, accounts } = useSnapshot(state);
-  const { editorValue = value, selectedTransaction } = txState;
+  const { editorValue = value, estimatedFee } = txState;
  const { theme } = useTheme();
  const [hasUnsaved, setHasUnsaved] = useState(false);
+  const [currTxType, setCurrTxType] = useState<string | undefined>(
+    txState.selectedTransaction?.value
+  );

  useEffect(() => {
    setState({ editorValue: value });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);

+  useEffect(() => {
+    const parsed = parseJSON(editorValue);
+    if (!parsed) return;
+
+    const tt = parsed.TransactionType;
+    const tx = transactionsData.find(t => t.TransactionType === tt);
+    if (tx) setCurrTxType(tx.TransactionType);
+    else {
+      setCurrTxType(undefined);
+    }
+  }, [editorValue]);
+
  useEffect(() => {
    if (editorValue === value) setHasUnsaved(false);
    else setHasUnsaved(true);
  }, [editorValue, value]);

-  const saveState = (value: string, txState: TransactionState) => {
-    const tx = prepareState(value, txState);
+  const saveState = (value: string, transactionType?: string) => {
+    const tx = prepareState(value, transactionType);
    if (tx) setState(tx);
  };

@@ -68,7 +84,7 @@ export const TxJson: FC<JsonProps> = ({
  const onExit = (value: string) => {
    const options = parseJSON(value);
    if (options) {
-      saveState(value, txState);
+      saveState(value, currTxType);
      return;
    }
    showAlert("Error!", {
@@ -82,9 +98,10 @@ export const TxJson: FC<JsonProps> = ({
  const path = `file:///${header}`;
  const monaco = useMonaco();

-  const getSchemas = useCallback((): any[] => {
-    const tt = selectedTransaction?.value;
-    const txObj = transactionsData.find(td => td.TransactionType === tt);
+  const getSchemas = useCallback(async (): Promise<any[]> => {
+    const txObj = transactionsData.find(
+      td => td.TransactionType === currTxType
+    );

    let genericSchemaProps: any;
    if (txObj) {
@@ -98,7 +115,6 @@ export const TxJson: FC<JsonProps> = ({
        {}
      );
    }
-
    return [
      {
        uri: "file:///main-schema.json", // id of the first schema
@@ -130,6 +146,9 @@ export const TxJson: FC<JsonProps> = ({
            Amount: {
              $ref: "file:///amount-schema.json",
            },
+            Fee: {
+              $ref: "file:///fee-schema.json",
+            },
          },
        },
      },
@@ -141,17 +160,30 @@ export const TxJson: FC<JsonProps> = ({
          enum: accounts.map(acc => acc.address),
        },
      },
+      {
+        uri: "file:///fee-schema.json",
+        schema: {
+          type: "string",
+          title: "Fee type",
+          const: estimatedFee,
+          description: estimatedFee
+            ? "Above mentioned value is recommended base fee"
+            : undefined,
+        },
+      },
      {
        ...amountSchema,
      },
    ];
-  }, [accounts, header, selectedTransaction?.value]);
+  }, [accounts, currTxType, estimatedFee, header]);

  useEffect(() => {
    if (!monaco) return;
-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-      validate: true,
-      schemas: getSchemas(),
+    getSchemas().then(schemas => {
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: true,
+        schemas,
+      });
    });
  }, [getSchemas, monaco]);

@@ -184,19 +216,13 @@ export const TxJson: FC<JsonProps> = ({
          // register onExit cb
          const model = editor.getModel();
          model?.onWillDispose(() => onExit(model.getValue()));
-
-          // set json defaults
-          monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-            validate: true,
-            schemas: getSchemas(),
-          });
        }}
        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, txState)}>save</Link>{" "}
+          <Link onClick={() => saveState(editorValue, currTxType)}>save</Link>{" "}
          <Link onClick={discardChanges}>discard</Link>
        </Text>
      )}
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useCallback, useEffect, useState } from "react";
 import Container from "../Container";
 import Flex from "../Flex";
 import Input from "../Input";
@@ -9,17 +9,27 @@ import {
  TransactionState,
  transactionsData,
  TxFields,
+  getTxFields,
 } from "../../state/transactions";
 import { useSnapshot } from "valtio";
 import state from "../../state";
 import { streamState } from "../DebugStream";
+import { Button } from "..";
+import Textarea from "../Textarea";

 interface UIProps {
-  setState: (pTx?: Partial<TransactionState> | undefined) => void;
+  setState: (
+    pTx?: Partial<TransactionState> | undefined
+  ) => TransactionState | undefined;
  state: TransactionState;
+  estimateFee?: (...arg: any) => Promise<string | undefined>;
 }

-export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
+export const TxUI: FC<UIProps> = ({
+  state: txState,
+  setState,
+  estimateFee,
+}) => {
  const { accounts } = useSnapshot(state);
  const {
    selectedAccount,
@@ -28,57 +38,92 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
    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 resetOptions = (tt: string) => {
-    const txFields: TxFields | undefined = transactionsData.find(
-      tx => tx.TransactionType === tt
-    );
+  const [feeLoading, setFeeLoading] = useState(false);

-    if (!txFields) return setState({ txFields: {} });
-
-    const _txFields = Object.keys(txFields)
-      .filter(key => !["TransactionType", "Account", "Sequence"].includes(key))
-      .reduce<TxFields>(
-        (tf, key) => ((tf[key as keyof TxFields] = (txFields as any)[key]), tf),
-        {}
-      );
-
-    if (!_txFields.Destination) setState({ selectedDestAccount: null });
-    setState({ txFields: _txFields });
-  };
+  const resetOptions = useCallback(
+    (tt: string) => {
+      const fields = getTxFields(tt);
+      if (!fields.Destination) setState({ selectedDestAccount: null });
+      return setState({ txFields: fields });
+    },
+    [setState]
+  );

  const handleSetAccount = (acc: SelectOption) => {
    setState({ selectedAccount: acc });
    streamState.selectedAccount = acc;
  };

+  const handleSetField = useCallback(
+    (field: keyof TxFields, value: string, opFields?: TxFields) => {
+      const fields = opFields || txFields;
+      const obj = fields[field];
+      setState({
+        txFields: {
+          ...fields,
+          [field]: typeof obj === "object" ? { ...obj, $value: value } : value,
+        },
+      });
+    },
+    [setState, txFields]
+  );
+
+  const handleEstimateFee = useCallback(
+    async (state?: TransactionState, silent?: boolean) => {
+      setFeeLoading(true);
+
+      const fee = await estimateFee?.(state, { silent });
+      if (fee) handleSetField("Fee", fee, state?.txFields);
+
+      setFeeLoading(false);
+    },
+    [estimateFee, handleSetField]
+  );
+
  const handleChangeTxType = (tt: SelectOption) => {
    setState({ selectedTransaction: tt });
-    resetOptions(tt.value);
+
+    const newState = resetOptions(tt.value);
+
+    handleEstimateFee(newState, true);
  };

  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" });
+
+  useEffect(() => {
+    const defaultOption = transactionsOptions.find(
+      (tt) => tt.value === "Payment"
+    );
+    if (defaultOption) {
+      handleChangeTxType(defaultOption);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
  return (
    <Container
      css={{
@@ -87,7 +132,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
        height: "calc(100% - 45px)",
      }}
    >
-      <Flex column fluid css={{ height: "100%", overflowY: "auto" }}>
+      <Flex column fluid css={{ height: "100%", overflowY: "auto", pr: "$1" }}>
        <Flex
          row
          fluid
@@ -159,13 +204,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
            />
          </Flex>
        )}
-        {otherFields.map(field => {
+        {otherFields.map((field) => {
          let _value = txFields[field];

          let value: string | undefined;
          if (typeof _value === "object") {
            if (_value.$type === "json" && typeof _value.$value === "object") {
-              value = JSON.stringify(_value.$value);
+              value = JSON.stringify(_value.$value, null, 2);
            } else {
              value = _value.$value.toString();
            }
@@ -173,37 +218,99 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
            value = _value?.toString();
          }

-          let isXrp = typeof _value === "object" && _value.$type === "xrp";
+          const isXrp = typeof _value === "object" && _value.$type === "xrp";
+          const isJson = typeof _value === "object" && _value.$type === "json";
+          const isFee = field === "Fee";
+          let rows = isJson
+            ? (value?.match(/\n/gm)?.length || 0) + 1
+            : undefined;
+          if (rows && rows > 5) rows = 5;
          return (
-            <Flex
-              key={field}
-              row
-              fluid
-              css={{
-                justifyContent: "flex-end",
-                alignItems: "center",
-                mb: "$3",
-                pr: "1px",
-              }}
-            >
-              <Text muted css={{ mr: "$3" }}>
-                {field + (isXrp ? " (XRP)" : "")}:{" "}
-              </Text>
-              <Input
-                value={value}
-                onChange={e => {
-                  setState({
-                    txFields: {
-                      ...txFields,
-                      [field]:
-                        typeof _value === "object"
-                          ? { ..._value, $value: e.target.value }
-                          : e.target.value,
-                    },
-                  });
+            <Flex column key={field} css={{ mb: "$2", pr: "1px" }}>
+              <Flex
+                row
+                fluid
+                css={{
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  position: "relative",
                }}
-                css={{ width: "70%", flex: "inherit" }}
-              />
+              >
+                <Text muted css={{ mr: "$3" }}>
+                  {field + (isXrp ? " (XRP)" : "")}:{" "}
+                </Text>
+                {isJson ? (
+                  <Textarea
+                    rows={rows}
+                    value={value}
+                    spellCheck={false}
+                    onChange={switchToJson}
+                    css={{
+                      width: "70%",
+                      flex: "inherit",
+                      resize: "vertical",
+                    }}
+                  />
+                ) : (
+                  <Input
+                    type={isFee ? "number" : "text"}
+                    value={value}
+                    onChange={(e) => {
+                      if (isFee) {
+                        const val = e.target.value
+                          .replaceAll(".", "")
+                          .replaceAll(",", "");
+                        handleSetField(field, val);
+                      } else {
+                        handleSetField(field, e.target.value);
+                      }
+                    }}
+                    onKeyPress={
+                      isFee
+                        ? (e) => {
+                            if (e.key === "." || e.key === ",") {
+                              e.preventDefault();
+                            }
+                          }
+                        : undefined
+                    }
+                    css={{
+                      width: "70%",
+                      flex: "inherit",
+                      "-moz-appearance": "textfield",
+                      "&::-webkit-outer-spin-button": {
+                        "-webkit-appearance": "none",
+                        margin: 0,
+                      },
+                      "&::-webkit-inner-spin-button ": {
+                        "-webkit-appearance": "none",
+                        margin: 0,
+                      },
+                    }}
+                  />
+                )}
+                {isFee && (
+                  <Button
+                    size="xs"
+                    variant="primary"
+                    outline
+                    disabled={txState.txIsDisabled}
+                    isDisabled={txState.txIsDisabled}
+                    isLoading={feeLoading}
+                    css={{
+                      position: "absolute",
+                      right: "$2",
+                      fontSize: "$xs",
+                      cursor: "pointer",
+                      alignContent: "center",
+                      display: "flex",
+                    }}
+                    onClick={() => handleEstimateFee()}
+                  >
+                    Suggest
+                  </Button>
+                )}
+              </Flex>
            </Flex>
          );
        })}
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -12,6 +12,5 @@ export { default as Box } from "./Box";
 export { default as Button } from "./Button";
 export { default as Pre } from "./Pre";
 export { default as ButtonGroup } from "./ButtonGroup";
-export { default as DeployFooter } from "./DeployFooter";
 export * from "./Dialog";
 export * from "./DropdownMenu";
--- a/next.config.js
+++ b/next.config.js
@@ -8,6 +8,9 @@ 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-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
  "dependencies": {
    "@codingame/monaco-jsonrpc": "^0.3.1",
    "@codingame/monaco-languageclient": "^0.17.0",
-    "@monaco-editor/react": "^4.4.1",
+    "@monaco-editor/react": "^4.4.5",
    "@octokit/core": "^3.5.1",
    "@radix-ui/colors": "^0.1.7",
    "@radix-ui/react-alert-dialog": "^0.1.1",
@@ -23,11 +23,12 @@
    "@radix-ui/react-popover": "^0.1.6",
    "@radix-ui/react-switch": "^0.1.5",
    "@radix-ui/react-tooltip": "^0.1.7",
-    "@stitches/react": "^1.2.6-0",
+    "@stitches/react": "^1.2.8",
    "base64-js": "^1.5.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",
@@ -35,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
      ) {
@@ -62,10 +65,10 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
        <meta property="og:url" content={`${origin}${router.asPath}`} />

        <title>XRPL Hooks Builder</title>
-        <meta property="og:title" content="XRPL Hooks Editor" />
-        <meta name="twitter:title" content="XRPL Hooks Editor" />
+        <meta property="og:title" content="XRPL Hooks Builder" />
+        <meta name="twitter:title" content="XRPL Hooks Builder" />
        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:site" content="@xrpllabs" />
+        <meta name="twitter:site" content="@XRPLF" />
        <meta
          name="description"
          content="Hooks Builder, add smart contract functionality to the XRP Ledger."
@@ -101,7 +104,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
        />
        <link rel="manifest" href="/site.webmanifest" />
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#161618" />
-        <meta name="application-name" content="XRPL Hooks Editor" />
+        <meta name="application-name" content="XRPL Hooks Builder" />
        <meta name="msapplication-TileColor" content="#c10ad0" />
        <meta
          name="theme-color"
@@ -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,5 +1,4 @@
 import { Label } from "@radix-ui/react-label";
-import { Switch, SwitchThumb } from "../../components/Switch";
 import type { NextPage } from "next";
 import dynamic from "next/dynamic";
 import { Gear, Play } from "phosphor-react";
@@ -9,7 +8,9 @@ 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";
 import { compileCode } from "../../state/actions";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
@@ -141,59 +142,6 @@ const CompilerSettings = () => {
          </Button>
        </ButtonGroup>
      </Box>
-      <Box css={{ flexDirection: "column" }}>
-        <Label
-          style={{
-            flexDirection: "row",
-            display: "flex",
-          }}
-        >
-          Clean WASM (experimental){" "}
-          <Popover
-            css={{
-              maxWidth: "240px",
-              lineHeight: "1.3",
-              a: {
-                color: "$purple11",
-              },
-              ".dark &": {
-                backgroundColor: "$black !important",
-
-                ".arrow": {
-                  fill: "$colors$black",
-                },
-              },
-            }}
-            content="Cleaner removes unwanted compiler-provided exports and functions from a wasm binary to make it (more) suitable for being used as a Hook"
-          >
-            <Flex
-              css={{
-                position: "relative",
-                top: "-1px",
-                mx: "$1",
-                backgroundColor: "$mauve8",
-                borderRadius: "$full",
-                cursor: "pointer",
-                width: "16px",
-                height: "16px",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              ?
-            </Flex>
-          </Popover>
-        </Label>
-        <Switch
-          css={{ mt: "$2" }}
-          checked={snap.compileOptions.strip}
-          onCheckedChange={(checked) => {
-            state.compileOptions.strip = checked;
-          }}
-        >
-          <SwitchThumb />
-        </Switch>
-      </Box>
    </Flex>
  );
 };
@@ -213,7 +161,7 @@ const Home: NextPage = () => {
    >
      <main style={{ display: "flex", flex: 1, position: "relative" }}>
        <HooksEditor />
-        {snap.files[snap.active]?.name?.split(".")?.[1].toLowerCase() ===
+        {snap.files[snap.active]?.name?.split(".")?.[1]?.toLowerCase() ===
          "c" && (
          <Hotkeys
            keyName="command+b,ctrl+b"
@@ -250,20 +198,61 @@ const Home: NextPage = () => {
            </Flex>
          </Hotkeys>
        )}
+        {snap.files[snap.active]?.name?.split(".")?.[1]?.toLowerCase() ===
+          "js" && (
+          <Hotkeys
+            keyName="command+b,ctrl+b"
+            onKeyDown={() =>
+              !snap.compiling && snap.files.length && compileCode(snap.active)
+            }
+          >
+            <Flex
+              css={{
+                position: "absolute",
+                bottom: "$4",
+                left: "$4",
+                alignItems: "center",
+                display: "flex",
+                cursor: "pointer",
+                gap: "$2",
+              }}
+            >
+              <RunScript file={snap.files[snap.active]} />
+            </Flex>
+          </Hotkeys>
+        )}
      </main>
-      <Box
-        css={{
-          display: "flex",
-          background: "$mauve1",
-          position: "relative",
-        }}
-      >
-        <LogBox
-          title="Development Log"
-          clearLog={() => (state.logs = [])}
-          logs={snap.logs}
-        />
-      </Box>
+      <Flex css={{ width: "100%" }}>
+        <Flex
+          css={{
+            flex: 1,
+            background: "$mauve1",
+            position: "relative",
+            borderRight: "1px solid $mauve8",
+          }}
+        >
+          <LogBox
+            title="Development Log"
+            clearLog={() => (state.logs = [])}
+            logs={snap.logs}
+          />
+        </Flex>
+        {snap.files[snap.active]?.name?.split(".")?.[1]?.toLowerCase() ===
+          "js" && (
+          <Flex
+            css={{
+              flex: 1,
+            }}
+          >
+            <LogBoxForScripts
+              showButtons={false}
+              title="Script Log"
+              logs={snap.scriptLogs}
+              clearLog={() => (state.scriptLogs = [])}
+            />
+          </Flex>
+        )}
+      </Flex>
    </Split>
  );
 };
--- a/pages/test/[[...slug]].tsx
+++ b/pages/test/[[...slug]].tsx
@@ -6,6 +6,8 @@ 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";

 const DebugStream = dynamic(() => import("../../components/DebugStream"), {
  ssr: false,
@@ -19,18 +21,36 @@ const Accounts = dynamic(() => import("../../components/Accounts"), {
 });

 const Test = () => {
+  // This and useEffect is here to prevent useLayoutEffect warnings from react-split
+  const [showComponent, setShowComponent] = useState(false);
  const { transactionLogs } = useSnapshot(state);
  const { transactions, activeHeader } = useSnapshot(transactionsState);
+  const snap = useSnapshot(state);
+  useEffect(() => {
+    setShowComponent(true);
+  }, []);
+  if (!showComponent) {
+    return null;
+  }
+  const hasScripts = Boolean(
+    snap.files.filter((f) => f.name.toLowerCase()?.endsWith(".js")).length
+  );

  return (
    <Container css={{ px: 0 }}>
      <Split
        direction="vertical"
-        sizes={getSplit("testVertical") || [50, 50]}
+        sizes={
+          hasScripts && getSplit("testVertical")?.length === 2
+            ? [50, 20, 30]
+            : hasScripts
+            ? [50, 20, 50]
+            : [50, 50]
+        }
        gutterSize={4}
        gutterAlign="center"
        style={{ height: "calc(100vh - 60px)" }}
-        onDragEnd={e => saveSplit("testVertical", e)}
+        onDragEnd={(e) => saveSplit("testVertical", e)}
      >
        <Flex
          row
@@ -52,7 +72,7 @@ const Test = () => {
              width: "100%",
              height: "100%",
            }}
-            onDragEnd={e => saveSplit("testHorizontal", e)}
+            onDragEnd={(e) => saveSplit("testHorizontal", e)}
          >
            <Box css={{ width: "55%", px: "$2" }}>
              <Tabs
@@ -64,17 +84,14 @@ const Test = () => {
                keepAllAlive
                forceDefaultExtension
                defaultExtension=".json"
-                onCreateNewTab={header => modifyTransaction(header, {})}
+                onCreateNewTab={(header) => modifyTransaction(header, {})}
                onCloseTab={(idx, header) =>
                  header && modifyTransaction(header, undefined)
                }
              >
                {transactions.map(({ header, state }) => (
                  <Tab key={header} header={header}>
-                    <Transaction
-                      state={state}
-                      header={header}
-                    />
+                    <Transaction state={state} header={header} />
                  </Tab>
                ))}
              </Tabs>
@@ -84,8 +101,23 @@ const Test = () => {
            </Box>
          </Split>
        </Flex>
-
-        <Flex row fluid>
+        {hasScripts ? (
+          <Flex
+            as="div"
+            css={{
+              borderTop: "1px solid $mauve6",
+              background: "$mauve1",
+              flexDirection: "column",
+            }}
+          >
+            <LogBoxForScripts
+              title="Helper scripts"
+              logs={snap.scriptLogs}
+              clearLog={() => (state.scriptLogs = [])}
+            />
+          </Flex>
+        ) : null}
+        <Flex>
          <Split
            direction="horizontal"
            sizes={[50, 50]}
--- a/state/actions/compileCode.ts
+++ b/state/actions/compileCode.ts
@@ -39,7 +39,7 @@ export const compileCode = async (activeId: number) => {
        files: [
          {
            type: "c",
-            options: state.compileOptions.optimizationLevel || '-O0',
+            options: state.compileOptions.optimizationLevel || '-O2',
            name: state.files[activeId].name,
            src: state.files[activeId].content,
          },
--- a/state/actions/deployHook.tsx
+++ b/state/actions/deployHook.tsx
@@ -6,13 +6,14 @@ import calculateHookOn, { TTS } from "../../utils/hookOnCalculator";
 import { SetHookData } from "../../components/SetHookDialog";
 import { Link } from "../../components";
 import { ref } from "valtio";
+import estimateFee from "../../utils/estimateFee";

 export const sha256 = async (string: string) => {
  const utf8 = new TextEncoder().encode(string);
  const hashBuffer = await crypto.subtle.digest("SHA-256", utf8);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray
-    .map(bytes => bytes.toString(16).padStart(2, "0"))
+    .map((bytes) => bytes.toString(16).padStart(2, "0"))
    .join("");
  return hashHex;
 };
@@ -49,35 +50,31 @@ function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
  return result;
 }

-/* deployHook function turns the wasm binary into
- * hex string, signs the transaction and deploys it to
- * Hooks testnet.
- */
-export const deployHook = async (
+export const prepareDeployHookTx = async (
  account: IAccount & { name?: string },
  data: SetHookData
 ) => {
-  if (
-    !state.files ||
-    state.files.length === 0 ||
-    !state.files?.[state.active]?.compiledContent
-  ) {
+  const activeFile = state.files[state.active]?.compiledContent
+    ? state.files[state.active]
+    : state.files.filter((file) => file.compiledContent)[0];
+
+  if (!state.files || state.files.length === 0) {
    return;
  }

-  if (!state.files?.[state.active]?.compiledContent) {
+  if (!activeFile?.compiledContent) {
    return;
  }
  if (!state.client) {
    return;
  }
  const HookNamespace = (await sha256(data.HookNamespace)).toUpperCase();
-  const hookOnValues: (keyof TTS)[] = data.Invoke.map(tt => tt.value);
+  const hookOnValues: (keyof TTS)[] = data.Invoke.map((tt) => tt.value);
  const { HookParameters } = data;
  const filteredHookParameters = HookParameters.filter(
-    hp =>
+    (hp) =>
      hp.HookParameter.HookParameterName && hp.HookParameter.HookParameterValue
-  )?.map(aa => ({
+  )?.map((aa) => ({
    HookParameter: {
      HookParameterName: toHex(aa.HookParameter.HookParameterName || ""),
      HookParameterValue: aa.HookParameter.HookParameterValue || "",
@@ -92,18 +89,17 @@ export const deployHook = async (
  //     }
  //   }
  // });
-
  if (typeof window !== "undefined") {
    const tx = {
      Account: account.address,
      TransactionType: "SetHook",
      Sequence: account.sequence,
-      Fee: "100000",
+      Fee: data.Fee,
      Hooks: [
        {
          Hook: {
            CreateCode: arrayBufferToHex(
-              state.files?.[state.active]?.compiledContent
+              activeFile?.compiledContent
            ).toUpperCase(),
            HookOn: calculateHookOn(hookOnValues),
            HookNamespace,
@@ -117,18 +113,43 @@ export const deployHook = async (
        },
      ],
    };
+    return tx;
+  }
+};

+/* deployHook function turns the wasm binary into
+ * hex string, signs the transaction and deploys it to
+ * Hooks testnet.
+ */
+export const deployHook = async (
+  account: IAccount & { name?: string },
+  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;
+    }
+    if (!state.client) {
+      return;
+    }
    const keypair = derive.familySeed(account.secret);
+
    const { signedTransaction } = sign(tx, keypair);
    const currentAccount = state.accounts.find(
-      acc => acc.address === account.address
+      (acc) => acc.address === account.address
    );
    if (currentAccount) {
      currentAccount.isLoading = true;
    }
    let submitRes;
+
    try {
-      submitRes = await state.client.send({
+      submitRes = await state.client?.send({
        command: "submit",
        tx_blob: signedTransaction,
      });
@@ -143,14 +164,14 @@ export const deployHook = async (
          message: ref(
            <>
              [{submitRes.engine_result}] {submitRes.engine_result_message}{" "}
-              Validated ledger index:{" "}
+              Transaction hash:{" "}
              <Link
                as="a"
-                href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${submitRes.validated_ledger_index}`}
+                href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${submitRes.tx_json?.hash}`}
                target="_blank"
                rel="noopener noreferrer"
              >
-                {submitRes.validated_ledger_index}
+                {submitRes.tx_json?.hash}
              </Link>
            </>
          ),
@@ -183,7 +204,7 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
    return;
  }
  const currentAccount = state.accounts.find(
-    acc => acc.address === account.address
+    (acc) => acc.address === account.address
  );
  if (currentAccount?.isLoading || !currentAccount?.hooks.length) {
    return;
@@ -205,6 +226,14 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
    };

    const keypair = derive.familySeed(account.secret);
+    try {
+      // Update tx Fee value with network estimation
+      const res = await estimateFee(tx, account);
+      tx["Fee"] = res?.base_fee ? res?.base_fee : "1000";
+    } catch (err) {
+      // use default value what you defined earlier
+      console.log(err);
+    }
    const { signedTransaction } = sign(tx, keypair);

    if (currentAccount) {
--- a/state/actions/downloadAsZip.ts
+++ b/state/actions/downloadAsZip.ts
@@ -8,7 +8,8 @@ export const downloadAsZip = async () => {
        state.zipLoading = true
        // TODO do something about file/gist loading state
        const files = state.files.map(({ name, content }) => ({ name, content }));
-        const zipped = await createZip(files);
+        const wasmFiles = state.files.filter(i => i.compiledContent).map(({ name, compiledContent }) => ({ name: `${name}.wasm`, content: compiledContent }));
+        const zipped = await createZip([...files, ...wasmFiles]);
        const zipFileName = guessZipFileName(files);
        zipped.saveFile(zipFileName);
    } catch (error) {
--- a/state/actions/fetchFiles.ts
+++ b/state/actions/fetchFiles.ts
@@ -19,20 +19,22 @@ export const fetchFiles = (gistId: string) => {
    octokit
      .request("GET /gists/{gist_id}", { gist_id: gistId })
      .then(async res => {
-        if (!Object.values(templateFileIds).includes(gistId)) {
+        if (!Object.values(templateFileIds).map(v => v.id).includes(gistId)) {
          return res
        }
        // in case of templates, fetch header file(s) and append to res
-        let resHeaderJson;
        try {
          const resHeader = await fetch(`${process.env.NEXT_PUBLIC_COMPILE_API_BASE_URL}/api/header-files`);
          if (resHeader.ok) {
-            resHeaderJson = await resHeader.json();
+            const resHeaderJson = await resHeader.json()
+            const headerFiles: Record<string, { filename: string; content: string; language: string }> = {};
+            Object.entries(resHeaderJson).forEach(([key, value]) => {
+              const fname = `${key}.h`;
+              headerFiles[fname] = { filename: fname, content: value as string, language: 'C' }
+            })
            const files = {
              ...res.data.files,
-              'hookapi.h': res.data.files?.['hookapi.h'] || { filename: 'hookapi.h', content: resHeaderJson.hookapi, language: 'C' },
-              'hookmacro.h': res.data.files?.['hookmacro.h'] || { filename: 'hookmacro.h', content: resHeaderJson.hookmacro, language: 'C' },
-              'sfcodes.h': res.data.files?.['sfcodes.h'] || { filename: 'sfcodes.h', content: resHeaderJson.sfcodes, language: 'C' },
+              ...headerFiles
            };
            res.data.files = files;
          }
@@ -58,6 +60,29 @@ export const fetchFiles = (gistId: string) => {
            language: res.data.files?.[filename]?.language?.toLowerCase() || "",
            content: res.data.files?.[filename]?.content || "",
          }));
+          // Sort files so that the source files are first
+          // In case of other files leave the order as it its
+          files.sort((a, b) => {
+            const aBasename = a.name.split('.')?.[0];
+            const aCext = a.name?.toLowerCase().endsWith('.c');
+            const bBasename = b.name.split('.')?.[0];
+            const bCext = b.name?.toLowerCase().endsWith('.c');
+            // If a has c extension and b doesn't move a up
+            if (aCext && !bCext) {
+              return -1;
+            }
+            if (!aCext && bCext) {
+              return 1
+            }
+            // Otherwise fallback to default sorting based on basename
+            if (aBasename > bBasename) {
+              return 1;
+            }
+            if (bBasename > aBasename) {
+              return -1;
+            }
+            return 0;
+          })
          state.loading = false;
          if (files.length > 0) {
            state.logs.push({
@@ -89,4 +114,4 @@ export const fetchFiles = (gistId: string) => {
    return;
  }
  state.loading = false;
-};
+};
--- a/state/actions/sendTransaction.ts
+++ b/state/actions/sendTransaction.ts
@@ -20,14 +20,11 @@ export const sendTransaction = async (account: IAccount, txOptions: TransactionO
    const { Fee = "1000", ...opts } = txOptions
    const tx: TransactionOptions = {
        Account: account.address,
-        Sequence: account.sequence, // TODO auto-fillable
-        Fee,  // TODO auto-fillable
+        Sequence: account.sequence,
+        Fee,  // TODO auto-fillable default
        ...opts
    };
-    const currAcc = state.accounts.find(acc => acc.address === account.address);
-    if (currAcc) {
-        currAcc.sequence = account.sequence + 1;
-    }
+
    const { logPrefix = '' } = options || {}
    try {
        const signedAccount = derive.familySeed(account.secret);
@@ -47,6 +44,10 @@ export const sendTransaction = async (account: IAccount, txOptions: TransactionO
                message: `${logPrefix}[${response.error || response.engine_result}] ${response.error_exception || response.engine_result_message}`,
            });
        }
+        const currAcc = state.accounts.find(acc => acc.address === account.address);
+        if (currAcc && response.account_sequence_next) {
+            currAcc.sequence = response.account_sequence_next;
+        }
    } catch (err) {
        console.error(err);
        state.transactionLogs.push({
--- a/state/constants/templates.ts
+++ b/state/constants/templates.ts
@@ -1,20 +1,41 @@
-// export const templateFileIds = {
-//     'starter': '1d14e51e2e02dc0a508cb0733767a914', // TODO currently same as accept
-//     'firewall': 'bcd6d0c0fcbe52545ddb802481ff9d26',
-//     'notary': 'a789c75f591eeab7932fd702ed8cf9ea',
-//     'carbon': '43925143fa19735d8c6505c34d3a6a47',
-//     'peggy': 'ceaf352e2a65741341033ab7ef05c448',
-//     'headers': '9b448e8a55fab11ef5d1274cb59f9cf3'
-// }
+import Carbon from "../../components/icons/Carbon";
+import Firewall from "../../components/icons/Firewall";
+import Notary from "../../components/icons/Notary";
+import Peggy from "../../components/icons/Peggy";
+import Starter from "../../components/icons/Starter";

 export const templateFileIds = {
-    'starter': '1f7d2963d9e342ea092286115274f3e3',
-    'firewall': '70edec690f0de4dd315fad1f4f996d8c',
-    'notary': '3d5677768fe8a54c4f6317e185d9ba66',
-    'carbon': 'a9fbcaf1b816b198c7fc0f62962bebf2',
-    'doubler': '56b86174aeb70b2b48eee962bad3e355',
-    'peggy': 'd21298a37e1550b781682014762a567b',
-    'headers': '55f639bce59a49c58c45e663776b5138'
+    'starter': {
+        id: '9106f1fe60482d90475bfe8f1315affe',
+        name: 'Starter',
+        description: 'Just a basic starter with essential imports, just accepts any transaction coming through',
+        icon: Starter
+
+    },
+    'firewall': {
+        id: '741816f53eddac862ef1ba400e1b9b84',
+        name: 'Firewall',
+        description: 'This Hook essentially checks a blacklist of accounts',
+        icon: Firewall
+    },
+    'notary': {
+        id: '0dfe12adb0aa75cff24c3c19497fb95a',
+        name: 'Notary',
+        description: 'Collecting signatures for multi-sign transactions',
+        icon: Notary
+    },
+    'carbon': {
+        id: '5941c19dce3e147948f564e224553c02',
+        name: 'Carbon',
+        description: 'Send a percentage of sum to an address',
+        icon: Carbon
+    },
+    'peggy': {
+        id: '52e61c02e777c44c913808981a4ca61f',
+        name: 'Peggy',
+        description: 'An oracle based stable coin hook',
+        icon: Peggy
+    },
 }

-export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'hookmacro.h']
+export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'macro.h', 'extern.h', 'error.h'];
--- a/state/index.ts
+++ b/state/index.ts
@@ -52,6 +52,8 @@ export interface ILog {
  defaultCollapsed?: boolean
 }

+export type DeployValue = Record<IFile['name'], any>;
+
 export interface IState {
  files: IFile[];
  gistId?: string | null;
@@ -66,6 +68,7 @@ export interface IState {
  logs: ILog[];
  deployLogs: ILog[];
  transactionLogs: ILog[];
+  scriptLogs: ILog[];
  editorCtx?: typeof monaco.editor;
  editorSettings: {
    tabSize: number;
@@ -81,7 +84,8 @@ export interface IState {
  compileOptions: {
    optimizationLevel: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os';
    strip: boolean
-  }
+  },
+  deployValues: DeployValue
 }

 // let localStorageState: null | string = null;
@@ -96,6 +100,7 @@ let initialState: IState = {
  logs: [],
  deployLogs: [],
  transactionLogs: [],
+  scriptLogs: [],
  editorCtx: undefined,
  gistId: undefined,
  gistOwner: undefined,
@@ -112,9 +117,10 @@ let initialState: IState = {
  mainModalShowed: false,
  accounts: [],
  compileOptions: {
-    optimizationLevel: '-O0',
-    strip: false
-  }
+    optimizationLevel: '-O2',
+    strip: true
+  },
+  deployValues: {}
 };

 let localStorageAccounts: string | null = null;
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -19,7 +19,8 @@ export interface TransactionState {
    txFields: TxFields;
    viewType: 'json' | 'ui',
    editorSavedValue: null | string,
-    editorValue?: string
+    editorValue?: string,
+    estimatedFee?: string
 }


@@ -93,7 +94,7 @@ export const modifyTransaction = (
    Object.keys(partialTx).forEach(k => {
        // Typescript mess here, but is definetly safe!
        const s = tx.state as any;
-        const p = partialTx as any;
+        const p = partialTx as any; // ? Make copy
        if (!deepEqual(s[k], p[k])) s[k] = p[k];
    });

@@ -140,7 +141,7 @@ export const prepareTransaction = (data: any) => {
 }

 // editor value to state
-export const prepareState = (value: string, txState: TransactionState) => {
+export const prepareState = (value: string, transactionType?: string) => {
    const options = parseJSON(value);
    if (!options) {
        showAlert("Error!", {
@@ -151,7 +152,7 @@ export const prepareState = (value: string, txState: TransactionState) => {

    const { Account, TransactionType, Destination, ...rest } = options;
    let tx: Partial<TransactionState> = {};
-    const { txFields } = txState
+    const txFields = getTxFields(transactionType)

    if (Account) {
        const acc = state.accounts.find(acc => acc.address === Account);
@@ -206,7 +207,7 @@ export const prepareState = (value: string, txState: TransactionState) => {
        if (isXrp) {
            rest[field] = {
                $type: "xrp",
-                $value: +value / 1000000, // TODO maybe use bigint?
+                $value: +value / 1000000, // ! maybe use bigint?
            };
        } else if (typeof value === "object") {
            rest[field] = {
@@ -222,4 +223,24 @@ export const prepareState = (value: string, txState: TransactionState) => {
    return tx
 }

+export const getTxFields = (tt?: string) => {
+    const txFields: TxFields | undefined = transactionsData.find(
+        tx => tx.TransactionType === tt
+    );
+
+    if (!txFields) return {}
+
+    let _txFields = Object.keys(txFields)
+        .filter(
+            key => !["TransactionType", "Account", "Sequence"].includes(key)
+        )
+        .reduce<TxFields>(
+            (tf, key) => (
+                (tf[key as keyof TxFields] = (txFields as any)[key]), tf
+            ),
+            {}
+        );
+    return _txFields
+}
+
 export { transactionsData }
--- a/utils/estimateFee.ts
+++ b/utils/estimateFee.ts
@@ -0,0 +1,30 @@
+import toast from 'react-hot-toast';
+import { derive, sign } from "xrpl-accountlib"
+import state, { IAccount } from "../state"
+
+const estimateFee = async (tx: Record<string, unknown>, account: IAccount, opts: { silent?: boolean } = {}): Promise<null | { base_fee: string, median_fee: string; minimum_fee: string; open_ledger_fee: string; }> => {
+  try {
+    const copyTx = JSON.parse(JSON.stringify(tx))
+    delete copyTx['SigningPubKey']
+    if (!copyTx.Fee) {
+      copyTx.Fee = '1000'
+    }
+    
+    const keypair = derive.familySeed(account.secret)
+    const { signedTransaction } = sign(copyTx, keypair);
+
+    const res = await state.client?.send({ command: 'fee', tx_blob: signedTransaction })
+    if (res && res.drops) {
+      return res.drops;
+    }
+    return null
+  } catch (err) {
+    if (!opts.silent) {
+      console.error(err)
+      toast.error("Cannot estimate fee.") // ? Some better msg
+    }
+    return null
+  }
+}
+
+export default estimateFee
--- a/utils/languageClient.ts
+++ b/utils/languageClient.ts
@@ -1,6 +1,5 @@
 import { MessageConnection } from "@codingame/monaco-jsonrpc";
 import { MonacoLanguageClient, ErrorAction, CloseAction, createConnection } from "@codingame/monaco-languageclient";
-import Router from "next/router";
 import normalizeUrl from "normalize-url";
 import ReconnectingWebSocket from "reconnecting-websocket";

@@ -14,11 +13,7 @@ export function createLanguageClient(connection: MessageConnection): MonacoLangu
      errorHandler: {
        error: () => ErrorAction.Continue,
        closed: () => {
-          if (Router.pathname.includes('/develop')) {
-            return CloseAction.Restart
-          } else {
-            return CloseAction.DoNotRestart
-          }
+          return CloseAction.DoNotRestart
        }
      },

--- a/xrpl-hooks-docs/docs.ts
+++ b/xrpl-hooks-docs/docs.ts
@@ -41,6 +41,7 @@ import hooksSkipHashBufLen from "./md/hooks-skip-hash-buf-len.md";
 import hooksStateBufLen from "./md/hooks-state-buf-len.md";
 import hooksTransactionHashBufLen from "./md/hooks-transaction-hash-buf-len.md";
 import hooksTransactionSlotLimit from "./md/hooks-transaction-slot-limit.md";
+import hooksTrivialCbak from "./md/hooks-trivial-cbak.md";
 import hooksValidateBufLen from "./md/hooks-validate-buf-len.md";
 import hooksVerifyBufLen from "./md/hooks-verify-buf-len.md";

@@ -90,6 +91,7 @@ const docs: { [key: string]: string; } = {
  "hooks-state-buf-len": hooksStateBufLen,
  "hooks-transaction-hash-buf-len": hooksTransactionHashBufLen,
  "hooks-transaction-slot-limit": hooksTransactionSlotLimit,
+  "hooks-trivial-cbak": hooksTrivialCbak,
  "hooks-validate-buf-len": hooksValidateBufLen,
  "hooks-verify-buf-len": hooksVerifyBufLen,
 };
--- a/xrpl-hooks-docs/md/hooks-entry-points.md
+++ b/xrpl-hooks-docs/md/hooks-entry-points.md
@@ -1,7 +1,7 @@
 # hooks-entry-points

-A Hook always implements and exports exactly two functions: [cbak](https://xrpl-hooks.readme.io/v2.0/reference/cbak) and [hook](https://xrpl-hooks.readme.io/v2.0/reference/hook).
+A Hook always implements and exports a [hook](https://xrpl-hooks.readme.io/v2.0/reference/hook) function.

-This check shows error on translation units that do not have them.
+This check shows error on translation units that do not have it.

 [Read more](https://xrpl-hooks.readme.io/v2.0/docs/compiling-hooks)
--- a/xrpl-hooks-docs/md/hooks-hash-buf-len.md
+++ b/xrpl-hooks-docs/md/hooks-hash-buf-len.md
@@ -1,5 +1,5 @@
 # hooks-hash-buf-len

-Functions [util_sha512h](https://xrpl-hooks.readme.io/v2.0/reference/util_sha512h), [hook_hash](https://xrpl-hooks.readme.io/v2.0/reference/hook_hash), [ledger_last_hash](https://xrpl-hooks.readme.io/v2.0/reference/ledger_last_hash) and [nonce](https://xrpl-hooks.readme.io/v2.0/reference/nonce) have fixed-size hash output.
+Functions [util_sha512h](https://xrpl-hooks.readme.io/v2.0/reference/util_sha512h), [hook_hash](https://xrpl-hooks.readme.io/v2.0/reference/hook_hash), [ledger_last_hash](https://xrpl-hooks.readme.io/v2.0/reference/ledger_last_hash), [etxn_nonce](https://xrpl-hooks.readme.io/v2.0/reference/etxn_nonce) and [ledger_nonce](https://xrpl-hooks.readme.io/v2.0/reference/ledger_nonce) have fixed-size hash output.

 This check warns about too-small size of their output buffer (if it's specified by a constant - variable parameter is ignored).
--- a/xrpl-hooks-docs/md/hooks-trivial-cbak.md
+++ b/xrpl-hooks-docs/md/hooks-trivial-cbak.md
@@ -0,0 +1,7 @@
+# hooks-trivial-cbak
+
+A Hook may implement and export a [cbak](https://xrpl-hooks.readme.io/v2.0/reference/cbak) function.
+
+But the function is optional, and defining it so that it doesn't do anything besides returning a constant value is unnecessary (except for some debugging scenarios) and just increases the hook size. This check warns about such implementations.
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/compiling-hooks)
--- a/yarn.lock
+++ b/yarn.lock
@@ -202,19 +202,19 @@
  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==

-"@monaco-editor/loader@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.0.tgz#659fbaf1d612ea67b2a0519a18612d1c4813e444"
-  integrity sha512-N3mGq1ktC3zh7WUx3NGO+PSDdNq9Vspk/41rEmRdrCqV9vNbBTRzAOplmUpNQsi+hmTs++ERMBobMERb8Kb+3g==
+"@monaco-editor/loader@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8"
+  integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==
  dependencies:
    state-local "^1.0.6"

-"@monaco-editor/react@^4.4.1":
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.1.tgz#2e2b9b369f3082b0e14f47cdbe35658fd56c7c7d"
-  integrity sha512-95E/XPC4dbm/7qdkhSsU/a1kRgcn2PYhRTVIc+/cixWCZrwRURW1DRPaIZ2lOawBJ6kAOLywxuD4A4UmbT0ZIw==
+"@monaco-editor/react@^4.4.5":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.5.tgz#beabe491efeb2457441a00d1c7651c653697f65b"
+  integrity sha512-IImtzU7sRc66OOaQVCG+5PFHkSWnnhrUWGBuH6zNmH2h0YgmAhcjHZQc/6MY9JWEbUtVF1WPBMJ9u1XuFbRrVA==
  dependencies:
-    "@monaco-editor/loader" "^1.3.0"
+    "@monaco-editor/loader" "^1.3.2"
    prop-types "^15.7.2"

 "@next/env@12.1.0":
@@ -917,10 +917,10 @@
  resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz"
  integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==

-"@stitches/react@^1.2.6-0":
-  version "1.2.7"
-  resolved "https://registry.npmjs.org/@stitches/react/-/react-1.2.7.tgz"
-  integrity sha512-6AxpUag7OW55ANzRnuy7R15FEyQeZ66fytVo3BBilFIU0mfo3t49CAMcEAL/A1SbhSj/FCdWkn/XrbjGBTJTzg==
+"@stitches/react@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.8.tgz#954f8008be8d9c65c4e58efa0937f32388ce3a38"
+  integrity sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==

 "@types/aws-lambda@^8.10.83":
  version "8.10.93"
@@ -2281,6 +2281,18 @@ 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"
@@ -2949,6 +2961,11 @@ 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"
@@ -2964,6 +2981,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"
@@ -3858,6 +3880,11 @@ 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"
@@ -4089,6 +4116,11 @@ 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"
@@ -4308,6 +4340,11 @@ 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"
Author	SHA1	Message	Date
Vaclav Barta	057a1afa03	decreasing to 45s	2022-07-01 12:36:15 +02:00
Valtteri Karesto	ca1724e994	Make ping interval 90s	2022-07-01 12:32:51 +03:00
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
Valtteri Karesto	89217d2633	Remove console.log	2022-06-28 11:03:56 +03:00
Valtteri Karesto	ba1b64391c	ping socket connection	2022-06-28 09:36:45 +03:00
Valtteri Karesto	098d919a77	Bring back dispose	2022-06-27 15:03:49 +03:00
Valtteri Karesto	b2af37ab4b	Use reconnecting-websocket and refactor debug stream	2022-06-27 15:03:42 +03:00
Valtteri Karesto	dcb7e94e86	New gists provided by XRPL (#223 ) * Prepare logic for new gists * Remove unused imports * updated gist IDs for xrplfgists * Add macro.h to apiheaderfiles * Update headers Co-authored-by: Vaclav Barta <vbarta@mangrove.cz>	2022-06-27 08:25:25 +02:00
Valtteri Karesto	67848b3d8d	Merge pull request #222 from XRPLF/fix/suggest-button-disabled Fix/suggest button disabled	2022-06-23 11:12:04 +03:00
Valtteri Karesto	31a86263a1	Disable suggest if no account selected	2022-06-22 14:42:50 +03:00
Valtteri Karesto	4d0025afc1	Fix splitscreen error	2022-06-22 14:42:39 +03:00
Valtteri Karesto	f85bd2398d	Merge pull request #220 from XRPLF/fix/decimals-again fixes #201	2022-06-22 12:28:12 +03:00
Valtteri Karesto	a2a6596cc5	Prevent pasting decimals	2022-06-22 12:16:36 +03:00
Valtteri Karesto	37208ce97e	fixes #201	2022-06-22 12:03:43 +03:00
Valtteri Karesto	bf4042926d	Merge pull request #218 from XRPLF/feat/ui-fixes Fixes #213 and fixes #200	2022-06-22 11:41:31 +03:00
Valtteri Karesto	3ccc1c16ac	Fixed deploy	2022-06-22 11:32:07 +03:00
Valtteri Karesto	135f0c91a1	Fixes #213 and fixes #200	2022-06-22 11:06:15 +03:00
Valtteri Karesto	8f5786e242	Merge pull request #216 from XRPLF/feat/change-default-optimization fixes #214 change default optimization	2022-06-22 09:56:15 +03:00
Valtteri Karesto	810eb4ca27	Add new default to compileCode as well	2022-06-22 09:52:47 +03:00
Valtteri Karesto	e6574f9f12	fixes #214 change default optimization	2022-06-22 09:47:30 +03:00
Valtteri Karesto	1a6726fabf	Merge pull request #212 from XRPLF/feat/improve-supp-js Improve supplementary JS feature	2022-06-21 11:28:42 +03:00
Valtteri Karesto	89f8671217	Clear log should now work	2022-06-21 10:53:52 +03:00
Valtteri Karesto	fb5259221b	Changed color of starting running	2022-06-21 09:43:29 +03:00
Valtteri Karesto	fd17f59616	Show LogBoxForScrips if js file active	2022-06-20 23:54:56 +03:00
Valtteri Karesto	91bbc7ea61	Catch template errors, add better labels, styling	2022-06-20 23:54:33 +03:00
Valtteri Karesto	783d832c6d	Remove export for unused component	2022-06-20 23:53:32 +03:00
Valtteri Karesto	698ca376e7	Add showbuttons prop to LogBoxForScripts	2022-06-20 23:53:15 +03:00
Valtteri Karesto	bfd9e21ab8	Remove unused component	2022-06-20 23:52:45 +03:00
Valtteri Karesto	e46411f245	Rename template helpers	2022-06-20 14:53:30 +03:00
Valtteri Karesto	08447c6b29	Add support for select parameters	2022-06-20 14:16:16 +03:00
Valtteri Karesto	9216cc6bf7	When downloading zip, include wasm if it exists	2022-06-20 11:01:13 +03:00
Valtteri Karesto	5108b08e39	Do not show scripts panel if no supplementary scripts	2022-06-20 10:40:47 +03:00
Valtteri Karesto	6c46a4f809	Merge pull request #211 from XRPLF/feat/user-provided-scripts Feat/user provided scripts	2022-06-20 10:16:06 +03:00
Valtteri Karesto	0ea88f0d32	Remove unused imports	2022-06-17 21:48:32 +03:00
Valtteri Karesto	4c2e1f36f3	Add empty line	2022-06-17 21:42:50 +03:00
Valtteri Karesto	fa5315fc0e	Fix errors on development	2022-06-17 17:32:21 +03:00
Valtteri Karesto	eda8b1550c	If not string, stringify it	2022-06-17 13:42:19 +03:00
Valtteri Karesto	742b11374f	Just empty body	2022-06-16 10:12:40 +03:00
Valtteri Karesto	d16e83dcfa	No need for specific log() or error() functions anymore	2022-06-16 00:50:16 +03:00
Valtteri Karesto	155aa57784	Fix warning about useLayoutEffect	2022-06-16 00:49:43 +03:00
Valtteri Karesto	b88b6da7d9	Add one more example env value	2022-06-16 00:49:17 +03:00
Valtteri Karesto	fa13f7e282	Add logic for scripts	2022-06-15 15:15:08 +03:00
Valtteri Karesto	f1a43ef758	Add dependencies and fix handlebars errors	2022-06-15 15:14:51 +03:00
Vaclav Barta	4217813fd7	take default header names from /api/header-files JSON (#210 ) This is a client-side upgrade for the server-side XRPLF/xrpl-hooks-compiler#17 - not hard-coding expected header names but taking them from the compilation backend.	2022-06-13 08:22:55 +02:00
muzamil	c588f7b1f3	Merge pull request #209 from XRPLF/feat/json-in-ui Display tx json in UI inside textarea.	2022-06-10 16:50:28 +05:30
muzam1l	985e8ee820	Merge branch 'main' into feat/json-in-ui	2022-06-10 16:50:08 +05:30
muzamil	8832e76a0a	Merge pull request #208 from XRPLF/feat/default-tx Set payment as default transaction	2022-06-10 16:47:01 +05:30
muzam1l	9777f1dbd1	Increase vert. padding of textarea	2022-06-08 15:03:51 +05:30
muzam1l	213d468aab	Merge branch 'main' into feat/json-in-ui	2022-06-07 19:06:57 +05:30
muzam1l	46becb0e7b	Display tx json in UI inside textarea.	2022-06-07 19:06:13 +05:30
Valtteri Karesto	fad6bd100a	Merge pull request #205 from XRPLF/feat/prevent-decimals Prevent inputing decimals	2022-06-07 14:55:05 +03:00
muzam1l	5a11f83fea	Set payment as default transaction	2022-06-07 00:52:59 +05:30
Valtteri Karesto	525338abf7	Merge branch 'main' of github.com:eqlabs/xrpl-hooks-ide into feat/prevent-decimals	2022-06-03 17:21:00 +03:00
Valtteri Karesto	ea977816a4	Merge pull request #203 from XRPLF/feat/tab-ordering Sort the files after fetching	2022-06-03 17:20:27 +03:00
Valtteri Karesto	0ee599a2b6	Update sort	2022-06-03 16:50:31 +03:00
Valtteri Karesto	02c59f8d79	Update sorting function	2022-06-03 16:34:46 +03:00
Valtteri Karesto	3d5b77e60a	Fix issue if no filenames	2022-06-03 16:34:36 +03:00
Valtteri Karesto	92a167d47a	Prevent also pasting	2022-06-03 15:33:46 +03:00
Valtteri Karesto	d41e263942	Merge pull request #204 from XRPLF/feat/remove-cleaner-ui Remove cleaner options from UI	2022-06-03 15:08:50 +03:00
Valtteri Karesto	bd1226fe90	Remove log	2022-06-02 16:35:18 +03:00
Valtteri Karesto	57403e42dd	Adjustments to sorting	2022-06-02 16:34:53 +03:00
Valtteri Karesto	2b42a96c4a	Update ordering	2022-06-02 16:15:39 +03:00
Valtteri Karesto	80d6bb691d	Prevent inputing decimals	2022-06-02 15:22:28 +03:00
Valtteri Karesto	c7e4cd7c92	Remove unused imports	2022-06-02 14:11:18 +03:00
Valtteri Karesto	4a22861860	Sort the files after fetching	2022-06-02 14:04:52 +03:00
muzamil	b09d029931	Merge pull request #196 from XRPLF/feat/fee-hint Fee hints in transactions.	2022-06-01 16:21:24 +05:30
muzam1l	b2dc49754f	Error toast in suggest button!	2022-06-01 15:51:08 +05:30
muzam1l	6f636645f7	Fix json saving mismatch	2022-05-31 00:53:58 +05:30
muzam1l	377c963c7a	FIx json mode schema	2022-05-30 23:32:53 +05:30
muzam1l	ae038f17ff	Suggest fee button in transaction ui	2022-05-30 23:01:46 +05:30
Vaclav Barta	0d8f2c31e7	Feature/hook documentation (#197 ) * updated hooks-entry-points-check * added hooks-trivial-cbak * updated hooks-hash-buf-len: nonce => etxn_nonce + ledger_nonce	2022-05-30 12:49:19 +02:00
muzam1l	da9986eb66	Remove unnecessary console logs	2022-05-27 22:46:15 +05:30
muzam1l	a21350770e	Fee hints in transactions.	2022-05-27 16:44:01 +05:30
Valtteri Karesto	49dfd43220	Merge pull request #193 from XRPLF/feat/fee-estimates Feat/fee estimates	2022-05-27 12:23:50 +03:00
Valtteri Karesto	4472957f5c	Updated based on feedback	2022-05-27 10:43:16 +03:00
muzamil	ca46707bb5	Merge pull request #195 from XRPLF/feat/tx_hash_link Show tx hash instead of server ledger index in deploy log.	2022-05-26 15:28:31 +05:30
muzam1l	704ebe4b92	Show tx hash instead of server ledger index in deploy log.	2022-05-26 14:55:24 +05:30
Valtteri Karesto	9a6ef2c393	Minor fixes based on feedback	2022-05-25 13:39:52 +03:00
Valtteri Karesto	56203ce9c6	Remove package-lock	2022-05-25 13:10:05 +03:00
Valtteri Karesto	933bdb5968	Add fee estimate button to fee and update the deploying	2022-05-25 13:05:04 +03:00
Valtteri Karesto	864711697b	Update accounts	2022-05-25 13:03:49 +03:00
Valtteri Karesto	e5eaf09721	Just return the fee values, no mutating	2022-05-25 13:03:38 +03:00
Valtteri Karesto	d0dde56c67	Merge pull request #192 from XRPLF/fix/fix-sequence-number Fix/fix sequence number	2022-05-24 18:20:31 +03:00
Valtteri Karesto	45c6927e72	Take next sequence number from response	2022-05-24 18:16:56 +03:00
Valtteri Karesto	6014b6e79f	Update sequence after successful request	2022-05-24 18:14:01 +03:00
Valtteri Karesto	04a99227df	Merge pull request #191 from XRPLF/fix/v2-updates Fix/v2 updates	2022-05-24 15:44:00 +03:00
Valtteri Karesto	0965a1e898	Merge pull request #190 from XRPLF/feat/update-descriptions Update meta tags	2022-05-24 15:43:47 +03:00
Valtteri Karesto	32445dbebf	Mutate tx with fee estimation	2022-05-24 15:27:20 +03:00
Valtteri Karesto	1a1d4901aa	Add estimate fee function	2022-05-24 15:26:38 +03:00
Valtteri Karesto	8b646c56dc	Fix recursion	2022-05-24 15:26:03 +03:00
Valtteri Karesto	ac38bbc72c	Turn the cleaner on by default	2022-05-24 15:25:33 +03:00
Valtteri Karesto	bf1182351a	Added link to project	2022-05-23 13:28:41 +03:00
Valtteri Karesto	55e48a943b	Update readme	2022-05-23 13:26:46 +03:00
Valtteri Karesto	faf417be69	Update meta tags	2022-05-23 08:55:03 +03:00
Valtteri Karesto	c2eb57211f	hotfix/Remove debug code	2022-05-12 14:31:00 +03:00
Valtteri Karesto	0e97df3c8e	Merge pull request #188 from eqlabs/fix/old-account-fix Fixes to users who has old accounts	2022-05-12 08:35:02 +03:00