Fix split error

.gitignore

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

components/Accounts.tsx

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

components/DeployEditor.tsx

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

components/HooksEditor.tsx

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

components/LogBox.tsx

@@ -6,7 +6,7 @@ import {
   useState,
   useCallback,
 } from "react";
-import { IconProps, Notepad, Prohibit } from "phosphor-react";
+import { Notepad, Prohibit } from "phosphor-react";
 import useStayScrolled from "react-stay-scrolled";
 import NextLink from "next/link";
 
@@ -24,7 +24,6 @@ interface ILogBox {
   logs: ILog[];
   renderNav?: () => ReactNode;
   enhanced?: boolean;
-  Icon?: FC<IconProps>;
 }
 
 const LogBox: FC<ILogBox> = ({
@@ -34,7 +33,6 @@ const LogBox: FC<ILogBox> = ({
   children,
   renderNav,
   enhanced,
-  Icon = Notepad,
 }) => {
   const logRef = useRef<HTMLPreElement>(null);
   const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
@@ -84,14 +82,14 @@ const LogBox: FC<ILogBox> = ({
               gap: "$3",
             }}
           >
-            <Icon size="15px" /> <Text css={{ lineHeight: 1 }}>{title}</Text>
+            <Notepad size="15px" /> <Text css={{ lineHeight: 1 }}>{title}</Text>
           </Heading>
           <Flex
             row
             align="center"
-            // css={{
+            css={{
-            //   maxWidth: "100%", // TODO make it max without breaking layout!
+              width: "50%", // TODO make it max without breaking layout!
-            // }}
+            }}
           >
             {renderNav?.()}
           </Flex>
@@ -164,11 +162,11 @@ export const Log: FC<ILog> = ({
     (str?: string): ReactNode => {
       if (!str || !accounts.length) return null;
 
-      const pattern = `(${accounts.map(acc => acc.address).join("|")})`;
+      const pattern = `(${accounts.map((acc) => acc.address).join("|")})`;
       const res = regexifyString({
         pattern: new RegExp(pattern, "gim"),
         decorator: (match, idx) => {
-          const name = accounts.find(acc => acc.address === match)?.name;
+          const name = accounts.find((acc) => acc.address === match)?.name;
           return (
             <Link
               key={match + idx}
@@ -191,12 +189,12 @@ export const Log: FC<ILog> = ({
 
   let message: ReactNode;
   
-  if (typeof _message === "string") {
+  if (typeof _message === 'string') {
     _message = _message.trim().replace(/\n /gi, "\n");
-    if (_message) message = enrichAccounts(_message);
+    message = enrichAccounts(_message)
-    else message = <Text muted>{'""'}</Text>
+  }
-  } else {
+  else {
-    message = _message;
+    message = _message
   }
 
   const jsonData = enrichAccounts(_jsonData);

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;

components/Monaco.tsx

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

components/RunScript/index.tsx

@@ -1,14 +1,10 @@
+import * as Handlebars from "handlebars";
 import { Play, X } from "phosphor-react";
-import {
+import { useCallback, useEffect, useState } from "react";
-  HTMLInputTypeAttribute,
+import state, { IFile, ILog } from "../../state";
-  useCallback,
-  useEffect,
-  useState,
-} from "react";
-import state, { IAccount, IFile, ILog } from "../../state";
 import Button from "../Button";
 import Box from "../Box";
-import Input, { Label } from "../Input";
+import Input from "../Input";
 import Stack from "../Stack";
 import {
   Dialog,
@@ -21,21 +17,16 @@ import {
 import Flex from "../Flex";
 import { useSnapshot } from "valtio";
 import Select from "../Select";
-import Text from "../Text";
 import { saveFile } from "../../state/actions/saveFile";
-import { getErrors, getTags } from "../../utils/comment-parser";
-import toast from "react-hot-toast";
 
-const generateHtmlTemplate = (code: string, data?: Record<string, any>) => {
+Handlebars.registerHelper(
-  let processString: string | undefined;
+  "customize_input",
-  const process = { env: { NODE_ENV: "production" } } as any;
+  function (/* dynamic arguments */) {
-  if (data) {
+    return new Handlebars.SafeString(arguments[0]);
-    Object.keys(data).forEach(key => {
-      process.env[key] = data[key];
-    });
   }
-  processString = JSON.stringify(process);
+);
 
+const generateHtmlTemplate = (code: string) => {
   return `
   <html>
   <head>
@@ -64,20 +55,7 @@ const generateHtmlTemplate = (code: string, data?: Record<string, any>) => {
         parent.window.postMessage({ type: 'warning', args: args || [] }, '*');
         warnLog.apply(console, args);
       }
-
-     
-      var process = '${processString || "{}"}';
-      process = JSON.parse(process);
-      window.process = process
-
-      function windowErrorHandler(event) {
-        event.preventDefault() // to prevent automatically logging to console
-        console.error(event.error?.toString())
-      }
-
-      window.addEventListener('error', windowErrorHandler);
     </script>
-
     <script type="module">   
       ${code}
     </script>
@@ -91,57 +69,72 @@ const generateHtmlTemplate = (code: string, data?: Record<string, any>) => {
 type Fields = Record<
   string,
   {
-    name: string;
+    key: string;
     value: string;
-    type?: "Account" | `Account.${keyof IAccount}` | HTMLInputTypeAttribute;
+    label?: string;
-    description?: string;
+    type?: string;
-    required?: boolean;
+    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 getFields = useCallback(() => {
+    const fieldsToSend: Record<string, string> = {};
-    const inputTags = ["input", "param", "arg", "argument"];
+    Object.entries(fields).map(([key, obj]) => {
-    const tags = getTags(content)
+      fieldsToSend[key] = obj.value;
-      .filter(tag => inputTags.includes(tag.tag))
-      .filter(tag => !!tag.name);
-
-    let _fields = tags.map(tag => ({
-      name: tag.name,
-      value: tag.default || "",
-      type: tag.type,
-      description: tag.description,
-      required: !tag.optional,
-    }));
-
-    const fields: Fields = _fields.reduce((acc, field) => {
-      acc[field.name] = field;
-      return acc;
-    }, {} as Fields);
-
-    const error = getErrors(content);
-    if (error) setTemplateError(error.message);
-    else setTemplateError("");
-
-    return fields;
-  }, [content]);
-
-  const runScript = useCallback(() => {
-    try {
-      let data: any = {};
-      Object.keys(fields).forEach(key => {
-        data[key] = fields[key].value;
     });
-      const template = generateHtmlTemplate(content, data);
+    const template = Handlebars.compile(content, { strict: false });
-
+    try {
-      setIframeCode(template);
+      const code = template(fieldsToSend);
-
+      setIframeCode(generateHtmlTemplate(code));
       state.scriptLogs = [
         ...snap.scriptLogs,
         { type: "success", message: "Started running..." },
@@ -153,7 +146,7 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
         { type: "error", message: err?.message || "Could not parse template" },
       ];
     }
-  }, [content, fields, snap.scriptLogs]);
+  };
 
   useEffect(() => {
     const handleEvent = (e: any) => {
@@ -170,29 +163,17 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
   }, [snap.scriptLogs]);
 
   useEffect(() => {
-    const defaultFields = getFields() || {};
+    const newDefaultState = getFieldValues();
-    setFields(defaultFields);
+    setFields(newDefaultState || {});
-  }, [content, setFields, getFields]);
+  }, [content, setFields, getFieldValues]);
 
-  const accOptions = snap.accounts?.map(acc => ({
+  const options = snap.accounts?.map((acc) => ({
-    ...acc,
     label: acc.name,
+    secret: acc.secret,
+    address: acc.address,
     value: acc.address,
   }));
 
-  const isDisabled = Object.values(fields).some(
-    field => field.required && !field.value
-  );
-
-  const handleRun = useCallback(() => {
-    if (isDisabled)
-      return toast.error("Please fill in all the required fields.");
-
-    state.scriptLogs = [];
-    runScript();
-    setIsDialogOpen(false);
-  }, [isDisabled, runScript]);
-
   return (
     <>
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
@@ -210,77 +191,65 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
         <DialogContent>
           <DialogTitle>Run {name} script</DialogTitle>
           <DialogDescription>
-            <Box>
+            You are about to run scripts provided by the developer of the hook,
-              You are about to run scripts provided by the developer of the
+            make sure you know what you are doing.
-              hook, make sure you trust the author before you continue.
+            <br />
-            </Box>
             {templateError && (
               <Box
                 as="span"
-                css={{
+                css={{ display: "block", color: "$error", mt: "$3" }}
-                  display: "block",
-                  color: "$error",
-                  mt: "$3",
-                  whiteSpace: "pre",
-                }}
               >
-                {templateError}
+                Error occured while parsing template, modify script and try
-              </Box>
+                again!
-            )}
-            {Object.keys(fields).length > 0 && (
-              <Box css={{ mt: "$4", mb: 0 }}>
-                Fill in the following parameters to run the script.
               </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 => {
+            {Object.keys(fields).map((key) => (
-              const { name, value, type, description, required } = fields[key];
+              <Box key={key} css={{ width: "100%" }}>
-
+                <label>
-              const isAccount = type?.startsWith("Account");
+                  {fields[key]?.label || key}{" "}
-              const isAccountSecret = type === "Account.secret";
+                  {fields[key].attach === "account_secret" &&
-
+                    `(Script uses account secret)`}
-              const accountField =
+                </label>
-                (isAccount && type?.split(".")[1]) || "address";
+                {fields[key].attach === "account_secret" ||
-
+                fields[key].attach === "account_address" ? (
-              return (
-                <Box key={name} css={{ width: "100%" }}>
-                  <Label
-                    css={{ display: "flex", justifyContent: "space-between" }}
-                  >
-                    <span>
-                      {description || name} {required && <Text error>*</Text>}
-                    </span>
-                    {isAccountSecret && (
-                      <Text error small css={{ alignSelf: "end" }}>
-                        can access account secret key
-                      </Text>
-                    )}
-                  </Label>
-                  {isAccount ? (
                   <Select
                     css={{ mt: "$1" }}
-                      options={accOptions}
+                    options={options}
                     onChange={(val: any) => {
                       setFields({
                         ...fields,
                         [key]: {
                           ...fields[key],
-                            value: val[accountField],
+                          value:
+                            fields[key].attach === "account_secret"
+                              ? val.secret
+                              : val.address,
                         },
                       });
                     }}
-                      value={accOptions.find(
+                    value={options.find(
-                        (acc: any) => acc[accountField] === value
+                      (opt) =>
+                        opt.address === fields[key].value ||
+                        opt.secret === fields[key].value
                     )}
                   />
                 ) : (
                   <Input
-                      type={type || "text"}
+                    type={fields[key].type || "text"}
-                      value={value}
+                    value={
+                      typeof fields[key].value !== "string"
+                        ? // @ts-expect-error
+                          fields[key].value.value
+                        : fields[key].value
+                    }
                     css={{ mt: "$1" }}
-                      onChange={e => {
+                    onChange={(e) => {
                       setFields({
                         ...fields,
                         [key]: { ...fields[key], value: e.target.value },
@@ -289,8 +258,7 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
                   />
                 )}
               </Box>
-              );
+            ))}
-            })}
             <Flex
               css={{ justifyContent: "flex-end", width: "100%", gap: "$3" }}
             >
@@ -299,8 +267,16 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
               </DialogClose>
               <Button
                 variant="primary"
-                isDisabled={isDisabled}
+                isDisabled={
-                onClick={handleRun}
+                  (Object.entries(fields).length > 0 &&
+                    Object.entries(fields).some(([key, obj]) => !obj.value)) ||
+                  Boolean(templateError)
+                }
+                onClick={() => {
+                  state.scriptLogs = [];
+                  runScript();
+                  setIsDialogOpen(false);
+                }}
               >
                 Run script
               </Button>

components/Text.tsx

@@ -7,35 +7,20 @@ const Text = styled("span", {
   variants: {
     small: {
       true: {
-        fontSize: "$xs",
+        fontSize: '$xs'
-      },
+      }
     },
     muted: {
       true: {
-        color: "$mauve9",
+        color: '$mauve9'
-      },
+      }
-    },
-    error: {
-      true: {
-        color: "$error",
-      },
-    },
-    warning: {
-      true: {
-        color: "$warning",
-      },
     },
     monospace: {
       true: {
-        fontFamily: "$monospace",
+        fontFamily: '$monospace'
-      },
+      }
-    },
+    }
-    block: {
+  }
-      true: {
-        display: "block",
-      },
-    },
-  },
 });
 
 export default Text;

components/Transaction/json.tsx

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

components/Transaction/ui.tsx

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

content/amount-schema.json

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

content/transactions.json

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

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;
     }

package.json

@@ -25,10 +25,10 @@
     "@radix-ui/react-tooltip": "^0.1.7",
     "@stitches/react": "^1.2.8",
     "base64-js": "^1.5.1",
-    "comment-parser": "^1.3.1",
     "dinero.js": "^1.9.1",
     "file-saver": "^2.0.5",
     "filesize": "^8.0.7",
+    "handlebars": "^4.7.7",
     "javascript-time-ago": "^2.3.11",
     "jszip": "^3.7.1",
     "lodash.uniqby": "^4.7.0",

pages/develop/[[...slug]].tsx

@@ -1,13 +1,14 @@
 import { Label } from "@radix-ui/react-label";
 import type { NextPage } from "next";
 import dynamic from "next/dynamic";
-import { FileJs, Gear, Play } from "phosphor-react";
+import { Gear, Play } from "phosphor-react";
 import Hotkeys from "react-hot-keys";
 import Split from "react-split";
 import { useSnapshot } from "valtio";
 import { ButtonGroup, Flex } from "../../components";
 import Box from "../../components/Box";
 import Button from "../../components/Button";
+import LogBoxForScripts from "../../components/LogBoxForScripts";
 import Popover from "../../components/Popover";
 import RunScript from "../../components/RunScript";
 import state from "../../state";
@@ -243,8 +244,8 @@ const Home: NextPage = () => {
               flex: 1,
             }}
           >
-            <LogBox
+            <LogBoxForScripts
-              Icon={FileJs}
+              showButtons={false}
               title="Script Log"
               logs={snap.scriptLogs}
               clearLog={() => (state.scriptLogs = [])}

pages/test/[[...slug]].tsx

@@ -6,9 +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";
-import { FileJs } from "phosphor-react";
-import RunScript from '../../components/RunScript';
 
 const DebugStream = dynamic(() => import("../../components/DebugStream"), {
   ssr: false,
@@ -34,17 +33,7 @@ const Test = () => {
     return null;
   }
   const hasScripts = Boolean(
-    snap.files.filter(f => f.name.toLowerCase()?.endsWith(".js")).length
+    snap.files.filter((f) => f.name.toLowerCase()?.endsWith(".js")).length
-  );
-
-  const renderNav = () => (
-    <Flex css={{ gap: "$3" }}>
-      {snap.files
-        .filter(f => f.name.endsWith(".js"))
-        .map(file => (
-          <RunScript file={file} key={file.name} />
-        ))}
-    </Flex>
   );
 
   return (
@@ -56,12 +45,12 @@ const Test = () => {
             ? [50, 20, 30]
             : hasScripts
             ? [50, 20, 50]
-            : [50, 50]
+            : [50, 50, 0]
         }
         gutterSize={4}
         gutterAlign="center"
         style={{ height: "calc(100vh - 60px)" }}
-        onDragEnd={e => saveSplit("testVertical", e)}
+        onDragEnd={(e) => saveSplit("testVertical", e)}
       >
         <Flex
           row
@@ -83,11 +72,11 @@ const Test = () => {
               width: "100%",
               height: "100%",
             }}
-            onDragEnd={e => saveSplit("testHorizontal", e)}
+            onDragEnd={(e) => saveSplit("testHorizontal", e)}
           >
             <Box css={{ width: "55%", px: "$2" }}>
               <Tabs
-                label="Transaction"
+                label='Transaction'
                 activeHeader={activeHeader}
                 // TODO make header a required field
                 onChangeActive={(idx, header) => {
@@ -95,8 +84,8 @@ const Test = () => {
                 }}
                 keepAllAlive
                 defaultExtension="json"
-                allowedExtensions={["json"]}
+                allowedExtensions={['json']}
-                onCreateNewTab={header => modifyTransaction(header, {})}
+                onCreateNewTab={(header) => modifyTransaction(header, {})}
                 onCloseTab={(idx, header) =>
                   header && modifyTransaction(header, undefined)
                 }
@@ -122,12 +111,10 @@ const Test = () => {
               flexDirection: "column",
             }}
           >
-            <LogBox
+            <LogBoxForScripts
-              Icon={FileJs}
               title="Helper scripts"
               logs={snap.scriptLogs}
               clearLog={() => (state.scriptLogs = [])}
-              renderNav={renderNav}
             />
           </Flex>
         ) : null}

state/actions/addFaucetAccount.ts

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

state/actions/compileCode.ts

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

state/actions/deployHook.tsx

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

state/actions/downloadAsZip.ts

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

state/actions/importAccount.ts

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

state/actions/saveFile.ts

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

state/constants/templates.ts

@@ -13,13 +13,13 @@ export const templateFileIds = {
 
     },
     'firewall': {
-        id: '1cc30f39c8a0b9c55b88c312669ca45e',  // Forked
+        id: '741816f53eddac862ef1ba400e1b9b84',
         name: 'Firewall',
         description: 'This Hook essentially checks a blacklist of accounts',
         icon: Firewall
     },
     'notary': {
-        id: '87b6f5a8c2f5038fb0f20b8b510efa10', // Forked
+        id: '0dfe12adb0aa75cff24c3c19497fb95a',
         name: 'Notary',
         description: 'Collecting signatures for multi-sign transactions',
         icon: Notary
@@ -31,7 +31,7 @@ export const templateFileIds = {
         icon: Carbon
     },
     'peggy': {
-        id: '049784a83fa068faf7912f663f7b6471', // Forked
+        id: '52e61c02e777c44c913808981a4ca61f',
         name: 'Peggy',
         description: 'An oracle based stable coin hook',
         icon: Peggy

state/index.ts

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

state/transactions.ts

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

utils/comment-parser.ts

@@ -1,24 +0,0 @@
-import { Spec, parse, Problem } from "comment-parser"
-
-export const getTags = (source?: string): Spec[] => {
-    if (!source) return []
-    const blocks = parse(source)
-    const tags = blocks.reduce(
-        (acc, block) => acc.concat(block.tags),
-        [] as Spec[]
-    );
-    return tags
-}
-
-export const getErrors = (source?: string): Error | undefined => {
-    if (!source) return undefined
-    const blocks = parse(source)
-    const probs = blocks.reduce(
-        (acc, block) => acc.concat(block.problems),
-        [] as Problem[]
-    );
-    if (!probs.length) return undefined
-    const errors = probs.map(prob => `[${prob.code}] on line ${prob.line}: ${prob.message}`)
-    const error = new Error(`The following error(s) occurred while parsing JSDOC: \n${errors.join('\n')}`)
-    return error
-}

utils/helpers.ts

@@ -7,9 +7,3 @@ export const guessZipFileName = (files: File[]) => {
     parts = parts.length > 1 ? parts.slice(0, -1) : parts
     return parts.join('')
 }
-
-export const capitalize = (value?: string) => {
-    if (!value) return '';
-
-    return value[0].toLocaleUpperCase() + value.slice(1);
-}

yarn.lock

@@ -1525,11 +1525,6 @@ color-name@~1.1.4:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-comment-parser@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.3.1.tgz#3d7ea3adaf9345594aedee6563f422348f165c1b"
-  integrity sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA==
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -2286,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"
@@ -2954,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"
@@ -3468,7 +3480,7 @@ react-select@^5.2.1:
 
 react-split@^2.0.14:
   version "2.0.14"
-  resolved "https://registry.npmjs.org/react-split/-/react-split-2.0.14.tgz"
+  resolved "https://registry.yarnpkg.com/react-split/-/react-split-2.0.14.tgz#ef198259bf43264d605f792fb3384f15f5b34432"
   integrity sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==
   dependencies:
     prop-types "^15.5.7"
@@ -3648,14 +3660,6 @@ ripple-address-codec@^4.1.0, ripple-address-codec@^4.1.1, ripple-address-codec@^
     base-x "3.0.9"
     create-hash "^1.1.2"
 
-ripple-address-codec@^4.2.4:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/ripple-address-codec/-/ripple-address-codec-4.2.4.tgz#a56c2168c8bb81269ea4d15ed96d6824c5a866f8"
-  integrity sha512-roAOjKz94+FboTItey1XRh5qynwt4xvfBLvbbcx+FiR94Yw2x3LrKLF2GVCMCSAh5I6PkcpADg6AbYsUbGN3nA==
-  dependencies:
-    base-x "3.0.9"
-    create-hash "^1.1.2"
-
 ripple-binary-codec@^0.2.4:
   version "0.2.7"
   resolved "https://registry.npmjs.org/ripple-binary-codec/-/ripple-binary-codec-0.2.7.tgz"
@@ -3669,7 +3673,7 @@ ripple-binary-codec@^0.2.4:
     lodash "^4.17.15"
     ripple-address-codec "^4.1.0"
 
-ripple-binary-codec@^1.1.3:
+ripple-binary-codec@^1.1.3, ripple-binary-codec@^1.3.0:
   version "1.3.2"
   resolved "https://registry.npmjs.org/ripple-binary-codec/-/ripple-binary-codec-1.3.2.tgz"
   integrity sha512-8VG1vfb3EM1J7ZdPXo9E57Zv2hF4cxT64gP6rGSQzODVgMjiBCWozhN3729qNTGtHItz0e82Oix8v95vWYBQ3A==
@@ -3681,18 +3685,6 @@ ripple-binary-codec@^1.1.3:
     decimal.js "^10.2.0"
     ripple-address-codec "^4.2.3"
 
-ripple-binary-codec@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/ripple-binary-codec/-/ripple-binary-codec-1.4.2.tgz#cdc35353e4bc7c3a704719247c82b4c4d0b57dd3"
-  integrity sha512-EDKIyZMa/6Ay/oNgCwjD9b9CJv0zmBreeHVQeG4BYwy+9GPnIQjNeT5e/aB6OjAnhcmpgbPeBmzwmNVwzxlt0w==
-  dependencies:
-    assert "^2.0.0"
-    big-integer "^1.6.48"
-    buffer "5.6.0"
-    create-hash "^1.2.0"
-    decimal.js "^10.2.0"
-    ripple-address-codec "^4.2.4"
-
 ripple-bs58@^4.0.0:
   version "4.0.1"
   resolved "https://registry.npmjs.org/ripple-bs58/-/ripple-bs58-4.0.1.tgz"
@@ -3888,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"
@@ -4119,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"
@@ -4338,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"
@@ -4348,10 +4355,10 @@ ws@^7.2.0:
   resolved "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz"
   integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==
 
-xrpl-accountlib@^1.5.2:
+xrpl-accountlib@^1.3.2:
-  version "1.5.2"
+  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/xrpl-accountlib/-/xrpl-accountlib-1.5.2.tgz#8f16abe449fd60ba9ed75597f6ce3f0c45dfff43"
+  resolved "https://registry.npmjs.org/xrpl-accountlib/-/xrpl-accountlib-1.3.2.tgz"
-  integrity sha512-lieY2/5G9DySqdtgQ0AD/aMMG5Sy/MLAmbIsmsCaF06scM5DpR8s4SsEzgHni7dOG68Wjnb2Uz6tf5aV+l4/Kg==
+  integrity sha512-mXwoumGp0xUiZ7Ty/1o4FHVRK4uLnqngxdYmikZs50drMjlgCUP6GXun2Vf4Uus1fnVnxhXIw+E7peH5OjiOJA==
   dependencies:
     assert "^2.0.0"
     bip32 "^2.0.5"
@@ -4360,18 +4367,18 @@ xrpl-accountlib@^1.5.2:
     elliptic "6.5.4"
     hash.js "^1.1.7"
     ripple-address-codec "^4.1.0"
-    ripple-binary-codec "^1.4.2"
+    ripple-binary-codec "^1.3.0"
     ripple-hashes "^0.3.4"
     ripple-keypairs "^1.0.3"
     ripple-lib "^1.6.4"
     ripple-secret-codec "^1.0.2"
     xrpl-secret-numbers "^0.3.3"
-    xrpl-sign-keypairs "^2.1.1"
+    xrpl-sign-keypairs "^2.0.1"
 
-xrpl-client@^1.9.5:
+xrpl-client@^1.9.4:
-  version "1.9.5"
+  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/xrpl-client/-/xrpl-client-1.9.5.tgz#adab5ec233a8988178ddb77b764734f5986409f6"
+  resolved "https://registry.npmjs.org/xrpl-client/-/xrpl-client-1.9.4.tgz"
-  integrity sha512-B8gt/NdYbBsZ1a6iiZcA4WyFoUvqDaESekyyzo3Q2zbesN65TbA6oRU8g86HK/ll/9qA9U4Aguh/R2OoEdRe2g==
+  integrity sha512-0+O5TbJB4GBAuZVvIrZje8VMSTTQKU8pyvuOggSmX9fhqed5c7+GGOSmKD7RWNmyQ1dZT2I70tDpzocZybtYyg==
   dependencies:
     debug "^4.1.1"
     websocket "^1.0.34"
@@ -4385,13 +4392,13 @@ xrpl-secret-numbers@^0.3.3:
     brorand "^1.1.0"
     ripple-keypairs "^1.0.3"
 
-xrpl-sign-keypairs@^2.1.1:
+xrpl-sign-keypairs@^2.0.1:
-  version "2.1.1"
+  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/xrpl-sign-keypairs/-/xrpl-sign-keypairs-2.1.1.tgz#2f7f2855799c5d4ba091007963825eef1db21a4e"
+  resolved "https://registry.npmjs.org/xrpl-sign-keypairs/-/xrpl-sign-keypairs-2.0.1.tgz"
-  integrity sha512-rKQmUCx+x7gjjJ5zv/Z7bOYR+8I36JwUCFlpuD9UzYD4w2msGQDG0rmxVENyZSfThDBVQ1kEArVn6SMDMe9LUQ==
+  integrity sha512-84QbE3trxetaw0hqDADCWMx0HH1VAWnTJp0TGoKTGRf1jzTqjI7eNNNw5lmcay2MH8bW/waNzJIF8vSAJSkVrQ==
   dependencies:
     big-integer latest
-    ripple-binary-codec "^1.4.2"
+    ripple-binary-codec "^1.3.0"
     ripple-bs58check latest
     ripple-hashes latest
     ripple-keypairs latest