Minor changes based on feedback.

This reverts commit 5505f0ac87.

.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"

.gitignore

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

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!
+
+

components/Accounts.tsx

@@ -31,6 +31,8 @@ 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";
+import { deleteAccount } from '../state/actions/deleteAccount';
 
 export const AccountDialog = ({
   activeAccountAddress,
@@ -42,12 +44,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);
       }}
@@ -98,10 +100,7 @@ export const AccountDialog = ({
               css={{ ml: "auto", mr: "$9" }}
               tabIndex={-1}
               onClick={() => {
-                const index = state.accounts.findIndex(
-                  (acc) => acc.address === activeAccount?.address
-                );
-                state.accounts.splice(index, 1);
+                deleteAccount(activeAccount?.address);
               }}
             >
               Delete Account <Trash size="15px" />
@@ -116,9 +115,16 @@ export const AccountDialog = ({
                 <Text
                   css={{
                     fontFamily: "$monospace",
+                    a: { "&:hover": { textDecoration: "underline" } },
                   }}
                 >
-                  {activeAccount?.address}
+                  <a
+                    href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${activeAccount?.address}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {activeAccount?.address}
+                  </a>
                 </Text>
               </Flex>
               <Flex css={{ marginLeft: "auto", color: "$mauve12" }}>
@@ -158,7 +164,7 @@ export const AccountDialog = ({
                     }}
                     ghost
                     size="xs"
-                    onClick={() => setShowSecret((curr) => !curr)}
+                    onClick={() => setShowSecret(curr => !curr)}
                   >
                     {showSecret ? "Hide" : "Show"}
                   </Button>
@@ -215,7 +221,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 +247,22 @@ export const AccountDialog = ({
                 <Text
                   css={{
                     fontFamily: "$monospace",
+                    a: { "&:hover": { textDecoration: "underline" } },
                   }}
                 >
                   {activeAccount && activeAccount.hooks.length > 0
-                    ? activeAccount.hooks.map((i) => truncate(i, 12)).join(",")
+                    ? activeAccount.hooks.map(i => {
+                        return (
+                          <a
+                            key={i}
+                            href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${i}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {truncate(i, 12)}
+                          </a>
+                        );
+                      })
                     : "–"}
                 </Text>
               </Flex>
@@ -278,7 +300,7 @@ interface AccountProps {
   showHookStats?: boolean;
 }
 
-const Accounts: FC<AccountProps> = (props) => {
+const Accounts: FC<AccountProps> = props => {
   const snap = useSnapshot(state);
   const [activeAccountAddress, setActiveAccountAddress] = useState<
     string | null
@@ -286,7 +308,7 @@ const Accounts: FC<AccountProps> = (props) => {
   useEffect(() => {
     const fetchAccInfo = async () => {
       if (snap.clientStatus === "online") {
-        const requests = snap.accounts.map((acc) =>
+        const requests = snap.accounts.map(acc =>
           snap.client?.send({
             id: `hooks-builder-req-info-${acc.address}`,
             command: "account_info",
@@ -299,14 +321,26 @@ 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;
             accountToUpdate.sequence = sequence;
+            accountToUpdate.error = null;
+          } else {
+            const oldAccount = state.accounts.find(
+              acc => acc.address === res?.account
+            );
+            if (oldAccount) {
+              oldAccount.xrp = "0";
+              oldAccount.error = {
+                code: res?.error,
+                message: res?.error_message,
+              };
+            }
           }
         });
-        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",
@@ -317,7 +351,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 =
@@ -343,7 +377,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"
@@ -381,9 +415,7 @@ const Accounts: FC<AccountProps> = (props) => {
             <Wallet size="15px" /> <Text css={{ lineHeight: 1 }}>Accounts</Text>
           </Heading>
           <Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
-            <Button ghost size="sm" onClick={() => addFaucetAccount(true)}>
-              Create
-            </Button>
+            <ImportAccountDialog type="create" />
             <ImportAccountDialog />
           </Flex>
         </Flex>
@@ -400,7 +432,7 @@ const Accounts: FC<AccountProps> = (props) => {
             overflowY: "auto",
           }}
         >
-          {snap.accounts.map((account) => (
+          {snap.accounts.map(account => (
             <Flex
               column
               key={account.address + account.name}
@@ -431,28 +463,33 @@ const Accounts: FC<AccountProps> = (props) => {
                       wordBreak: "break-word",
                     }}
                   >
-                    {account.address} (
-                    {Dinero({
-                      amount: Number(account?.xrp || "0"),
-                      precision: 6,
-                    })
-                      .toUnit()
-                      .toLocaleString(undefined, {
-                        style: "currency",
-                        currency: "XRP",
-                        currencyDisplay: "name",
-                      })}
-                    )
+                    {account.address}{" "}
+                    {!account?.error ? (
+                      `(${Dinero({
+                        amount: Number(account?.xrp || "0"),
+                        precision: 6,
+                      })
+                        .toUnit()
+                        .toLocaleString(undefined, {
+                          style: "currency",
+                          currency: "XRP",
+                          currencyDisplay: "name",
+                        })})`
+                    ) : (
+                      <Box css={{ color: "$red11" }}>
+                        (Account not found, request funds to activate account)
+                      </Box>
+                    )}
                   </Text>
                 </Box>
                 {!props.hideDeployBtn && (
                   <div
                     className="hook-deploy-button"
-                    onClick={(e) => {
+                    onClick={e => {
                       e.stopPropagation();
                     }}
                   >
-                    <SetHookDialog account={account} />
+                    <SetHookDialog accountAddress={account.address} />
                   </div>
                 )}
               </Flex>
@@ -474,31 +511,71 @@ const Accounts: FC<AccountProps> = (props) => {
   );
 };
 
-export const transactionsOptions = transactionsData.map((tx) => ({
+export const transactionsOptions = transactionsData.map(tx => ({
   value: tx.TransactionType,
   label: tx.TransactionType,
 }));
 
-const ImportAccountDialog = () => {
-  const [value, setValue] = useState("");
+const ImportAccountDialog = ({
+  type = "import",
+}: {
+  type?: "import" | "create";
+}) => {
+  const [secret, setSecret] = useState("");
+  const [name, setName] = useState("");
+
+  const btnText = type === "import" ? "Import" : "Create";
+  const title = type === "import" ? "Import Account" : "Create Account";
+
+  const handleSubmit = async () => {
+    if (type === "create") {
+      const value = capitalize(name);
+      await addFaucetAccount(value, true);
+      setName("");
+      setSecret("");
+      return;
+    }
+    importAccount(secret, name);
+    setName("");
+    setSecret("");
+  };
   return (
     <Dialog>
       <DialogTrigger asChild>
         <Button ghost size="sm">
-          Import
+          {btnText}
         </Button>
       </DialogTrigger>
-      <DialogContent>
-        <DialogTitle>Import account</DialogTitle>
-        <DialogDescription>
-          <Label>Add account secret</Label>
-          <Input
-            name="secret"
-            type="password"
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-          />
-        </DialogDescription>
+      <DialogContent aria-describedby={undefined}>
+        <DialogTitle css={{ mb: "$4" }}>{title}</DialogTitle>
+        <Flex column>
+          <Box css={{ mb: "$2" }}>
+            <Label>
+              Account name <Text muted>(optional)</Text>
+            </Label>
+            <Input
+              name="name"
+              type="text"
+              autoComplete="off"
+              autoCapitalize="on"
+              value={name}
+              onChange={e => setName(e.target.value)}
+            />
+          </Box>
+          {type === "import" && (
+            <Box>
+              <Label>Account secret</Label>
+              <Input
+                required
+                name="secret"
+                type="password"
+                autoComplete="new-password"
+                value={secret}
+                onChange={e => setSecret(e.target.value)}
+              />
+            </Box>
+          )}
+        </Flex>
 
         <Flex
           css={{
@@ -511,14 +588,8 @@ const ImportAccountDialog = () => {
             <Button outline>Cancel</Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button
-              variant="primary"
-              onClick={() => {
-                importAccount(value);
-                setValue("");
-              }}
-            >
-              Import account
+            <Button type="submit" variant="primary" onClick={handleSubmit}>
+              {title}
             </Button>
           </DialogClose>
         </Flex>

components/ContextMenu/index.tsx

@@ -0,0 +1,135 @@
+import { CaretRight, Check, Circle } from "phosphor-react";
+import { FC, Fragment, ReactNode } from "react";
+import { Flex, Text } from "../";
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuItemIndicator,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuRoot,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+  ContextMenuTriggerItem,
+} from "./primitive";
+
+export type TextOption = {
+  type: "text";
+  label: ReactNode;
+  onSelect?: () => any;
+  children?: ContentMenuOption[];
+};
+export type SeparatorOption = { type: "separator" };
+export type CheckboxOption = {
+  type: "checkbox";
+  label: ReactNode;
+  checked?: boolean;
+  onCheckedChange?: (isChecked: boolean) => any;
+};
+export type RadioOption<T extends string = string> = {
+  type: "radio";
+  label: ReactNode;
+  onValueChange?: (value: string) => any;
+  value: T;
+  options?: { value: T; label?: ReactNode }[];
+};
+
+type WithCommons = { key: string; disabled?: boolean };
+
+export type ContentMenuOption = (
+  | TextOption
+  | SeparatorOption
+  | CheckboxOption
+  | RadioOption
+) &
+  WithCommons;
+
+export interface IContextMenu {
+  options?: ContentMenuOption[];
+  isNested?: boolean;
+}
+export const ContextMenu: FC<IContextMenu> = ({
+  children,
+  options,
+  isNested,
+}) => {
+  return (
+    <ContextMenuRoot>
+      {isNested ? (
+        <ContextMenuTriggerItem>{children}</ContextMenuTriggerItem>
+      ) : (
+        <ContextMenuTrigger>{children}</ContextMenuTrigger>
+      )}
+      {options && !!options.length && (
+        <ContextMenuContent sideOffset={isNested ? 2 : 5}>
+          {options.map(({ key, ...option }) => {
+            if (option.type === "text") {
+              const { children, label, onSelect } = option;
+              if (children)
+                return (
+                  <ContextMenu isNested key={key} options={children}>
+                    <Flex fluid row justify="space-between" align="center">
+                      <Text>{label}</Text>
+                      <CaretRight />
+                    </Flex>
+                  </ContextMenu>
+                );
+              return (
+                <ContextMenuItem key={key} onSelect={onSelect}>
+                  {label}
+                </ContextMenuItem>
+              );
+            }
+            if (option.type === "checkbox") {
+              const { label, checked, onCheckedChange } = option;
+              return (
+                <ContextMenuCheckboxItem
+                  key={key}
+                  checked={checked}
+                  onCheckedChange={onCheckedChange}
+                >
+                  <Flex row align="center">
+                    <ContextMenuItemIndicator>
+                      <Check />
+                    </ContextMenuItemIndicator>
+                    <Text css={{ ml: checked ? "$4" : undefined }}>
+                      {label}
+                    </Text>
+                  </Flex>
+                </ContextMenuCheckboxItem>
+              );
+            }
+            if (option.type === "radio") {
+              const { label, options, onValueChange, value } = option;
+              return (
+                <Fragment key={key}>
+                  <ContextMenuLabel>{label}</ContextMenuLabel>
+                  <ContextMenuRadioGroup
+                    value={value}
+                    onValueChange={onValueChange}
+                  >
+                    {options?.map(({ value: v, label }) => {
+                      return (
+                        <ContextMenuRadioItem key={v} value={v}>
+                          <ContextMenuItemIndicator>
+                            <Circle weight="fill" />
+                          </ContextMenuItemIndicator>
+                          <Text css={{ ml: "$4" }}>{label}</Text>
+                        </ContextMenuRadioItem>
+                      );
+                    })}
+                  </ContextMenuRadioGroup>
+                </Fragment>
+              );
+            }
+            return <ContextMenuSeparator key={key} />;
+          })}
+        </ContextMenuContent>
+      )}
+    </ContextMenuRoot>
+  );
+};
+
+export default ContextMenu;

components/ContextMenu/primitive.tsx

@@ -0,0 +1,107 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { styled } from "../../stitches.config";
+import {
+  slideDownAndFade,
+  slideLeftAndFade,
+  slideRightAndFade,
+  slideUpAndFade,
+} from "../../styles/keyframes";
+
+const StyledContent = styled(ContextMenuPrimitive.Content, {
+  minWidth: 140,
+  backgroundColor: "$backgroundOverlay",
+  borderRadius: 6,
+  overflow: "hidden",
+  padding: "5px",
+  boxShadow:
+    "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
+  "@media (prefers-reduced-motion: no-preference)": {
+    animationDuration: "400ms",
+    animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    willChange: "transform, opacity",
+    '&[data-state="open"]': {
+      '&[data-side="top"]': { animationName: slideDownAndFade },
+      '&[data-side="right"]': { animationName: slideLeftAndFade },
+      '&[data-side="bottom"]': { animationName: slideUpAndFade },
+      '&[data-side="left"]': { animationName: slideRightAndFade },
+    },
+  },
+  ".dark &": {
+    boxShadow:
+      "0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)",
+  },
+});
+
+const itemStyles = {
+  all: "unset",
+  fontSize: 13,
+  lineHeight: 1,
+  color: "$text",
+  borderRadius: 3,
+  display: "flex",
+  alignItems: "center",
+  height: 28,
+  padding: "0 7px",
+  position: "relative",
+  paddingLeft: 10,
+  userSelect: "none",
+
+  "&[data-disabled]": {
+    color: "$textMuted",
+    pointerEvents: "none",
+  },
+
+  "&:focus": {
+    backgroundColor: "$purple9",
+    color: "$white",
+  },
+};
+
+const StyledItem = styled(ContextMenuPrimitive.Item, { ...itemStyles });
+const StyledCheckboxItem = styled(ContextMenuPrimitive.CheckboxItem, {
+  ...itemStyles,
+});
+const StyledRadioItem = styled(ContextMenuPrimitive.RadioItem, {
+  ...itemStyles,
+});
+const StyledTriggerItem = styled(ContextMenuPrimitive.TriggerItem, {
+  '&[data-state="open"]': {
+    backgroundColor: "$purple9",
+    color: "$purple9",
+  },
+  ...itemStyles,
+});
+
+const StyledLabel = styled(ContextMenuPrimitive.Label, {
+  paddingLeft: 10,
+  fontSize: 12,
+  lineHeight: "25px",
+  color: "$text",
+});
+
+const StyledSeparator = styled(ContextMenuPrimitive.Separator, {
+  height: 1,
+  backgroundColor: "$backgroundAlt",
+  margin: 5,
+});
+
+const StyledItemIndicator = styled(ContextMenuPrimitive.ItemIndicator, {
+  position: "absolute",
+  left: 0,
+  width: 25,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+export const ContextMenuRoot = ContextMenuPrimitive.Root;
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+export const ContextMenuContent = StyledContent;
+export const ContextMenuItem = StyledItem;
+export const ContextMenuCheckboxItem = StyledCheckboxItem;
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+export const ContextMenuRadioItem = StyledRadioItem;
+export const ContextMenuItemIndicator = StyledItemIndicator;
+export const ContextMenuTriggerItem = StyledTriggerItem;
+export const ContextMenuLabel = StyledLabel;
+export const ContextMenuSeparator = StyledSeparator;

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)

components/DeployEditor.tsx

@@ -1,7 +1,6 @@
-import React, { useRef, useState } from "react";
-import { useSnapshot, ref } from "valtio";
-import Editor, { loader } from "@monaco-editor/react";
-import type monaco from "monaco-editor";
+import React, { useState } from "react";
+import { useSnapshot } from "valtio";
+
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
 import NextLink from "next/link";
@@ -10,31 +9,36 @@ import filesize from "filesize";
 
 import Box from "./Box";
 import Container from "./Container";
-import dark from "../theme/editor/amy.json";
-import light from "../theme/editor/xcode_default.json";
 import state from "../state";
 import wat from "../utils/wat-highlight";
 
 import EditorNavigation from "./EditorNavigation";
-import { Button, Text, Link, Flex } from ".";
-
-loader.config({
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
+import { Button, Text, Link, Flex, Tabs, Tab } from ".";
+import Monaco from "./Monaco";
 
 const FILESIZE_BREAKPOINTS: [number, number] = [2 * 1024, 5 * 1024];
 
 const DeployEditor = () => {
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
   const snap = useSnapshot(state);
   const router = useRouter();
   const { theme } = useTheme();
 
   const [showContent, setShowContent] = useState(false);
 
-  const activeFile = snap.files[snap.active];
+  const compiledFiles = snap.files.filter(file => file.compiledContent);
+  const activeFile = compiledFiles[snap.activeWat];
+
+  const renderNav = () => (
+    <Tabs
+      activeIndex={snap.activeWat}
+      onChangeActive={idx => (state.activeWat = idx)}
+    >
+      {compiledFiles.map((file, index) => {
+        return <Tab key={file.name} header={`${file.name}.wat`} />;
+      })}
+    </Tabs>
+  );
+
   const compiledSize = activeFile?.compiledContent?.byteLength || 0;
   const color =
     compiledSize > FILESIZE_BREAKPOINTS[1]
@@ -43,6 +47,10 @@ const DeployEditor = () => {
       ? "$warning"
       : "$success";
 
+  const isContentChanged =
+    activeFile && activeFile.compiledValueSnapshot !== activeFile.content;
+  // const hasDeployErrors = activeFile && activeFile.containsErrors;
+
   const CompiledStatView = activeFile && (
     <Flex
       column
@@ -60,15 +68,30 @@ 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>
+      {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 && (
@@ -87,8 +110,9 @@ const DeployEditor = () => {
       </NextLink>
     </Text>
   );
+
   const isContent =
-    snap.files?.filter((file) => file.compiledWatContent).length > 0 &&
+    snap.files?.filter(file => file.compiledWatContent).length > 0 &&
     router.isReady;
   return (
     <Box
@@ -101,7 +125,7 @@ const DeployEditor = () => {
         width: "100%",
       }}
     >
-      <EditorNavigation showWat />
+      <EditorNavigation renderNav={renderNav} />
       <Container
         css={{
           display: "flex",
@@ -115,32 +139,38 @@ const DeployEditor = () => {
         ) : !showContent ? (
           CompiledStatView
         ) : (
-          <Editor
+          <Monaco
             className="hooks-editor"
             defaultLanguage={"wat"}
             language={"wat"}
-            path={`file://tmp/c/${snap.files?.[snap.active]?.name}.wat`}
-            value={snap.files?.[snap.active]?.compiledWatContent || ""}
-            beforeMount={(monaco) => {
+            path={`file://tmp/c/${activeFile?.name}.wat`}
+            value={activeFile?.compiledWatContent || ""}
+            beforeMount={monaco => {
               monaco.languages.register({ id: "wat" });
               monaco.languages.setLanguageConfiguration("wat", wat.config);
               monaco.languages.setMonarchTokensProvider("wat", wat.tokens);
-              if (!state.editorCtx) {
-                state.editorCtx = ref(monaco.editor);
-                // @ts-expect-error
-                monaco.editor.defineTheme("dark", dark);
-                // @ts-expect-error
-                monaco.editor.defineTheme("light", light);
-              }
             }}
-            onMount={(editor, monaco) => {
-              editorRef.current = editor;
+            onMount={editor => {
               editor.updateOptions({
                 glyphMargin: true,
                 readOnly: true,
               });
             }}
             theme={theme === "dark" ? "dark" : "light"}
+            overlay={
+              <Flex
+                css={{
+                  m: "$1",
+                  ml: "auto",
+                  fontSize: "$sm",
+                  color: "$textMuted",
+                }}
+              >
+                <Link onClick={() => setShowContent(false)}>
+                  Exit editor mode
+                </Link>
+              </Flex>
+            }
           />
         )}
       </Container>

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;

components/Dialog.tsx

@@ -15,7 +15,7 @@ const contentShow = keyframes({
   "100%": { opacity: 1 },
 });
 const StyledOverlay = styled(DialogPrimitive.Overlay, {
-  zIndex: 9999,
+  zIndex: 10000,
   backgroundColor: blackA.blackA9,
   position: "fixed",
   inset: 0,
@@ -40,6 +40,7 @@ const StyledContent = styled(DialogPrimitive.Content, {
   color: "$mauve12",
   borderRadius: "$md",
   position: "relative",
+  mb: "15%",
   boxShadow:
     "0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)",
   width: "90vw",

components/DropdownMenu.tsx

@@ -1,27 +1,7 @@
-import { keyframes } from "@stitches/react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 import { styled } from "../stitches.config";
-
-const slideUpAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateY(2px)" },
-  "100%": { opacity: 1, transform: "translateY(0)" },
-});
-
-const slideRightAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateX(-2px)" },
-  "100%": { opacity: 1, transform: "translateX(0)" },
-});
-
-const slideDownAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateY(-2px)" },
-  "100%": { opacity: 1, transform: "translateY(0)" },
-});
-
-const slideLeftAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateX(2px)" },
-  "100%": { opacity: 1, transform: "translateX(0)" },
-});
+import { slideDownAndFade, slideLeftAndFade, slideRightAndFade, slideUpAndFade } from '../styles/keyframes';
 
 const StyledContent = styled(DropdownMenuPrimitive.Content, {
   minWidth: 220,

components/EditorNavigation.tsx

@@ -1,6 +1,10 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  ReactNode,
+} from "react";
 import {
-  Plus,
   Share,
   DownloadSimple,
   Gear,
@@ -28,7 +32,6 @@ import { useSnapshot } from "valtio";
 import toast from "react-hot-toast";
 
 import {
-  createNewFile,
   syncToGist,
   updateEditorSettings,
   downloadAsZip,
@@ -48,36 +51,23 @@ import {
 import Flex from "./Flex";
 import Stack from "./Stack";
 import { Input, Label } from "./Input";
-import Text from "./Text";
 import Tooltip from "./Tooltip";
-import { styled } from "../stitches.config";
 import { showAlert } from "../state/actions/showAlert";
 
-const ErrorText = styled(Text, {
-  color: "$error",
-  mt: "$1",
-  display: "block",
-});
 
-const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
+const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
   const snap = useSnapshot(state);
   const [editorSettingsOpen, setEditorSettingsOpen] = useState(false);
-  const [isNewfileDialogOpen, setIsNewfileDialogOpen] = useState(false);
-  const [newfileError, setNewfileError] = useState<string | null>(null);
-  const [filename, setFilename] = useState("");
   const { data: session, status } = useSession();
   const [popup, setPopUp] = useState(false);
   const [editorSettings, setEditorSettings] = useState(snap.editorSettings);
+  
   useEffect(() => {
     if (session && session.user && popup) {
       setPopUp(false);
     }
   }, [session, popup]);
 
-  // when filename changes, reset error
-  useEffect(() => {
-    setNewfileError(null);
-  }, [filename, setNewfileError]);
 
   const showNewGistAlert = () => {
     showAlert("Are you sure?", {
@@ -95,177 +85,55 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
     });
   };
 
-  const validateFilename = useCallback(
-    (filename: string): { error: string | null } => {
-      // check if filename already exists
-      if (!filename) {
-        return { error: "You need to add filename" };
-      }
-      if (snap.files.find(file => file.name === filename)) {
-        return { error: "Filename already exists." };
-      }
-
-      if (!filename.includes(".") || filename[filename.length - 1] === ".") {
-        return { error: "Filename should include file extension" };
-      }
-
-      // check for illegal characters
-      const ALPHA_NUMERICAL_REGEX = /^[A-Za-z0-9_-]+[.][A-Za-z0-9]{1,4}$/g;
-      if (!filename.match(ALPHA_NUMERICAL_REGEX)) {
-        return {
-          error: `Filename can contain only characters from a-z, A-Z, 0-9, "_" and "-" and it needs to have file extension (e.g. ".c")`,
-        };
-      }
-      return { error: null };
-    },
-    [snap.files]
-  );
-  const handleConfirm = useCallback(() => {
-    // add default extension in case omitted
-    const chk = validateFilename(filename);
-    if (chk && chk.error) {
-      setNewfileError(`Error: ${chk.error}`);
-      return;
-    }
-
-    setIsNewfileDialogOpen(false);
-    createNewFile(filename);
-    setFilename("");
-  }, [filename, setIsNewfileDialogOpen, setFilename, validateFilename]);
-
-  const files = snap.files;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   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 }}>
-          <Stack
-            css={{
-              gap: "$3",
-              flex: 1,
-              flexWrap: "nowrap",
-              marginBottom: "-1px",
-            }}
-          >
-            {files &&
-              files.length > 0 &&
-              files.map((file, index) => {
-                if (!file.compiledContent && showWat) {
-                  return null;
-                }
-                return (
-                  <Button
-                    size="sm"
-                    outline={
-                      showWat ? snap.activeWat !== index : snap.active !== index
-                    }
-                    onClick={() => (state.active = index)}
-                    key={file.name + index}
-                    css={{
-                      "&:hover": {
-                        span: {
-                          visibility: "visible",
-                        },
-                      },
-                    }}
-                  >
-                    {file.name}
-                    {showWat && ".wat"}
-                    {!showWat && (
-                      <Box
-                        as="span"
-                        css={{
-                          display: "flex",
-                          p: "2px",
-                          borderRadius: "$full",
-                          mr: "-4px",
-                          "&:hover": {
-                            // boxSizing: "0px 0px 1px",
-                            backgroundColor: "$mauve2",
-                            color: "$mauve12",
-                          },
-                        }}
-                        onClick={(ev: React.MouseEvent<HTMLElement>) => {
-                          ev.stopPropagation();
-                          // Remove file from state
-                          state.files.splice(index, 1);
-                          // Change active file state
-                          // If deleted file is behind active tab
-                          // we keep the current state otherwise
-                          // select previous file on the list
-                          state.active =
-                            index > snap.active ? snap.active : snap.active - 1;
-                        }}
-                      >
-                        <X size="9px" weight="bold" />
-                      </Box>
-                    )}
-                  </Button>
-                );
-              })}
-            {!showWat && (
-              <Dialog
-                open={isNewfileDialogOpen}
-                onOpenChange={setIsNewfileDialogOpen}
-              >
-                <DialogTrigger asChild>
-                  <Button
-                    ghost
-                    size="sm"
-                    css={{ alignItems: "center", px: "$2", mr: "$3" }}
-                  >
-                    <Plus size="16px" />{" "}
-                    {snap.files.length === 0 && "Add new file"}
-                  </Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogTitle>Create new file</DialogTitle>
-                  <DialogDescription>
-                    <Label>Filename</Label>
-                    <Input
-                      value={filename}
-                      onChange={e => setFilename(e.target.value)}
-                      onKeyPress={e => {
-                        if (e.key === "Enter") {
-                          handleConfirm();
-                        }
-                      }}
-                    />
-                    <ErrorText>{newfileError}</ErrorText>
-                  </DialogDescription>
-
-                  <Flex
-                    css={{
-                      marginTop: 25,
-                      justifyContent: "flex-end",
-                      gap: "$3",
-                    }}
-                  >
-                    <DialogClose asChild>
-                      <Button outline>Cancel</Button>
-                    </DialogClose>
-                    <Button variant="primary" onClick={handleConfirm}>
-                      Create file
-                    </Button>
-                  </Flex>
-                  <DialogClose asChild>
-                    <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
-                      <X size="20px" />
-                    </Box>
-                  </DialogClose>
-                </DialogContent>
-              </Dialog>
-            )}
-          </Stack>
+        <Container css={{ flex: 1 }} ref={containerRef}>
+          {renderNav?.()}
         </Container>
       </Flex>
       <Flex

components/HooksEditor.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useSnapshot, ref } from "valtio";
-import Editor, { loader } from "@monaco-editor/react";
 import type monaco from "monaco-editor";
 import { ArrowBendLeftUp } from "phosphor-react";
 import { useTheme } from "next-themes";
@@ -8,9 +7,7 @@ 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 { createNewFile, saveFile } from "../state/actions";
 import { apiHeaderFiles } from "../state/constants";
 import state from "../state";
 
@@ -22,20 +19,24 @@ 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";
+import { Tab, Tabs } from "./Tabs";
+import { renameFile } from "../state/actions/createNewFile";
+import { Link } from ".";
+import Markdown from "./Markdown";
 
-loader.config({
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
+const checkWritable = (filename?: string): boolean => {
+  if (apiHeaderFiles.find(file => file === filename)) {
+    return false;
+  }
+  return true;
+};
 
 const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
-  const currPath = editor.getModel()?.uri.path;
-  if (apiHeaderFiles.find((h) => currPath?.endsWith(h))) {
-    editor.updateOptions({ readOnly: true });
-  } else {
-    editor.updateOptions({ readOnly: false });
-  }
+  const filename = editor.getModel()?.uri.path.split("/").pop();
+  const isWritable = checkWritable(filename);
+  editor.updateOptions({ readOnly: !isWritable });
 };
 
 let decorations: { [key: string]: string[] } = {};
@@ -48,7 +49,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-")
@@ -62,16 +63,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,
@@ -104,6 +105,7 @@ const HooksEditor = () => {
   const snap = useSnapshot(state);
   const router = useRouter();
   const { theme } = useTheme();
+  const [isMdPreview, setIsMdPreview] = useState(true);
 
   useEffect(() => {
     if (editorRef.current) validateWritability(editorRef.current);
@@ -119,6 +121,60 @@ const HooksEditor = () => {
       setMarkers(monacoRef.current);
     }
   }, [snap.active]);
+  useEffect(() => {
+    return () => {
+      saveAllFiles();
+    };
+  }, []);
+
+  const file = snap.files[snap.active];
+
+  const renderNav = () => (
+    <Tabs
+      label="File"
+      activeIndex={snap.active}
+      onChangeActive={idx => (state.active = idx)}
+      extensionRequired
+      onCreateNewTab={createNewFile}
+      onCloseTab={idx => state.files.splice(idx, 1)}
+      onRenameTab={(idx, nwName, oldName = "") => renameFile(oldName, nwName)}
+      headerExtraValidation={{
+        regex: /^[A-Za-z0-9_-]+[.][A-Za-z0-9]{1,4}$/g,
+        error:
+          'Filename can contain only characters from a-z, A-Z, 0-9, "_" and "-"',
+      }}
+    >
+      {snap.files.map((file, index) => {
+        return (
+          <Tab
+            key={file.name}
+            header={file.name}
+            renameDisabled={!checkWritable(file.name)}
+          />
+        );
+      })}
+    </Tabs>
+  );
+  const previewToggle = (
+    <Link
+      onClick={() => {
+        if (!isMdPreview) {
+          saveFile(false);
+        }
+        setIsMdPreview(!isMdPreview);
+      }}
+      css={{
+        position: "absolute",
+        right: 0,
+        bottom: 0,
+        zIndex: 10,
+        m: "$1",
+        fontSize: "$sm",
+      }}
+    >
+      {isMdPreview ? "Exit Preview" : "View Preview"}
+    </Link>
+  );
   return (
     <Box
       css={{
@@ -131,117 +187,129 @@ const HooksEditor = () => {
         width: "100%",
       }}
     >
-      <EditorNavigation />
+      <EditorNavigation renderNav={renderNav} />
+      {file?.language === "markdown" && previewToggle}
       {snap.files.length > 0 && router.isReady ? (
-        <Editor
-          className="hooks-editor"
-          keepCurrentModel
-          defaultLanguage={snap.files?.[snap.active]?.language}
-          language={snap.files?.[snap.active]?.language}
-          path={`file:///work/c/${snap.files?.[snap.active]?.name}`}
-          defaultValue={snap.files?.[snap.active]?.content}
-          beforeMount={(monaco) => {
-            if (!snap.editorCtx) {
-              snap.files.forEach((file) =>
-                monaco.editor.createModel(
-                  file.content,
-                  file.language,
-                  monaco.Uri.parse(`file:///work/c/${file.name}`)
-                )
-              );
-            }
+        isMdPreview && file?.language === "markdown" ? (
+          <Markdown
+            components={{
+              a: ({ href, children }) => (
+                <Link target="_blank" rel="noopener noreferrer" href={href}>
+                  {children}
+                </Link>
+              ),
+            }}
+          >
+            {file.content}
+          </Markdown>
+        ) : (
+          <Monaco
+            keepCurrentModel
+            defaultLanguage={file?.language}
+            language={file?.language}
+            path={`file:///work/c/${file?.name}`}
+            defaultValue={file?.content}
+            // onChange={val => (state.files[snap.active].content = val)} // Auto save?
+            beforeMount={monaco => {
+              if (!snap.editorCtx) {
+                snap.files.forEach(file =>
+                  monaco.editor.createModel(
+                    file.content,
+                    file.language,
+                    monaco.Uri.parse(`file:///work/c/${file.name}`)
+                  )
+                );
+              }
 
-            // create the web socket
-            if (!subscriptionRef.current) {
-              monaco.languages.register({
-                id: "c",
-                extensions: [".c", ".h"],
-                aliases: ["C", "c", "H", "h"],
-                mimetypes: ["text/plain"],
-              });
-              MonacoServices.install(monaco);
-              const webSocket = createWebSocket(
-                process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ""
-              );
-              subscriptionRef.current = webSocket;
-              // listen when the web socket is opened
-              listen({
-                webSocket: webSocket as WebSocket,
-                onConnection: (connection) => {
-                  // 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);
-                    }
-                  });
+              // create the web socket
+              if (!subscriptionRef.current) {
+                monaco.languages.register({
+                  id: "c",
+                  extensions: [".c", ".h"],
+                  aliases: ["C", "c", "H", "h"],
+                  mimetypes: ["text/plain"],
+                });
+                MonacoServices.install(monaco);
+                const webSocket = createWebSocket(
+                  process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ""
+                );
+                subscriptionRef.current = webSocket;
+                // listen when the web socket is opened
+                listen({
+                  webSocket: webSocket as WebSocket,
+                  onConnection: connection => {
+                    // create and start the language client
+                    const languageClient = createLanguageClient(connection);
+                    const disposable = languageClient.start();
+
+                    connection.onClose(() => {
+                      try {
+                        disposable.dispose();
+                      } catch (err) {
+                        console.log("err", err);
+                      }
+                    });
+                  },
+                });
+              }
+
+              // editor.updateOptions({
+              //   minimap: {
+              //     enabled: false,
+              //   },
+              //   ...snap.editorSettings,
+              // });
+              if (!state.editorCtx) {
+                state.editorCtx = ref(monaco.editor);
+              }
+            }}
+            onMount={(editor, monaco) => {
+              editorRef.current = editor;
+              monacoRef.current = monaco;
+              editor.updateOptions({
+                glyphMargin: true,
+                lightbulb: {
+                  enabled: true,
                 },
               });
-            }
-
-            // // hook editor to global state
-            // editor.updateOptions({
-            //   minimap: {
-            //     enabled: false,
-            //   },
-            //   ...snap.editorSettings,
-            // });
-            if (!state.editorCtx) {
-              state.editorCtx = ref(monaco.editor);
-              // @ts-expect-error
-              monaco.editor.defineTheme("dark", dark);
-              // @ts-expect-error
-              monaco.editor.defineTheme("light", light);
-            }
-          }}
-          onMount={(editor, monaco) => {
-            editorRef.current = editor;
-            monacoRef.current = monaco;
-            editor.updateOptions({
-              glyphMargin: true,
-              lightbulb: {
-                enabled: true,
-              },
-            });
-            editor.addCommand(
-              monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
-              () => {
-                saveFile();
-              }
-            );
-            // When the markers (errors/warnings from clangd language server) change
-            // Lets improve the markers by adding extra content to them from related
-            // md files
-            monaco.editor.onDidChangeMarkers(() => {
-              if (monacoRef.current) {
-                setMarkers(monacoRef.current);
-              }
-            });
-
-            // Hacky way to hide Peek menu
-            editor.onContextMenu((e) => {
-              const host =
-                document.querySelector<HTMLElement>(".shadow-root-host");
-
-              const contextMenuItems =
-                host?.shadowRoot?.querySelectorAll("li.action-item");
-              contextMenuItems?.forEach((k) => {
-                // If menu item contains "Peek" lets hide it
-                if (k.querySelector(".action-label")?.textContent === "Peek") {
-                  // @ts-expect-error
-                  k["style"].display = "none";
+              editor.addCommand(
+                monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
+                () => {
+                  saveFile();
+                }
+              );
+              // When the markers (errors/warnings from clangd language server) change
+              // Lets improve the markers by adding extra content to them from related
+              // md files
+              monaco.editor.onDidChangeMarkers(() => {
+                if (monacoRef.current) {
+                  setMarkers(monacoRef.current);
                 }
               });
-            });
 
-            validateWritability(editor);
-          }}
-          theme={theme === "dark" ? "dark" : "light"}
-        />
+              // Hacky way to hide Peek menu
+              editor.onContextMenu(e => {
+                const host =
+                  document.querySelector<HTMLElement>(".shadow-root-host");
+
+                const contextMenuItems =
+                  host?.shadowRoot?.querySelectorAll("li.action-item");
+                contextMenuItems?.forEach(k => {
+                  // If menu item contains "Peek" lets hide it
+                  if (
+                    k.querySelector(".action-label")?.textContent === "Peek"
+                  ) {
+                    // @ts-expect-error
+                    k["style"].display = "none";
+                  }
+                });
+              });
+
+              validateWritability(editor);
+            }}
+            theme={theme === "dark" ? "dark" : "light"}
+          />
+        )
       ) : (
         <Container>
           {!snap.loading && router.isReady && (

components/LogBox.tsx

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

components/Markdown.tsx

@@ -0,0 +1,14 @@
+import ReactMarkdown from 'react-markdown';
+import { styled } from '../stitches.config';
+ 
+const Markdown = styled(ReactMarkdown, {
+  px: "$8",
+  "@md": {
+    px: "$20",
+  },
+  pb: "$5",
+  height: "100%",
+  overflowY: "auto"
+});
+ 
+export default Markdown;

components/Monaco.tsx

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

components/Navigation.tsx

@@ -28,6 +28,22 @@ import {
 } from "./Dialog";
 import PanelBox from "./PanelBox";
 import { templateFileIds } from "../state/constants";
+import { styled } from "../stitches.config";
+
+const ImageWrapper = styled(Flex, {
+  position: "relative",
+  mt: "$2",
+  mb: "$10",
+  svg: {
+    // fill: "red",
+    ".angle": {
+      fill: "$text",
+    },
+    ":not(.angle)": {
+      stroke: "$text",
+    },
+  },
+});
 
 const Navigation = () => {
   const router = useRouter();
@@ -86,12 +102,12 @@ const Navigation = () => {
             ) : (
               <>
                 <Heading css={{ lineHeight: 1 }}>
-                  {snap.files?.[0]?.name || "XRPL Hooks"}
+                  {snap.gistName || "XRPL Hooks"}
                 </Heading>
                 <Text
                   css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}
                 >
-                  {snap.files.length > 0 ? "Gist: " : "Playground"}
+                  {snap.files.length > 0 ? "Gist: " : "Builder"}
                   {snap.files.length > 0 && (
                     <Link
                       href={`https://gist.github.com/${snap.gistOwner || ""}/${
@@ -128,19 +144,20 @@ const Navigation = () => {
                 </DialogTrigger>
                 <DialogContent
                   css={{
+                    display: "flex",
                     maxWidth: "1080px",
                     width: "80vw",
-                    height: "80%",
+                    maxHeight: "80%",
                     backgroundColor: "$mauve1 !important",
                     overflowY: "auto",
+                    background: "black",
                     p: 0,
                   }}
                 >
                   <Flex
                     css={{
                       flexDirection: "column",
-                      flex: 1,
-                      height: "auto",
+                      height: "100%",
                       "@md": {
                         flexDirection: "row",
                         height: "100%",
@@ -151,15 +168,15 @@ const Navigation = () => {
                       css={{
                         borderBottom: "1px solid $colors$mauve5",
                         width: "100%",
+                        minWidth: "240px",
                         flexDirection: "column",
                         p: "$7",
-                        height: "100%",
                         backgroundColor: "$mauve2",
                         "@md": {
                           width: "30%",
                           maxWidth: "300px",
                           borderBottom: "0px",
-                          borderRight: "1px solid $colors$mauve6",
+                          borderRight: "1px solid $colors$mauve5",
                         },
                       }}
                     >
@@ -196,9 +213,9 @@ const Navigation = () => {
                               display: "inline-flex",
                               alignItems: "center",
                               gap: "$3",
-                              color: "$purple10",
+                              color: "$purple11",
                               "&:hover": {
-                                color: "$purple11",
+                                color: "$purple12",
                               },
                               "&:focus": {
                                 outline: 0,
@@ -217,9 +234,9 @@ const Navigation = () => {
                               display: "inline-flex",
                               alignItems: "center",
                               gap: "$3",
-                              color: "$purple10",
+                              color: "$purple11",
                               "&:hover": {
-                                color: "$purple11",
+                                color: "$purple12",
                               },
                               "&:focus": {
                                 outline: 0,
@@ -237,9 +254,9 @@ const Navigation = () => {
                               display: "inline-flex",
                               alignItems: "center",
                               gap: "$3",
-                              color: "$purple10",
+                              color: "$purple11",
                               "&:hover": {
-                                color: "$purple11",
+                                color: "$purple12",
                               },
                               "&:focus": {
                                 outline: 0,
@@ -255,67 +272,42 @@ const Navigation = () => {
                         </Flex>
                       </DialogDescription>
                     </Flex>
-                    <div>
-                      <Flex
-                        css={{
-                          display: "grid",
-                          gridTemplateColumns: "1fr",
+
+                    <Flex
+                      css={{
+                        display: "grid",
+                        gridTemplateColumns: "1fr",
+                        gridTemplateRows: "max-content",
+                        flex: 1,
+                        p: "$7",
+                        pb: "$16",
+                        gap: "$3",
+                        alignItems: "normal",
+                        flexWrap: "wrap",
+                        backgroundColor: "$mauve1",
+                        "@md": {
+                          gridTemplateColumns: "1fr 1fr",
                           gridTemplateRows: "max-content",
-                          flex: 1,
-                          p: "$7",
-                          gap: "$3",
-                          alignItems: "normal",
-                          flexWrap: "wrap",
-                          backgroundColor: "$mauve1",
-                          "@md": {
-                            gridTemplateColumns: "1fr 1fr 1fr",
-                            gridTemplateRows: "max-content",
-                          },
-                        }}
-                      >
+                        },
+                        "@lg": {
+                          gridTemplateColumns: "1fr 1fr 1fr",
+                          gridTemplateRows: "max-content",
+                        },
+                      }}
+                    >
+                      {Object.values(templateFileIds).map((template) => (
                         <PanelBox
+                          key={template.id}
                           as="a"
-                          href={`/develop/${templateFileIds.starter}`}
+                          href={`/develop/${template.id}`}
                         >
-                          <Heading>Starter</Heading>
-                          <Text>
-                            Just a basic starter with essential imports
-                          </Text>
+                          <ImageWrapper>{template.icon()}</ImageWrapper>
+                          <Heading>{template.name}</Heading>
+
+                          <Text>{template.description}</Text>
                         </PanelBox>
-                        <PanelBox
-                          as="a"
-                          href={`/develop/${templateFileIds.firewall}`}
-                        >
-                          <Heading>Firewall</Heading>
-                          <Text>
-                            This Hook essentially checks a blacklist of accounts
-                          </Text>
-                        </PanelBox>
-                        <PanelBox
-                          as="a"
-                          href={`/develop/${templateFileIds.notary}`}
-                        >
-                          <Heading>Notary</Heading>
-                          <Text>
-                            Collecting signatures for multi-sign transactions
-                          </Text>
-                        </PanelBox>
-                        <PanelBox
-                          as="a"
-                          href={`/develop/${templateFileIds.carbon}`}
-                        >
-                          <Heading>Carbon</Heading>
-                          <Text>Send a percentage of sum to an address</Text>
-                        </PanelBox>
-                        <PanelBox
-                          as="a"
-                          href={`/develop/${templateFileIds.peggy}`}
-                        >
-                          <Heading>Peggy</Heading>
-                          <Text>An oracle based stable coin hook</Text>
-                        </PanelBox>
-                      </Flex>
-                    </div>
+                      ))}
+                    </Flex>
                   </Flex>
                   <DialogClose asChild>
                     <Box
@@ -348,6 +340,8 @@ const Navigation = () => {
               height: 0,
               background: "transparent",
             },
+            scrollbarColor: "transparent",
+            scrollbarWidth: "none",
           }}
         >
           <Stack

components/RunScript/index.tsx

@@ -0,0 +1,337 @@
+import { Play, X } from "phosphor-react";
+import {
+  HTMLInputTypeAttribute,
+  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 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 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>) => {
+  let processString: string | undefined;
+  const process = { env: { NODE_ENV: "production" } } as any;
+  if (data) {
+    Object.keys(data).forEach(key => {
+      process.env[key] = data[key];
+    });
+  }
+  processString = JSON.stringify(process);
+
+  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);
+      }
+
+     
+      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>
+  </head>
+  <body>
+  </body>
+  </html>
+  `;
+};
+
+type Fields = Record<
+  string,
+  {
+    name: string;
+    value: string;
+    type?: "Account" | `Account.${keyof IAccount}` | HTMLInputTypeAttribute;
+    description?: string;
+    required?: boolean;
+  }
+>;
+
+const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
+  const snap = useSnapshot(state);
+  const [templateError, setTemplateError] = useState("");
+  const [fields, setFields] = useState<Fields>({});
+  const [iFrameCode, setIframeCode] = useState("");
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const getFields = useCallback(() => {
+    const inputTags = ["input", "param", "arg", "argument"];
+    const tags = getTags(content)
+      .filter(tag => inputTags.includes(tag.tag))
+      .filter(tag => !!tag.name);
+
+    let _fields = tags.map(tag => ({
+      name: tag.name,
+      value: tag.default || "",
+      type: tag.type,
+      description: tag.description,
+      required: !tag.optional,
+    }));
+
+    const fields: Fields = _fields.reduce((acc, field) => {
+      acc[field.name] = field;
+      return acc;
+    }, {} as Fields);
+
+    const error = getErrors(content);
+    if (error) setTemplateError(error.message);
+    else setTemplateError("");
+
+    return fields;
+  }, [content]);
+
+  const runScript = useCallback(() => {
+    try {
+      let data: any = {};
+      Object.keys(fields).forEach(key => {
+        data[key] = fields[key].value;
+      });
+      const template = generateHtmlTemplate(content, data);
+
+      setIframeCode(template);
+
+      state.scriptLogs = [
+        { type: "success", message: "Started running..." },
+      ];
+    } catch (err) {
+      state.scriptLogs = [
+        ...snap.scriptLogs,
+        // @ts-expect-error
+        { type: "error", message: err?.message || "Could not parse template" },
+      ];
+    }
+  }, [content, fields, snap.scriptLogs]);
+
+  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 defaultFields = getFields() || {};
+    setFields(defaultFields);
+  }, [content, setFields, getFields]);
+
+  const accOptions = snap.accounts?.map(acc => ({
+    ...acc,
+    label: acc.name,
+    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}>
+        <DialogTrigger asChild>
+          <Button
+            variant="primary"
+            onClick={() => {
+              saveFile(false);
+              setIframeCode("");
+            }}
+          >
+            <Play weight="bold" size="16px" /> {name}
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Run {name} script</DialogTitle>
+          <DialogDescription>
+            <Box>
+              You are about to run scripts provided by the developer of the
+              hook, make sure you trust the author before you continue.
+            </Box>
+            {templateError && (
+              <Box
+                as="span"
+                css={{
+                  display: "block",
+                  color: "$error",
+                  mt: "$3",
+                  whiteSpace: "pre",
+                }}
+              >
+                {templateError}
+              </Box>
+            )}
+            {Object.keys(fields).length > 0 && (
+              <Box css={{ mt: "$4", mb: 0 }}>
+                Fill in the following parameters to run the script.
+              </Box>
+            )}
+          </DialogDescription>
+
+          <Stack css={{ width: "100%" }}>
+            {Object.keys(fields).map(key => {
+              const { name, value, type, description, required } = fields[key];
+
+              const isAccount = type?.startsWith("Account");
+              const isAccountSecret = type === "Account.secret";
+
+              const accountField =
+                (isAccount && type?.split(".")[1]) || "address";
+
+              return (
+                <Box key={name} css={{ width: "100%" }}>
+                  <Label
+                    css={{ display: "flex", justifyContent: "space-between" }}
+                  >
+                    <span>
+                      {description || name} {required && <Text error>*</Text>}
+                    </span>
+                    {isAccountSecret && (
+                      <Text error small css={{ alignSelf: "end" }}>
+                        can access account secret key
+                      </Text>
+                    )}
+                  </Label>
+                  {isAccount ? (
+                    <Select
+                      css={{ mt: "$1" }}
+                      options={accOptions}
+                      onChange={(val: any) => {
+                        setFields({
+                          ...fields,
+                          [key]: {
+                            ...fields[key],
+                            value: val[accountField],
+                          },
+                        });
+                      }}
+                      value={accOptions.find(
+                        (acc: any) => acc[accountField] === value
+                      )}
+                    />
+                  ) : (
+                    <Input
+                      type={type || "text"}
+                      value={value}
+                      css={{ mt: "$1" }}
+                      onChange={e => {
+                        setFields({
+                          ...fields,
+                          [key]: { ...fields[key], value: e.target.value },
+                        });
+                      }}
+                    />
+                  )}
+                </Box>
+              );
+            })}
+            <Flex
+              css={{ justifyContent: "flex-end", width: "100%", gap: "$3" }}
+            >
+              <DialogClose asChild>
+                <Button outline>Cancel</Button>
+              </DialogClose>
+              <Button
+                variant="primary"
+                isDisabled={isDisabled}
+                onClick={handleRun}
+              >
+                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;

components/Select.tsx

@@ -91,7 +91,7 @@ const Select = forwardRef<any, Props>((props, ref) => {
             ...provided,
             color: colors.searchText,
             backgroundColor:
-              state.isSelected || state.isFocused
+              state.isFocused
                 ? colors.activeLight
                 : colors.dropDownBg,
             ":hover": {

components/SetHookDialog.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Plus, Trash, X } from "phosphor-react";
-import Button from "./Button";
-import Box from "./Box";
+import { Button, Box, Text } from ".";
 import { Stack, Flex, Select } from ".";
 import {
   Dialog,
@@ -19,209 +18,364 @@ import {
   useForm,
 } from "react-hook-form";
 
-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 state, { IFile, SelectOption } 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";
+import {
+  getParameters,
+  getInvokeOptions,
+  transactionOptions,
+  SetHookData,
+} from "../utils/setHook";
+import { capitalize } from "../utils/helpers";
 
-const transactionOptions = Object.keys(tts).map((key) => ({
-  label: key,
-  value: key as keyof TTS,
-}));
+export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
+  ({ accountAddress }) => {
+    const snap = useSnapshot(state);
 
-export type SetHookData = {
-  Invoke: {
-    value: keyof TTS;
-    label: string;
-  }[];
-  HookNamespace: string;
-  HookParameters: {
-    HookParameter: {
-      HookParameterName: string;
-      HookParameterValue: string;
+    const [estimateLoading, setEstimateLoading] = useState(false);
+    const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
+
+    const compiledFiles = snap.files.filter(file => file.compiledContent);
+    const activeFile = compiledFiles[snap.activeWat] as IFile | undefined;
+
+    const accountOptions: SelectOption[] = snap.accounts.map(acc => ({
+      label: acc.name,
+      value: acc.address,
+    }));
+
+    const [selectedAccount, setSelectedAccount] = useState(
+      accountOptions.find(acc => acc.value === accountAddress)
+    );
+    const account = snap.accounts.find(
+      acc => acc.address === selectedAccount?.value
+    );
+
+    const getHookNamespace = useCallback(
+      () =>
+        (activeFile && snap.deployValues[activeFile.name]?.HookNamespace) ||
+        activeFile?.name.split(".")[0] ||
+        "",
+      [activeFile, snap.deployValues]
+    );
+
+    const getDefaultValues = useCallback((): Partial<SetHookData> => {
+      const content = activeFile?.compiledValueSnapshot;
+      return (
+        (activeFile && snap.deployValues[activeFile.name]) || {
+          HookNamespace: getHookNamespace(),
+          Invoke: getInvokeOptions(content),
+          HookParameters: getParameters(content),
+        }
+      );
+    }, [activeFile, getHookNamespace, snap.deployValues]);
+
+    const {
+      register,
+      handleSubmit,
+      control,
+      watch,
+      setValue,
+      getValues,
+      reset,
+      formState: { errors },
+    } = useForm<SetHookData>({
+      defaultValues: getDefaultValues(),
+    });
+    const { fields, append, remove } = useFieldArray({
+      control,
+      name: "HookParameters", // unique name for your Field Array
+    });
+
+    const watchedFee = watch("Fee");
+
+    // Reset form if activeFile changes
+    useEffect(() => {
+      if (!activeFile) return;
+      const defaultValues = getDefaultValues();
+
+      reset(defaultValues);
+    }, [activeFile, getDefaultValues, reset]);
+
+    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", getHookNamespace());
+
+    const calculateHashedValue = useCallback(async () => {
+      const hashedVal = await sha256(namespace);
+      setHashedNamespace(hashedVal.toUpperCase());
+    }, [namespace]);
+
+    useEffect(() => {
+      calculateHashedValue();
+    }, [namespace, calculateHashedValue]);
+
+    const calculateFee = useCallback(async () => {
+      if (!account) return;
+
+      const formValues = getValues();
+      const tx = await prepareDeployHookTx(account, formValues);
+      if (!tx) {
+        return;
+      }
+      const res = await estimateFee(tx, account);
+      if (res && res.base_fee) {
+        setValue("Fee", Math.round(Number(res.base_fee || "")).toString());
+      }
+    }, [account, getValues, setValue]);
+
+    const tooLargeFile = () => {
+      return Boolean(
+        activeFile?.compiledContent?.byteLength &&
+          activeFile?.compiledContent?.byteLength >= 64000
+      );
     };
-  }[];
-  // HookGrants: {
-  //   HookGrant: {
-  //     Authorize: string;
-  //     HookHash: string;
-  //   };
-  // }[];
-};
 
-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
-  });
+    const onSubmit: SubmitHandler<SetHookData> = async data => {
+      const currAccount = state.accounts.find(
+        acc => acc.address === account?.address
+      );
+      if (!account) return;
+      if (currAccount) currAccount.isLoading = true;
 
-  // Update value if activeWat changes
-  useEffect(() => {
-    setValue(
-      "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]);
+      data.HookParameters.forEach(param => {
+        delete param.$metaData;
+        return param;
+      });
 
-  if (!account) {
-    return null;
-  }
+      const res = await deployHook(account, data);
+      if (currAccount) currAccount.isLoading = false;
 
-  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})`);
+    };
 
-    if (res && res.engine_result === "tesSUCCESS") {
-      toast.success("Transaction succeeded!");
-      return setIsSetHookDialogOpen(false);
-    }
-    toast.error(`Transaction failed! (${res?.engine_result_message})`);
-  };
+    const onOpenChange = useCallback((open: boolean) => {
+      setIsSetHookDialogOpen(open);
 
-  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
-          }
-        >
-          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} />
+      if (open) calculateFee();
+    }, [calculateFee]);
+    return (
+      <Dialog open={isSetHookDialogOpen} onOpenChange={onOpenChange}>
+        <DialogTrigger asChild>
+          <Button
+            ghost
+            size="xs"
+            uppercase
+            variant={"secondary"}
+            disabled={
+              !account || account.isLoading || !activeFile || 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>Account</Label>
+                  <Select
+                    instanceId="deploy-account"
+                    placeholder="Select account"
+                    options={accountOptions}
+                    value={selectedAccount}
+                    onChange={(acc: any) => setSelectedAccount(acc)}
+                  />
                 </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`
-                        )}
+                <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}
                       />
-                      <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>
+                <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}>
+                        <Flex column>
+                          <Flex row>
+                            <Input
+                              // important to include key with field's id
+                              placeholder="Parameter name"
+                              readOnly={field.$metaData?.required}
+                              {...register(
+                                `HookParameters.${index}.HookParameter.HookParameterName`
+                              )}
+                            />
+                            <Input
+                              css={{ mx: "$2" }}
+                              placeholder="Value (hex-quoted)"
+                              {...register(
+                                `HookParameters.${index}.HookParameter.HookParameterValue`,
+                                { required: field.$metaData?.required }
+                              )}
+                            />
+                            <Button
+                              onClick={() => remove(index)}
+                              variant="destroy"
+                            >
+                              <Trash weight="regular" size="16px" />
+                            </Button>
+                          </Flex>
+                          {errors.HookParameters?.[index]?.HookParameter
+                            ?.HookParameterValue?.type === "required" && (
+                            <Text error>This field is required</Text>
+                          )}
+                          <Label css={{ fontSize: "$sm", mt: "$1" }}>
+                            {capitalize(field.$metaData?.description)}
+                          </Label>
+                        </Flex>
+                      </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();
+                        if (!account) return;
+                        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 +423,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;

components/Tabs.tsx

@@ -6,7 +6,7 @@ import React, {
   useCallback,
 } from "react";
 import type { ReactNode, ReactElement } from "react";
-import { Box, Button, Flex, Input, Label, Stack, Text } from ".";
+import { Box, Button, Flex, Input, Label, Pre, Stack, Text } from ".";
 import {
   Dialog,
   DialogTrigger,
@@ -17,6 +17,8 @@ import {
 } from "./Dialog";
 import { Plus, X } from "phosphor-react";
 import { styled } from "../stitches.config";
+import { capitalize } from "../utils/helpers";
+import ContextMenu, { ContentMenuOption } from "./ContextMenu";
 
 const ErrorText = styled(Text, {
   color: "$error",
@@ -24,21 +26,31 @@ const ErrorText = styled(Text, {
   display: "block",
 });
 
+type Nullable<T> = T | null | undefined | false;
+
 interface TabProps {
-  header?: string;
-  children: ReactNode;
+  header: string;
+  children?: ReactNode;
+  renameDisabled?: boolean
 }
 
-// TODO customise messages shown
+// TODO customize messages shown
 interface Props {
+  label?: string;
   activeIndex?: number;
   activeHeader?: string;
   headless?: boolean;
   children: ReactElement<TabProps>[];
   keepAllAlive?: boolean;
   defaultExtension?: string;
-  forceDefaultExtension?: boolean;
+  extensionRequired?: boolean;
+  allowedExtensions?: string[];
+  headerExtraValidation?: {
+    regex: string | RegExp;
+    error: string;
+  };
   onCreateNewTab?: (name: string) => any;
+  onRenameTab?: (index: number, nwName: string, oldName?: string) => any;
   onCloseTab?: (index: number, header?: string) => any;
   onChangeActive?: (index: number, header?: string) => any;
 }
@@ -46,6 +58,7 @@ interface Props {
 export const Tab = (props: TabProps) => null;
 
 export const Tabs = ({
+  label = "Tab",
   children,
   activeIndex,
   activeHeader,
@@ -54,15 +67,19 @@ export const Tabs = ({
   onCreateNewTab,
   onCloseTab,
   onChangeActive,
+  onRenameTab,
+  headerExtraValidation,
+  extensionRequired,
   defaultExtension = "",
-  forceDefaultExtension,
+  allowedExtensions,
 }: Props) => {
   const [active, setActive] = useState(activeIndex || 0);
   const tabs: TabProps[] = children.map(elem => elem.props);
 
   const [isNewtabDialogOpen, setIsNewtabDialogOpen] = useState(false);
+  const [renamingTab, setRenamingTab] = useState<number | null>(null);
   const [tabname, setTabname] = useState("");
-  const [newtabError, setNewtabError] = useState<string | null>(null);
+  const [tabnameError, setTabnameError] = useState<string | null>(null);
 
   useEffect(() => {
     if (activeIndex) setActive(activeIndex);
@@ -78,17 +95,45 @@ export const Tabs = ({
 
   // when filename changes, reset error
   useEffect(() => {
-    setNewtabError(null);
-  }, [tabname, setNewtabError]);
+    setTabnameError(null);
+  }, [tabname, setTabnameError]);
 
   const validateTabname = useCallback(
-    (tabname: string): { error: string | null } => {
-      if (tabs.find(tab => tab.header === tabname)) {
-        return { error: "Name already exists." };
+    (tabname: string): { error?: string; result?: string } => {
+      if (!tabname) {
+        return { error: `Please enter ${label.toLocaleLowerCase()} name.` };
       }
-      return { error: null };
+      let ext = (tabname.includes(".") && tabname.split(".").pop()) || "";
+
+      if (!ext && defaultExtension) {
+        ext = defaultExtension;
+        tabname = `${tabname}.${defaultExtension}`;
+      }
+      if (tabs.find(tab => tab.header === tabname)) {
+        return { error: `${capitalize(label)} name already exists.` };
+      }
+      if (extensionRequired && !ext) {
+        return { error: "File extension is required!" };
+      }
+      if (allowedExtensions && !allowedExtensions.includes(ext)) {
+        return { error: "This file extension is not allowed!" };
+      }
+      if (
+        headerExtraValidation &&
+        !tabname.match(headerExtraValidation.regex)
+      ) {
+        return { error: headerExtraValidation.error };
+      }
+      return { result: tabname };
     },
-    [tabs]
+    [
+      allowedExtensions,
+      defaultExtension,
+      extensionRequired,
+      headerExtraValidation,
+      label,
+      tabs,
+    ]
   );
 
   const handleActiveChange = useCallback(
@@ -99,31 +144,50 @@ export const Tabs = ({
     [onChangeActive]
   );
 
-  const handleCreateTab = useCallback(() => {
-    // add default extension in case omitted
-    let _tabname = tabname.includes(".") ? tabname : tabname + defaultExtension;
-    if (forceDefaultExtension && !_tabname.endsWith(defaultExtension)) {
-      _tabname = _tabname + defaultExtension;
-    }
+  const handleRenameTab = useCallback(() => {
+    if (renamingTab === null) return;
 
-    const chk = validateTabname(_tabname);
-    if (chk.error) {
-      setNewtabError(`Error: ${chk.error}`);
+    const res = validateTabname(tabname);
+    if (res.error) {
+      setTabnameError(`Error: ${res.error}`);
       return;
     }
 
+    const { result: nwName = tabname } = res;
+
+    setRenamingTab(null);
+    setTabname("");
+
+    const oldName = tabs[renamingTab]?.header;
+    onRenameTab?.(renamingTab, nwName, oldName);
+
+    handleActiveChange(renamingTab, nwName);
+  }, [
+    handleActiveChange,
+    onRenameTab,
+    renamingTab,
+    tabname,
+    tabs,
+    validateTabname,
+  ]);
+
+  const handleCreateTab = useCallback(() => {
+    const res = validateTabname(tabname);
+    if (res.error) {
+      setTabnameError(`Error: ${res.error}`);
+      return;
+    }
+    const { result: _tabname = tabname } = res;
+
     setIsNewtabDialogOpen(false);
     setTabname("");
 
     onCreateNewTab?.(_tabname);
 
-    // switch to new tab?
     handleActiveChange(tabs.length, _tabname);
   }, [
-    tabname,
-    defaultExtension,
-    forceDefaultExtension,
     validateTabname,
+    tabname,
     onCreateNewTab,
     handleActiveChange,
     tabs.length,
@@ -131,15 +195,34 @@ export const Tabs = ({
 
   const handleCloseTab = useCallback(
     (idx: number) => {
-      if (idx <= active && active !== 0) {
-        setActive(active - 1);
-      }
-
       onCloseTab?.(idx, tabs[idx].header);
+
+      if (idx <= active && active !== 0) {
+        const nwActive = active - 1
+        handleActiveChange(nwActive, tabs[nwActive].header);
+      }
     },
-    [active, onCloseTab, tabs]
+    [active, handleActiveChange, onCloseTab, tabs]
   );
 
+  const closeOption = (idx: number): Nullable<ContentMenuOption> =>
+    onCloseTab && {
+      type: "text",
+      label: "Close",
+      key: "close",
+      onSelect: () => handleCloseTab(idx),
+    };
+  const renameOption = (idx: number, tab: TabProps): Nullable<ContentMenuOption> => {
+    return (
+      onRenameTab && !tab.renameDisabled && {
+        type: "text",
+        label: "Rename",
+        key: "rename",
+        onSelect: () => setRenamingTab(idx),
+      }
+    );
+  }
+  
   return (
     <>
       {!headless && (
@@ -154,46 +237,54 @@ export const Tabs = ({
           }}
         >
           {tabs.map((tab, idx) => (
-            <Button
+            <ContextMenu
               key={tab.header}
-              role="tab"
-              tabIndex={idx}
-              onClick={() => handleActiveChange(idx, tab.header)}
-              onKeyPress={() => handleActiveChange(idx, tab.header)}
-              outline={active !== idx}
-              size="sm"
-              css={{
-                "&:hover": {
-                  span: {
-                    visibility: "visible",
-                  },
-                },
-              }}
+              options={
+                [closeOption(idx), renameOption(idx, tab)].filter(
+                  Boolean
+                ) as ContentMenuOption[]
+              }
             >
-              {tab.header || idx}
-              {onCloseTab && (
-                <Box
-                  as="span"
-                  css={{
-                    display: "flex",
-                    p: "2px",
-                    borderRadius: "$full",
-                    mr: "-4px",
-                    "&:hover": {
-                      // boxSizing: "0px 0px 1px",
-                      backgroundColor: "$mauve2",
-                      color: "$mauve12",
+              <Button
+                role="tab"
+                tabIndex={idx}
+                onClick={() => handleActiveChange(idx, tab.header)}
+                onKeyPress={() => handleActiveChange(idx, tab.header)}
+                outline={active !== idx}
+                size="sm"
+                css={{
+                  "&:hover": {
+                    span: {
+                      visibility: "visible",
                     },
-                  }}
-                  onClick={(ev: React.MouseEvent<HTMLElement>) => {
-                    ev.stopPropagation();
-                    handleCloseTab(idx);
-                  }}
-                >
-                  <X size="9px" weight="bold" />
-                </Box>
-              )}
-            </Button>
+                  },
+                }}
+              >
+                {tab.header || idx}
+                {onCloseTab && (
+                  <Box
+                    as="span"
+                    css={{
+                      display: "flex",
+                      p: "2px",
+                      borderRadius: "$full",
+                      mr: "-4px",
+                      "&:hover": {
+                        // boxSizing: "0px 0px 1px",
+                        backgroundColor: "$mauve2",
+                        color: "$mauve12",
+                      },
+                    }}
+                    onClick={(ev: React.MouseEvent<HTMLElement>) => {
+                      ev.stopPropagation();
+                      handleCloseTab(idx);
+                    }}
+                  >
+                    <X size="9px" weight="bold" />
+                  </Box>
+                )}
+              </Button>
+            </ContextMenu>
           ))}
           {onCreateNewTab && (
             <Dialog
@@ -206,13 +297,16 @@ export const Tabs = ({
                   size="sm"
                   css={{ alignItems: "center", px: "$2", mr: "$3" }}
                 >
-                  <Plus size="16px" /> {tabs.length === 0 && "Add new tab"}
+                  <Plus size="16px" />{" "}
+                  {tabs.length === 0 && `Add new ${label.toLocaleLowerCase()}`}
                 </Button>
               </DialogTrigger>
               <DialogContent>
-                <DialogTitle>Create new tab</DialogTitle>
+                <DialogTitle>
+                  Create new {label.toLocaleLowerCase()}
+                </DialogTitle>
                 <DialogDescription>
-                  <Label>Tabname</Label>
+                  <Label>{label} name</Label>
                   <Input
                     value={tabname}
                     onChange={e => setTabname(e.target.value)}
@@ -222,7 +316,7 @@ export const Tabs = ({
                       }
                     }}
                   />
-                  <ErrorText>{newtabError}</ErrorText>
+                  <ErrorText>{tabnameError}</ErrorText>
                 </DialogDescription>
 
                 <Flex
@@ -247,31 +341,79 @@ export const Tabs = ({
               </DialogContent>
             </Dialog>
           )}
+          {onRenameTab && (
+            <Dialog
+              open={renamingTab !== null}
+              onOpenChange={() => setRenamingTab(null)}
+            >
+              <DialogContent>
+                <DialogTitle>
+                  Rename <Pre>{tabs[renamingTab || 0]?.header}</Pre>
+                </DialogTitle>
+                <DialogDescription>
+                  <Label>Enter new name</Label>
+                  <Input
+                    value={tabname}
+                    onChange={e => setTabname(e.target.value)}
+                    onKeyPress={e => {
+                      if (e.key === "Enter") {
+                        handleRenameTab();
+                      }
+                    }}
+                  />
+                  <ErrorText>{tabnameError}</ErrorText>
+                </DialogDescription>
+
+                <Flex
+                  css={{
+                    marginTop: 25,
+                    justifyContent: "flex-end",
+                    gap: "$3",
+                  }}
+                >
+                  <DialogClose asChild>
+                    <Button outline>Cancel</Button>
+                  </DialogClose>
+                  <Button variant="primary" onClick={handleRenameTab}>
+                    Confirm
+                  </Button>
+                </Flex>
+                <DialogClose asChild>
+                  <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
+                    <X size="20px" />
+                  </Box>
+                </DialogClose>
+              </DialogContent>
+            </Dialog>
+          )}
         </Stack>
       )}
-      {keepAllAlive ? (
-        tabs.map((tab, idx) => {
-          // TODO Maybe rule out fragments as children
-          if (!isValidElement(tab.children)) {
-            if (active !== idx) return null;
-            return tab.children;
-          }
-          let key = tab.children.key || tab.header || idx;
-          let { children } = tab;
-          let { style, ...props } = children.props;
-          return (
-            <children.type
-              key={key}
-              {...props}
-              style={{ ...style, display: active !== idx ? "none" : undefined }}
-            />
-          );
-        })
-      ) : (
-        <Fragment key={tabs[active].header || active}>
-          {tabs[active].children}
-        </Fragment>
-      )}
+      {keepAllAlive
+        ? tabs.map((tab, idx) => {
+            // TODO Maybe rule out fragments as children
+            if (!isValidElement(tab.children)) {
+              if (active !== idx) return null;
+              return tab.children;
+            }
+            let key = tab.children.key || tab.header || idx;
+            let { children } = tab;
+            let { style, ...props } = children.props;
+            return (
+              <children.type
+                key={key}
+                {...props}
+                style={{
+                  ...style,
+                  display: active !== idx ? "none" : undefined,
+                }}
+              />
+            );
+          })
+        : tabs[active] && (
+            <Fragment key={tabs[active].header || active}>
+              {tabs[active].children}
+            </Fragment>
+          )}
     </>
   );
 };

components/Text.tsx

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

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;

components/Transaction/index.tsx

@@ -1,11 +1,14 @@
 import { Play } from "phosphor-react";
-import { FC, useCallback, useEffect, useMemo } from "react";
+import { FC, useCallback, useEffect } from "react";
 import { useSnapshot } from "valtio";
 import state from "../../state";
 import {
-  modifyTransaction,
+  defaultTransactionType,
+  getTxFields,
+  modifyTxState,
   prepareState,
   prepareTransaction,
+  SelectOption,
   TransactionState,
 } from "../../state/transactions";
 import { sendTransaction } from "../../state/actions";
@@ -14,6 +17,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;
@@ -32,19 +37,18 @@ const Transaction: FC<TransactionProps> = ({
     txIsDisabled,
     txIsLoading,
     viewType,
-    editorSavedValue,
     editorValue,
   } = txState;
 
   const setState = useCallback(
     (pTx?: Partial<TransactionState>) => {
-      return modifyTransaction(header, pTx);
+      return modifyTxState(header, pTx);
     },
     [header]
   );
 
   const prepareOptions = useCallback(
-    (state: TransactionState = txState) => {
+    (state: Partial<TransactionState> = txState) => {
       const {
         selectedTransaction,
         selectedDestAccount,
@@ -53,9 +57,7 @@ const Transaction: FC<TransactionProps> = ({
       } = state;
 
       const TransactionType = selectedTransaction?.value || null;
-      const Destination =
-        selectedDestAccount?.value ||
-        ("Destination" in txFields ? null : undefined);
+      const Destination = selectedDestAccount?.value || txFields?.Destination;
       const Account = selectedAccount?.value || null;
 
       return prepareTransaction({
@@ -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);
@@ -101,8 +109,9 @@ const Transaction: FC<TransactionProps> = ({
       }
       const options = prepareOptions(st);
 
-      if (options.Destination === null) {
-        throw Error("Destination account cannot be null")
+      const fields = getTxFields(options.TransactionType);
+      if (fields.Destination && !options.Destination) {
+        throw Error("Destination account is required!");
       }
 
       await sendTransaction(account, options, { logPrefix });
@@ -116,30 +125,89 @@ 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 });
-  }, [header, viewType]);
+  const getJsonString = useCallback(
+    (state?: Partial<TransactionState>) =>
+      JSON.stringify(
+        prepareOptions?.(state) || {},
+        null,
+        editorSettings.tabSize
+      ),
+    [editorSettings.tabSize, prepareOptions]
+  );
 
-  const jsonValue = useMemo(
-    () =>
-      editorSavedValue ||
-      JSON.stringify(prepareOptions?.() || {}, null, editorSettings.tabSize),
-    [editorSavedValue, editorSettings.tabSize, prepareOptions]
+  const resetState = useCallback(
+    (transactionType: SelectOption | undefined = defaultTransactionType) => {
+      const fields = getTxFields(transactionType?.value);
+
+      const nwState: Partial<TransactionState> = {
+        viewType,
+        selectedTransaction: transactionType,
+      };
+
+      if (fields.Destination !== undefined) {
+        nwState.selectedDestAccount = null;
+        fields.Destination = "";
+      } else {
+        fields.Destination = undefined;
+      }
+      nwState.txFields = fields;
+
+      const state = modifyTxState(header, nwState, { replaceState: true });
+      const editorValue = getJsonString(state);
+      return setState({ editorValue });
+    },
+    [getJsonString, header, setState, viewType]
+  );
+
+  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" ? (
         <TxJson
-          value={jsonValue}
+          getJsonString={getJsonString}
           header={header}
           state={txState}
           setState={setState}
+          estimateFee={estimateFee}
         />
       ) : (
-        <TxUI state={txState} setState={setState} />
+        <TxUI state={txState} setState={setState} estimateFee={estimateFee} />
       )}
       <Flex
         row
@@ -155,7 +223,7 @@ const Transaction: FC<TransactionProps> = ({
         <Button
           onClick={() => {
             if (viewType === "ui") {
-              setState({ editorSavedValue: null, viewType: "json" });
+              setState({ viewType: "json" });
             } else setState({ viewType: "ui" });
           }}
           outline
@@ -163,7 +231,7 @@ const Transaction: FC<TransactionProps> = ({
           {viewType === "ui" ? "EDIT AS JSON" : "EXIT JSON MODE"}
         </Button>
         <Flex row>
-          <Button onClick={resetState} outline css={{ mr: "$3" }}>
+          <Button onClick={() => resetState()} outline css={{ mr: "$3" }}>
             RESET
           </Button>
           <Button

components/Transaction/json.tsx

@@ -1,9 +1,4 @@
-import Editor, { loader, useMonaco } from "@monaco-editor/react";
-import { FC, useCallback, useEffect, useState } from "react";
-import { useTheme } from "next-themes";
-
-import dark from "../../theme/editor/amy.json";
-import light from "../../theme/editor/xcode_default.json";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { useSnapshot } from "valtio";
 import state, {
   prepareState,
@@ -11,80 +6,90 @@ import state, {
   TransactionState,
 } from "../../state";
 import Text from "../Text";
-import Flex from "../Flex";
-import { Link } from "..";
+import { Flex, Link } from "..";
 import { showAlert } from "../../state/actions/showAlert";
 import { parseJSON } from "../../utils/json";
 import { extractSchemaProps } from "../../utils/schema";
 import amountSchema from "../../content/amount-schema.json";
-
-loader.config({
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
+import Monaco from "../Monaco";
+import type monaco from "monaco-editor";
 
 interface JsonProps {
-  value?: string;
+  getJsonString?: (state?: Partial<TransactionState>) => string;
   header?: string;
   setState: (pTx?: Partial<TransactionState> | undefined) => void;
   state: TransactionState;
+  estimateFee?: () => Promise<string | undefined>;
 }
 
 export const TxJson: FC<JsonProps> = ({
-  value = "",
+  getJsonString,
   state: txState,
   header,
   setState,
 }) => {
   const { editorSettings, accounts } = useSnapshot(state);
-  const { editorValue = value, selectedTransaction } = txState;
-  const { theme } = useTheme();
-  const [hasUnsaved, setHasUnsaved] = useState(false);
+  const { editorValue, estimatedFee } = txState;
+  const [currTxType, setCurrTxType] = useState<string | undefined>(
+    txState.selectedTransaction?.value
+  );
 
   useEffect(() => {
-    setState({ editorValue: value });
+    setState({
+      editorValue: getJsonString?.(),
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+  }, []);
 
   useEffect(() => {
-    if (editorValue === value) setHasUnsaved(false);
-    else setHasUnsaved(true);
-  }, [editorValue, value]);
+    const parsed = parseJSON(editorValue);
+    if (!parsed) return;
 
-  const saveState = (value: string, txState: TransactionState) => {
-    const tx = prepareState(value, txState);
-    if (tx) setState(tx);
+    const tt = parsed.TransactionType;
+    const tx = transactionsData.find(t => t.TransactionType === tt);
+    if (tx) setCurrTxType(tx.TransactionType);
+    else {
+      setCurrTxType(undefined);
+    }
+  }, [editorValue]);
+
+  const saveState = (value: string, transactionType?: string) => {
+    const tx = prepareState(value, transactionType);
+    if (tx) {
+      setState(tx);
+      setState({
+        editorValue: getJsonString?.(tx),
+      });
+    }
   };
 
   const discardChanges = () => {
     showAlert("Confirm", {
       body: "Are you sure to discard these changes?",
       confirmText: "Yes",
-      onConfirm: () => setState({ editorValue: value }),
+      onCancel: () => {},
+      onConfirm: () => setState({ editorValue: getJsonString?.() }),
     });
   };
 
   const onExit = (value: string) => {
     const options = parseJSON(value);
     if (options) {
-      saveState(value, txState);
+      saveState(value, currTxType);
       return;
     }
     showAlert("Error!", {
       body: `Malformed Transaction in ${header}, would you like to discard these changes?`,
       confirmText: "Discard",
-      onConfirm: () => setState({ editorValue: value }),
-      onCancel: () => setState({ viewType: "json", editorSavedValue: value }),
+      onConfirm: () => setState({ editorValue: getJsonString?.() }),
+      onCancel: () => setState({ viewType: "json" }),
     });
   };
 
-  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 +103,6 @@ export const TxJson: FC<JsonProps> = ({
         {}
       );
     }
-
     return [
       {
         uri: "file:///main-schema.json", // id of the first schema
@@ -130,6 +134,9 @@ export const TxJson: FC<JsonProps> = ({
             Amount: {
               $ref: "file:///amount-schema.json",
             },
+            Fee: {
+              $ref: "file:///fee-schema.json",
+            },
           },
         },
       },
@@ -141,65 +148,85 @@ 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]);
 
+  const [monacoInst, setMonacoInst] = useState<typeof monaco>();
   useEffect(() => {
-    if (!monaco) return;
-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-      validate: true,
-      schemas: getSchemas(),
+    if (!monacoInst) return;
+    getSchemas().then(schemas => {
+      monacoInst.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: true,
+        schemas,
+      });
     });
-  }, [getSchemas, monaco]);
+  }, [getSchemas, monacoInst]);
+
+  const hasUnsaved = useMemo(
+    () => editorValue !== getJsonString?.(),
+    [editorValue, getJsonString]
+  );
 
   return (
-    <Flex
-      fluid
-      column
-      css={{ height: "calc(100% - 45px)", position: "relative" }}
-    >
-      <Editor
-        className="hooks-editor"
-        language={"json"}
-        path={path}
-        height="100%"
-        beforeMount={monaco => {
-          monaco.editor.defineTheme("dark", dark as any);
-          monaco.editor.defineTheme("light", light as any);
-        }}
-        value={editorValue}
-        onChange={val => setState({ editorValue: val })}
-        onMount={(editor, monaco) => {
-          editor.updateOptions({
-            minimap: { enabled: false },
-            glyphMargin: true,
-            tabSize: editorSettings.tabSize,
-            dragAndDrop: true,
-            fontSize: 14,
-          });
+    <Monaco
+      rootProps={{
+        css: { height: "calc(100% - 45px)" },
+      }}
+      language={"json"}
+      id={header}
+      height="100%"
+      value={editorValue}
+      onChange={val => setState({ editorValue: val })}
+      onMount={(editor, monaco) => {
+        editor.updateOptions({
+          minimap: { enabled: false },
+          glyphMargin: true,
+          tabSize: editorSettings.tabSize,
+          dragAndDrop: true,
+          fontSize: 14,
+        });
 
-          // register onExit cb
-          const model = editor.getModel();
-          model?.onWillDispose(() => onExit(model.getValue()));
-
-          // 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={discardChanges}>discard</Link>
-        </Text>
-      )}
-    </Flex>
+        setMonacoInst(monaco);
+        // register onExit cb
+        const model = editor.getModel();
+        model?.onWillDispose(() => onExit(model.getValue()));
+      }}
+      overlay={
+        hasUnsaved ? (
+          <Flex
+            row
+            align="center"
+            css={{ fontSize: "$xs", color: "$textMuted", ml: "auto" }}
+          >
+            <Text muted small>
+              This file has unsaved changes.
+            </Text>
+            <Link
+              css={{ ml: "$1" }}
+              onClick={() => saveState(editorValue || "", currTxType)}
+            >
+              save
+            </Link>
+            <Link css={{ ml: "$1" }} onClick={discardChanges}>
+              discard
+            </Link>
+          </Flex>
+        ) : undefined
+      }
+    />
   );
 };

components/Transaction/ui.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import Container from "../Container";
 import Flex from "../Flex";
 import Input from "../Input";
@@ -7,19 +7,30 @@ import Text from "../Text";
 import {
   SelectOption,
   TransactionState,
-  transactionsData,
+  transactionsOptions,
   TxFields,
+  getTxFields,
+  defaultTransactionType,
 } 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,11 +39,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
     txFields,
   } = txState;
 
-  const transactionsOptions = transactionsData.map(tx => ({
-    value: tx.TransactionType,
-    label: tx.TransactionType,
-  }));
-
   const accountOptions: SelectOption[] = accounts.map(acc => ({
     label: acc.name,
     value: acc.address,
@@ -45,35 +51,85 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
     }))
     .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 resetFields = useCallback(
+    (tt: string) => {
+      const fields = getTxFields(tt);
 
-    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 });
-  };
+      if (fields.Destination !== undefined) {
+        setState({ selectedDestAccount: null });
+        fields.Destination = "";
+      } else {
+        fields.Destination = undefined;
+      }
+      return setState({ txFields: fields });
+    },
+    [setState]
+  );
 
   const handleSetAccount = (acc: SelectOption) => {
     setState({ selectedAccount: acc });
     streamState.selectedAccount = acc;
   };
 
-  const handleChangeTxType = (tt: SelectOption) => {
-    setState({ selectedTransaction: tt });
-    resetOptions(tt.value);
-  };
+  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 specialFields = ["TransactionType", "Account", "Destination"];
+  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 = useCallback(
+    (tt: SelectOption) => {
+      setState({ selectedTransaction: tt });
+
+      const newState = resetFields(tt.value);
+
+      handleEstimateFee(newState, true);
+    },
+    [handleEstimateFee, resetFields, setState]
+  );
+
+  const switchToJson = () => setState({ viewType: "json" });
+
+  // default tx
+  useEffect(() => {
+    if (selectedTransaction?.value) return;
+
+    if (defaultTransactionType) {
+      handleChangeTxType(defaultTransactionType);
+    }
+  }, [handleChangeTxType, selectedTransaction?.value]);
+
+  const fields = useMemo(
+    () => getTxFields(selectedTransaction?.value),
+    [selectedTransaction?.value]
+  );
+
+  const specialFields = ["TransactionType", "Account"];
+  if (fields.Destination !== undefined) {
+    specialFields.push("Destination");
+  }
 
   const otherFields = Object.keys(txFields).filter(
     k => !specialFields.includes(k)
@@ -87,7 +143,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
@@ -134,7 +190,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
             onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
           />
         </Flex>
-        {txFields.Destination !== undefined && (
+        {fields.Destination !== undefined && (
           <Flex
             row
             fluid
@@ -165,7 +221,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
           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 +229,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>
           );
         })}

components/icons/Carbon.tsx

@@ -0,0 +1,40 @@
+const Carbon = () => (
+  <svg
+    width="66"
+    height="32"
+    viewBox="0 0 66 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M33 2L23 15H28L21 24H45L38 15H43L33 2Z"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M33 24V30"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="angle"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M-1.14441e-05 4L8.94099 15.0625L4.00543e-05 26.125H2.27587L10.5015 15.9475H16.5938V14.1775H10.5015L2.27582 4H-1.14441e-05Z"
+      fill="#EDEDEF"
+    />
+    <path
+      className="angle"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M66 4L57.059 15.0625L66 26.125H63.7241L55.4985 15.9475H49.4062V14.1775H55.4985L63.7242 4H66Z"
+      fill="#EDEDEF"
+    />
+  </svg>
+);
+
+export default Carbon;

components/icons/Firewall.tsx

@@ -0,0 +1,75 @@
+const Firewall = () => (
+  <svg
+    width="66"
+    height="32"
+    viewBox="0 0 66 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M33 13V7"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M27 19V13"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M39 19V13"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M33 25V19"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M21 13H45"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M21 19H45"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M45 7H21V25H45V7Z"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="angle"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M-1.14441e-05 4.875L8.94099 15.9375L4.00543e-05 27H2.27587L10.5015 16.8225H16.5938V15.0525H10.5015L2.27582 4.875H-1.14441e-05Z"
+      fill="#EDEDEF"
+    />
+    <path
+      className="angle"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M66 4.875L57.059 15.9375L66 27H63.7241L55.4985 16.8225H49.4062V15.0525H55.4985L63.7242 4.875H66Z"
+      fill="#EDEDEF"
+    />
+  </svg>
+);
+
+export default Firewall;

components/icons/Notary.tsx

@@ -0,0 +1,40 @@
+const Notary = () => (
+  <svg
+    width="66"
+    height="32"
+    viewBox="0 0 66 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M37.5 10.5L26.5 21.5L21 16.0002"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M49 10.5L38 21.5L35.0784 18.5785"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="angle"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M-1.14441e-05 5L8.94099 16.0625L4.00543e-05 27.125H2.27587L10.5015 16.9475H16.5938V15.1775H10.5015L2.27582 5H-1.14441e-05Z"
+      fill="#EDEDEF"
+    />
+    <path
+      className="angle"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M66 5L57.059 16.0625L66 27.125H63.7241L55.4985 16.9475H49.4062V15.1775H55.4985L63.7242 5H66Z"
+      fill="#EDEDEF"
+    />
+  </svg>
+);
+
+export default Notary;

components/icons/Peggy.tsx

@@ -0,0 +1,61 @@
+const Peggy = () => (
+  <svg
+    width="66"
+    height="32"
+    viewBox="0 0 66 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M33 19C40.1797 19 46 16.3137 46 13C46 9.68629 40.1797 7 33 7C25.8203 7 20 9.68629 20 13C20 16.3137 25.8203 19 33 19Z"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M33 19V25"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M20 13V19C20 22 25 25 33 25C41 25 46 22 46 19V13"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M41 17.7633V23.7634"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M25 17.7633V23.7634"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="angle"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M-1.14441e-05 4L8.94099 15.0625L4.00543e-05 26.125H2.27587L10.5015 15.9475H16.5938V14.1775H10.5015L2.27582 4H-1.14441e-05Z"
+      fill="#EDEDEF"
+    />
+    <path
+      className="angle"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M66 4L57.059 15.0625L66 26.125H63.7241L55.4985 15.9475H49.4062V14.1775H55.4985L63.7242 4H66Z"
+      fill="#EDEDEF"
+    />
+  </svg>
+);
+
+export default Peggy;

components/icons/Starter.tsx

@@ -0,0 +1,40 @@
+const Starter = () => (
+  <svg
+    width="66"
+    height="32"
+    viewBox="0 0 66 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M42 28H24C23.7347 28 23.4804 27.8946 23.2929 27.7071C23.1053 27.5196 23 27.2652 23 27V5C23 4.73479 23.1053 4.48044 23.2929 4.2929C23.4804 4.10537 23.7347 4.00001 24 4H36.0003L43 11V27C43 27.2652 42.8947 27.5196 42.7071 27.7071C42.5196 27.8946 42.2653 28 42 28V28Z"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M36 4V11H43.001"
+      stroke="#EDEDEF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="angle"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M-1.14441e-05 4.875L8.94099 15.9375L4.00543e-05 27H2.27587L10.5015 16.8225H16.5938V15.0525H10.5015L2.27582 4.875H-1.14441e-05Z"
+      fill="#EDEDEF"
+    />
+    <path
+      className="angle"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M66 4.875L57.059 15.9375L66 27H63.7241L55.4985 16.8225H49.4062V15.0525H55.4985L63.7242 4.875H66Z"
+      fill="#EDEDEF"
+    />
+  </svg>
+);
+
+export default Starter;

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

content/amount-schema.json

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

content/transactions.json

@@ -55,7 +55,8 @@
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
     "TransactionType": "EscrowCancel",
     "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
-    "OfferSequence": 7
+    "OfferSequence": 7,
+    "Fee": "10"
   },
   {
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
@@ -69,7 +70,8 @@
     "FinishAfter": 533171558,
     "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
     "DestinationTag": 23480,
-    "SourceTag": 11747
+    "SourceTag": 11747,
+    "Fee": "10"
   },
   {
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
@@ -77,32 +79,50 @@
     "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
     "OfferSequence": 7,
     "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
-    "Fulfillment": "A0028000"
+    "Fulfillment": "A0028000",
+    "Fee": "10"
+  },
+  {
+    "TransactionType": "NFTokenMint",
+    "Account": "rvYAfWj5gh67oV6fW32ZzP3Aw4Eubs59B",
+    "Fee": "10",
+    "NFTokenTaxon": 0,
+    "URI": "697066733A2F2F516D614374444B5A4656767666756676626479346573745A626851483744586831364354707631686F776D424779"
   },
   {
     "TransactionType": "NFTokenBurn",
     "Account": "rvYAfWj5gh67oV6fW32ZzP3Aw4Eubs59B",
     "Fee": "10",
-    "TokenID": "000B013A95F14B0044F78A264E41713C64B5F89242540EE208C3098E00000D65"
+    "NFTokenID": "000B013A95F14B0044F78A264E41713C64B5F89242540EE208C3098E00000D65"
   },
   {
     "TransactionType": "NFTokenAcceptOffer",
-    "Fee": "10"
+    "Account": "rvYAfWj5gh67oV6fW32ZzP3Aw4Eubs59B",
+    "Fee": "10",
+    "NFTokenSellOffer": "A2FA1A9911FE2AEF83DAB05F437768E26A301EF899BD31EB85E704B3D528FF18",
+    "NFTokenBuyOffer": "4AAAEEA76E3C8148473CB3840CE637676E561FB02BD4CA22CA59729EA815B862",
+    "NFTokenBrokerFee": "10"
   },
   {
     "TransactionType": "NFTokenCancelOffer",
     "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
-    "TokenIDs": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007"
+    "Fee": "10",
+    "NFTokenOffers": {
+      "$type": "json",
+      "$value":  ["4AAAEEA76E3C8148473CB3840CE637676E561FB02BD4CA22CA59729EA815B862"]
+    }
   },
   {
     "TransactionType": "NFTokenCreateOffer",
     "Account": "rs8jBmmfpwgmrSPgwMsh7CvKRmRt1JTVSX",
-    "TokenID": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007",
+    "NFTokenID": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007",
     "Amount": {
       "$value": "100",
       "$type": "xrp"
     },
-    "Flags": 1
+    "Flags": 1,
+    "Destination": "",
+    "Fee": "10"
   },
   {
     "TransactionType": "OfferCancel",
@@ -150,7 +170,8 @@
     "PublicKey": "32D2471DB72B27E3310F355BB33E339BF26F8392D5A93D3BC0FC3B566612DA0F0A",
     "CancelAfter": 533171558,
     "DestinationTag": 23480,
-    "SourceTag": 11747
+    "SourceTag": 11747,
+    "Fee": "10"
   },
   {
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
@@ -160,7 +181,8 @@
       "$value": "200",
       "$type": "xrp"
     },
-    "Expiration": 543171558
+    "Expiration": 543171558,
+    "Fee": "10"
   },
   {
     "Flags": 0,
@@ -212,9 +234,13 @@
     "Fee": "12",
     "Flags": 262144,
     "LastLedgerSequence": 8007750,
-    "Amount": {
-      "$value": "100",
-      "$type": "xrp"
+    "LimitAmount": {
+      "$type": "json",
+      "$value": {
+        "currency": "USD",
+        "issuer": "rsP3mgGb2tcYUrxiLFiHJiQXhsziegtwBc",
+        "value": "100"
+      }
     },
     "Sequence": 12
   }

package.json

@@ -12,19 +12,21 @@
   "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",
+    "@radix-ui/react-context-menu": "^0.1.6",
     "@radix-ui/react-dialog": "^0.1.1",
-    "@radix-ui/react-dropdown-menu": "^0.1.1",
+    "@radix-ui/react-dropdown-menu": "^0.1.6",
     "@radix-ui/react-id": "^0.1.1",
     "@radix-ui/react-label": "^0.1.5",
     "@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",
+    "comment-parser": "^1.3.1",
     "dinero.js": "^1.9.1",
     "file-saver": "^2.0.5",
     "filesize": "^8.0.7",
@@ -34,7 +36,8 @@
     "lodash.xor": "^4.5.0",
     "monaco-editor": "^0.33.0",
     "next": "^12.0.4",
-    "next-auth": "^4.0.0-beta.5",
+    "next-auth": "^4.10.3",
+    "next-plausible": "^3.2.0",
     "next-themes": "^0.1.1",
     "normalize-url": "^7.0.2",
     "octokit": "^1.7.0",
@@ -48,6 +51,7 @@
     "react-hook-form": "^7.28.0",
     "react-hot-keys": "^2.7.1",
     "react-hot-toast": "^2.1.1",
+    "react-markdown": "^8.0.3",
     "react-new-window": "^0.2.1",
     "react-select": "^5.2.1",
     "react-split": "^2.0.14",
@@ -59,7 +63,7 @@
     "vscode-languageserver": "^7.0.0",
     "vscode-uri": "^3.0.2",
     "wabt": "1.0.16",
-    "xrpl-accountlib": "^1.3.2",
+    "xrpl-accountlib": "^1.5.2",
     "xrpl-client": "^1.9.4"
   },
   "devDependencies": {
@@ -73,5 +77,8 @@
     "eslint-config-next": "11.1.2",
     "raw-loader": "^4.0.2",
     "typescript": "4.4.4"
+  },
+  "resolutions": {
+    "ripple-binary-codec": "=1.4.2"
   }
 }

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";
@@ -16,7 +17,9 @@ import state from "../state";
 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 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
       ) {
@@ -61,22 +64,22 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
         <meta name="format-detection" content="telephone=no" />
         <meta property="og:url" content={`${origin}${router.asPath}`} />
 
-        <title>XRPL Hooks Editor</title>
-        <meta property="og:title" content="XRPL Hooks Editor" />
-        <meta name="twitter:title" content="XRPL Hooks Editor" />
+        <title>XRPL Hooks Builder</title>
+        <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="Playground for buildings Hooks, that add smart contract functionality to the XRP Ledger."
+          content="Hooks Builder, add smart contract functionality to the XRP Ledger."
         />
         <meta
           property="og:description"
-          content="Playground for buildings Hooks, that add smart contract functionality to the XRP Ledger."
+          content="Hooks Builder, add smart contract functionality to the XRP Ledger."
         />
         <meta
           name="twitter:description"
-          content="Playground for buildings Hooks, that add smart contract functionality to the XRP Ledger.."
+          content="Hooks Builder, add smart contract functionality to the XRP Ledger."
         />
         <meta property="og:image" content={`${origin}${shareImg}`} />
         <meta property="og:image:width" content="1200" />
@@ -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>

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

@@ -1,8 +1,7 @@
 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";
+import { FileJs, Gear, Play } from "phosphor-react";
 import Hotkeys from "react-hot-keys";
 import Split from "react-split";
 import { useSnapshot } from "valtio";
@@ -10,6 +9,7 @@ import { ButtonGroup, Flex } from "../../components";
 import Box from "../../components/Box";
 import Button from "../../components/Button";
 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 +141,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 +160,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 +197,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,
+            }}
+          >
+            <LogBox
+              Icon={FileJs}
+              title="Script Log"
+              logs={snap.scriptLogs}
+              clearLog={() => (state.scriptLogs = [])}
+            />
+          </Flex>
+        )}
+      </Flex>
     </Split>
   );
 };

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

@@ -3,9 +3,12 @@ import Split from "react-split";
 import { useSnapshot } from "valtio";
 import { Box, Container, Flex, Tab, Tabs } from "../../components";
 import Transaction from "../../components/Transaction";
-import state from "../../state";
+import state, { renameTxState } from "../../state";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
-import { transactionsState, modifyTransaction } from "../../state";
+import { transactionsState, modifyTxState } from "../../state";
+import { useEffect, useState } from "react";
+import { FileJs } from "phosphor-react";
+import RunScript from "../../components/RunScript";
 
 const DebugStream = dynamic(() => import("../../components/DebugStream"), {
   ssr: false,
@@ -19,14 +22,42 @@ 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
+  );
+
+  const renderNav = () => (
+    <Flex css={{ gap: "$3" }}>
+      {snap.files
+        .filter(f => f.name.endsWith(".js"))
+        .map(file => (
+          <RunScript file={file} key={file.name} />
+        ))}
+    </Flex>
+  );
 
   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)" }}
@@ -56,25 +87,26 @@ const Test = () => {
           >
             <Box css={{ width: "55%", px: "$2" }}>
               <Tabs
+                label="Transaction"
                 activeHeader={activeHeader}
                 // TODO make header a required field
                 onChangeActive={(idx, header) => {
                   if (header) transactionsState.activeHeader = header;
                 }}
                 keepAllAlive
-                forceDefaultExtension
-                defaultExtension=".json"
-                onCreateNewTab={header => modifyTransaction(header, {})}
+                defaultExtension="json"
+                allowedExtensions={["json"]}
+                onCreateNewTab={header => modifyTxState(header, {})}
+                onRenameTab={(idx, nwName, oldName = "") =>
+                  renameTxState(oldName, nwName)
+                }
                 onCloseTab={(idx, header) =>
-                  header && modifyTransaction(header, undefined)
+                  header && modifyTxState(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 +116,25 @@ const Test = () => {
             </Box>
           </Split>
         </Flex>
-
-        <Flex row fluid>
+        {hasScripts ? (
+          <Flex
+            as="div"
+            css={{
+              borderTop: "1px solid $mauve6",
+              background: "$mauve1",
+              flexDirection: "column",
+            }}
+          >
+            <LogBox
+              Icon={FileJs}
+              title="Helper scripts"
+              logs={snap.scriptLogs}
+              clearLog={() => (state.scriptLogs = [])}
+              renderNav={renderNav}
+            />
+          </Flex>
+        ) : null}
+        <Flex>
           <Split
             direction="horizontal"
             sizes={[50, 50]}

state/actions/addFaucetAccount.ts

@@ -27,41 +27,35 @@ export const names = [
  * new account with 10 000 XRP. Hooks Testnet /newcreds endpoint
  * is protected with CORS so that's why we did our own endpoint
  */
-export const addFaucetAccount = async (showToast: boolean = false) => {
-  // 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");
-  }
-  if (typeof window !== 'undefined') {
+export const addFaucetAccount = async (name?: string, showToast: boolean = false) => {
+  if (typeof window === undefined) return
 
-
-    const toastId = showToast ? toast.loading("Creating account") : "";
-    const res = await fetch(`${window.location.origin}/api/faucet`, {
-      method: "POST",
-    });
-    const json: FaucetAccountRes | { error: string } = await res.json();
-    if ("error" in json) {
-      if (showToast) {
-        return toast.error(json.error, { id: toastId });
-      } else {
-        return;
-      }
+  const toastId = showToast ? toast.loading("Creating account") : "";
+  const res = await fetch(`${window.location.origin}/api/faucet`, {
+    method: "POST",
+  });
+  const json: FaucetAccountRes | { error: string } = await res.json();
+  if ("error" in json) {
+    if (showToast) {
+      return toast.error(json.error, { id: toastId });
     } else {
-      if (showToast) {
-        toast.success("New account created", { id: toastId });
-      }
-      const currNames = state.accounts.map(acc => acc.name);
-      state.accounts.push({
-        name: names.filter(name => !currNames.includes(name))[0],
-        xrp: (json.xrp || 0 * 1000000).toString(),
-        address: json.address,
-        secret: json.secret,
-        sequence: 1,
-        hooks: [],
-        isLoading: false,
-        version: '2'
-      });
+      return;
     }
+  } else {
+    if (showToast) {
+      toast.success("New account created", { id: toastId });
+    }
+    const currNames = state.accounts.map(acc => acc.name);
+    state.accounts.push({
+      name: name || names.filter(name => !currNames.includes(name))[0],
+      xrp: (json.xrp || 0 * 1000000).toString(),
+      address: json.address,
+      secret: json.secret,
+      sequence: 1,
+      hooks: [],
+      isLoading: false,
+      version: '2'
+    });
   }
 };
 

state/actions/compileCode.ts

@@ -14,80 +14,113 @@ import { ref } from "valtio";
  */
 export const compileCode = async (activeId: number) => {
   // Save the file to global state
-  saveFile(false);
+  saveFile(false, activeId);
   if (!process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT) {
     throw Error("Missing env!");
   }
   // Bail out if we're already compiling
   if (state.compiling) {
-    // if compiling is ongoing return
+    // if compiling is ongoing return // TODO Inform user about it.
     return;
   }
   // Set loading state to true
   state.compiling = true;
   state.logs = []
+  const file = state.files[activeId]
   try {
-    const res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        output: "wasm",
-        compress: true,
-        strip: state.compileOptions.strip,
-        files: [
-          {
-            type: "c",
-            options: state.compileOptions.optimizationLevel || '-O0',
-            name: state.files[activeId].name,
-            src: state.files[activeId].content,
-          },
-        ],
-      }),
-    });
+    file.containsErrors = false
+    let res: Response
+    try {
+      res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          output: "wasm",
+          compress: true,
+          strip: state.compileOptions.strip,
+          files: [
+            {
+              type: "c",
+              options: state.compileOptions.optimizationLevel || '-O2',
+              name: file.name,
+              src: file.content,
+            },
+          ],
+        }),
+      });
+    } catch (error) {
+      throw Error("Something went wrong, check your network connection and try again!")
+    }
     const json = await res.json();
     state.compiling = false;
     if (!json.success) {
-      state.logs.push({ type: "error", message: json.message });
+      const errors = [json.message]
       if (json.tasks && json.tasks.length > 0) {
         json.tasks.forEach((task: any) => {
           if (!task.success) {
-            state.logs.push({ type: "error", message: task?.console });
+            errors.push(task?.console)
           }
         });
       }
-      return toast.error(`Couldn't compile!`, { position: "bottom-center" });
+      throw errors
     }
-    state.logs.push({
-      type: "success",
-      message: `File ${state.files?.[activeId]?.name} compiled successfully. Ready to deploy.`,
-      link: Router.asPath.replace("develop", "deploy"),
-      linkText: "Go to deploy",
-    });
-    // Decode base64 encoded wasm that is coming back from the endpoint
-    const bufferData = await decodeBinary(json.output);
-    state.files[state.active].compiledContent = ref(bufferData);
-    state.files[state.active].lastCompiled = new Date();
-    // Import wabt from and create human readable version of wasm file and
-    // put it into state
-    import("wabt").then((wabt) => {
-      const ww = wabt.default();
+    try {
+      // Decode base64 encoded wasm that is coming back from the endpoint
+      const bufferData = await decodeBinary(json.output);
+
+      // Import wabt from and create human readable version of wasm file and
+      // put it into state
+      const ww = (await import('wabt')).default()
       const myModule = ww.readWasm(new Uint8Array(bufferData), {
         readDebugNames: true,
       });
       myModule.applyNames();
 
       const wast = myModule.toText({ foldExprs: false, inlineExport: false });
-      state.files[state.active].compiledWatContent = wast;
-      toast.success("Compiled successfully!", { position: "bottom-center" });
+
+      file.compiledContent = ref(bufferData);
+      file.lastCompiled = new Date();
+      file.compiledValueSnapshot = file.content
+      file.compiledWatContent = wast;
+    } catch (error) {
+      throw Error("Invalid compilation result produced, check your code for errors and try again!")
+    }
+
+    toast.success("Compiled successfully!", { position: "bottom-center" });
+    state.logs.push({
+      type: "success",
+      message: `File ${state.files?.[activeId]?.name} compiled successfully. Ready to deploy.`,
+      link: Router.asPath.replace("develop", "deploy"),
+      linkText: "Go to deploy",
     });
   } catch (err) {
     console.log(err);
-    state.logs.push({
-      type: "error",
-      message: "Error occured while compiling!",
-    });
+
+    if (err instanceof Array && typeof err[0] === 'string') {
+      err.forEach(message => {
+        state.logs.push({
+          type: "error",
+          message,
+        });
+      })
+    }
+    else if (err instanceof Error) {
+      state.logs.push({
+        type: "error",
+        message: err.message,
+      });
+    }
+    else {
+      state.logs.push({
+        type: "error",
+        message: "Something went wrong, come back later!",
+      });
+    }
+
     state.compiling = false;
+    toast.error(`Error occurred while compiling!`, { position: "bottom-center" });
+    file.containsErrors = true
   }
 };

state/actions/createNewFile.ts

@@ -14,4 +14,11 @@ export const createNewFile = (name: string) => {
   const emptyFile: IFile = { name, language: languageMapping[fileExt as 'ts' | 'js' | 'md' | 'c' | 'h' | 'other'], content: "" };
   state.files.push(emptyFile);
   state.active = state.files.length - 1;
+};
+
+export const renameFile = (oldName: string, nwName: string) => {
+  const file = state.files.find(file => file.name === oldName)
+  if (!file) throw Error(`No file exists with name ${oldName}`)
+
+  file.name = nwName
 };

state/actions/deleteAccount.ts

@@ -0,0 +1,24 @@
+import state, { transactionsState } from '..';
+
+export const deleteAccount = (addr?: string) => {
+    if (!addr) return;
+    const index = state.accounts.findIndex(acc => acc.address === addr);
+    if (index === -1) return;
+    state.accounts.splice(index, 1);
+
+    // update selected accounts
+    transactionsState.transactions
+        .filter(t => t.state.selectedAccount?.value === addr)
+        .forEach(t => {
+            const acc = t.state.selectedAccount;
+            if (!acc) return;
+            acc.label = acc.value;
+        });
+    transactionsState.transactions
+        .filter(t => t.state.selectedDestAccount?.value === addr)
+        .forEach(t => {
+            const acc = t.state.selectedDestAccount;
+            if (!acc) return;
+            acc.label = acc.value;
+        });
+};

state/actions/deployHook.tsx

@@ -3,16 +3,17 @@ import toast from "react-hot-toast";
 
 import state, { IAccount } from "../index";
 import calculateHookOn, { TTS } from "../../utils/hookOnCalculator";
-import { SetHookData } from "../../components/SetHookDialog";
 import { Link } from "../../components";
 import { ref } from "valtio";
+import estimateFee from "../../utils/estimateFee";
+import { SetHookData } from '../../utils/setHook';
 
 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>
             </>
           ),
@@ -168,7 +189,7 @@ export const deployHook = async (
       console.log(err);
       state.deployLogs.push({
         type: "error",
-        message: "Error occured while deploying",
+        message: "Error occurred while deploying",
       });
     }
     if (currentAccount) {
@@ -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) {
@@ -243,10 +272,10 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
       }
     } catch (err) {
       console.log(err);
-      toast.error("Error occured while deleting hoook", { id: toastId });
+      toast.error("Error occurred while deleting hook", { id: toastId });
       state.deployLogs.push({
         type: "error",
-        message: "Error occured while deleting hook",
+        message: "Error occurred while deleting hook",
       });
     }
     if (currentAccount) {

state/actions/downloadAsZip.ts

@@ -8,11 +8,12 @@ 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) {
-        toast.error('Error occured while creating zip file, try again later')
+        toast.error('Error occurred while creating zip file, try again later')
     } finally {
         state.zipLoading = false
     }

state/actions/fetchFiles.ts

@@ -1,92 +1,92 @@
 import { Octokit } from "@octokit/core";
-import Router from "next/router";
-import state from '../index';
+import state, { IFile } from '../index';
 import { templateFileIds } from '../constants';
 
 const octokit = new Octokit();
 
-/* Fetches Gist files from Githug Gists based on
- * gistId and stores the content in global state
+/** 
+ * Fetches files from Github Gists based on gistId and stores them in global state
  */
-export const fetchFiles = (gistId: string) => {
+export const fetchFiles = async (gistId: string) => {
+  if (!gistId || state.files.length) return
+
   state.loading = true;
-  if (gistId && !state.files.length) {
-    state.logs.push({
-      type: "log",
-      message: `Fetching Gist with id: ${gistId}`,
-    });
-
-    octokit
+  state.logs.push({
+    type: "log",
+    message: `Fetching Gist with id: ${gistId}`,
+  });
+  try {
+    const res = await octokit
       .request("GET /gists/{gist_id}", { gist_id: gistId })
-      .then(async res => {
-        if (!Object.values(templateFileIds).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 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' },
-            };
-            res.data.files = files;
-          }
-        } catch (err) {
-          console.log(err)
-        }
 
+    const isTemplate = (id: string) => Object.values(templateFileIds).map(v => v.id).includes(id)
 
+    if (isTemplate(gistId)) {
+      // fetch headers
+      const headerRes = await fetch(`${process.env.NEXT_PUBLIC_COMPILE_API_BASE_URL}/api/header-files`);
+      if (!headerRes.ok) throw Error("Failed to fetch headers");;
 
-        return res;
-        // If you want to load templates from GIST instad, uncomment the code below and comment the code above.
-        // return octokit.request("GET /gists/{gist_id}", { gist_id: templateFileIds.headers }).then(({ data: { files: headerFiles } }) => {
-        //   const files = { ...res.data.files, ...headerFiles }
-        //   console.log(headerFiles)
-        //   res.data.files = files
-        //   return res
-        // })
+      const headerJson = await headerRes.json()
+      const headerFiles: Record<string, { filename: string; content: string; language: string }> = {};
+      Object.entries(headerJson).forEach(([key, value]) => {
+        const fname = `${key}.h`;
+        headerFiles[fname] = { filename: fname, content: value as string, language: 'C' }
       })
-      .then((res) => {
-        if (res.data.files && Object.keys(res.data.files).length > 0) {
-          const files = Object.keys(res.data.files).map((filename) => ({
-            name: res.data.files?.[filename]?.filename || "untitled.c",
-            language: res.data.files?.[filename]?.language?.toLowerCase() || "",
-            content: res.data.files?.[filename]?.content || "",
-          }));
-          state.loading = false;
-          if (files.length > 0) {
-            state.logs.push({
-              type: "success",
-              message: "Fetched successfully ✅",
-            });
-            state.files = files;
-            state.gistId = gistId;
-            state.gistName = Object.keys(res.data.files)?.[0] || "untitled";
-            state.gistOwner = res.data.owner?.login;
-            return;
-          } else {
-            // Open main modal if now files
-            state.mainModalOpen = true;
-          }
-          return Router.push({ pathname: "/develop" });
-        }
-        state.loading = false;
-      })
-      .catch((err) => {
-        // console.error(err)
-        state.loading = false;
-        state.logs.push({
-          type: "error",
-          message: `Couldn't find Gist with id: ${gistId}`,
-        });
-        return;
-      });
-    return;
+      const files = {
+        ...res.data.files,
+        ...headerFiles
+      };
+      res.data.files = files;
+    }
+
+    if (!res.data.files) throw Error("No files could be fetched from given gist id!")
+
+    const files: IFile[] = Object.keys(res.data.files).map((filename) => ({
+      name: res.data.files?.[filename]?.filename || "untitled.c",
+      language: res.data.files?.[filename]?.language?.toLowerCase() || "",
+      content: res.data.files?.[filename]?.content || "",
+    }));
+
+    files.sort((a, b) => {
+      const aBasename = a.name.split('.')?.[0];
+      const aExt = a.name.split('.').pop() || '';
+      const bBasename = b.name.split('.')?.[0];
+      const bExt = b.name.split('.').pop() || '';
+
+      // default priority is undefined == 0
+      const extPriority: Record<string, number> = {
+        c: 3,
+        md: 2,
+        h: -1
+      }
+
+      // Sort based on extention priorities
+      const comp = (extPriority[bExt] || 0) - (extPriority[aExt] || 0)
+      if (comp !== 0) return comp
+  
+      // Otherwise fallback to alphabetical sorting
+      return aBasename.localeCompare(bBasename)
+    })
+
+    state.logs.push({
+      type: "success",
+      message: "Fetched successfully ✅",
+    });
+    state.files = files;
+    state.gistId = gistId;
+    state.gistOwner = res.data.owner?.login;
+
+    const gistName = files.find(file => file.language === 'c' || file.language === 'javascript')?.name || "untitled";
+    state.gistName = gistName
+  } catch (err) {
+    console.error(err)
+    let message: string
+    if (err instanceof Error) message = err.message
+    else message = `Something went wrong, try again later!`
+    state.logs.push({
+      type: "error",
+      message: `Error: ${message}`,
+    });
   }
   state.loading = false;
-};
+};

state/actions/importAccount.ts

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

state/actions/saveFile.ts

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

state/actions/sendTransaction.ts

@@ -20,14 +20,10 @@ 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 +43,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({

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: '1f8109c80f504e6326db2735df2f0ad6', // Forked
+        name: 'Starter',
+        description: 'Just a basic starter with essential imports, just accepts any transaction coming through',
+        icon: Starter
+
+    },
+    'firewall': {
+        id: '1cc30f39c8a0b9c55b88c312669ca45e',  // Forked
+        name: 'Firewall',
+        description: 'This Hook essentially checks a blacklist of accounts',
+        icon: Firewall
+    },
+    'notary': {
+        id: '87b6f5a8c2f5038fb0f20b8b510efa10', // Forked
+        name: 'Notary',
+        description: 'Collecting signatures for multi-sign transactions',
+        icon: Notary
+    },
+    'carbon': {
+        id: '953662b22d065449f8ab6f69bc2afe41',  // Forked
+        name: 'Carbon',
+        description: 'Send a percentage of sum to an address',
+        icon: Carbon
+    },
+    'peggy': {
+        id: '049784a83fa068faf7912f663f7b6471', // Forked
+        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'];

state/index.ts

@@ -1,6 +1,6 @@
 import type monaco from "monaco-editor";
 import { proxy, ref, subscribe } from "valtio";
-import { devtools } from 'valtio/utils';
+import { devtools, subscribeKey } from 'valtio/utils';
 import { XrplClient } from "xrpl-client";
 import { SplitSize } from "./actions/persistSplits";
 
@@ -13,9 +13,11 @@ export interface IFile {
   name: string;
   language: string;
   content: string;
+  compiledValueSnapshot?: string
   compiledContent?: ArrayBuffer | null;
   compiledWatContent?: string | null;
   lastCompiled?: Date
+  containsErrors?: boolean
 }
 
 export interface FaucetAccountRes {
@@ -35,6 +37,10 @@ export interface IAccount {
   hooks: string[];
   isLoading: boolean;
   version?: string;
+  error?: {
+    message: string;
+    code: string;
+  } | null;
 }
 
 export interface ILog {
@@ -48,6 +54,8 @@ export interface ILog {
   defaultCollapsed?: boolean
 }
 
+export type DeployValue = Record<IFile['name'], any>;
+
 export interface IState {
   files: IFile[];
   gistId?: string | null;
@@ -62,6 +70,7 @@ export interface IState {
   logs: ILog[];
   deployLogs: ILog[];
   transactionLogs: ILog[];
+  scriptLogs: ILog[];
   editorCtx?: typeof monaco.editor;
   editorSettings: {
     tabSize: number;
@@ -77,7 +86,8 @@ export interface IState {
   compileOptions: {
     optimizationLevel: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os';
     strip: boolean
-  }
+  },
+  deployValues: DeployValue
 }
 
 // let localStorageState: null | string = null;
@@ -92,6 +102,7 @@ let initialState: IState = {
   logs: [],
   deployLogs: [],
   transactionLogs: [],
+  scriptLogs: [],
   editorCtx: undefined,
   gistId: undefined,
   gistOwner: undefined,
@@ -108,9 +119,10 @@ let initialState: IState = {
   mainModalShowed: false,
   accounts: [],
   compileOptions: {
-    optimizationLevel: '-O0',
-    strip: false
-  }
+    optimizationLevel: '-O2',
+    strip: true
+  },
+  deployValues: {}
 };
 
 let localStorageAccounts: string | null = null;
@@ -156,16 +168,23 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 if (typeof window !== "undefined") {
-  subscribe(state, () => {
-    const { accounts, active } = state;
+  subscribe(state.accounts, () => {
+    const { accounts } = state;
     const accountsNoLoading = accounts.map(acc => ({ ...acc, isLoading: false }))
     localStorage.setItem("hooksIdeAccounts", JSON.stringify(accountsNoLoading));
-    if (!state.files[active]?.compiledWatContent) {
-      state.activeWat = 0;
-    } else {
-      state.activeWat = active;
-    }
   });
+
+  const updateActiveWat = () => {
+    const filename = state.files[state.active]?.name
+
+    const compiledFiles = state.files.filter(
+      file => file.compiledContent)
+    const idx = compiledFiles.findIndex(file => file.name === filename)
+
+    if (idx !== -1) state.activeWat = idx
+  }
+  subscribeKey(state, 'active', updateActiveWat)
+  subscribeKey(state, 'files', updateActiveWat)
 }
 export default state
 

state/transactions.ts

@@ -18,13 +18,13 @@ export interface TransactionState {
     txIsDisabled: boolean;
     txFields: TxFields;
     viewType: 'json' | 'ui',
-    editorSavedValue: null | string,
-    editorValue?: string
+    editorValue?: string,
+    estimatedFee?: string
 }
 
 
 export type TxFields = Omit<
-    typeof transactionsData[0],
+    Partial<typeof transactionsData[0]>,
     "Account" | "Sequence" | "TransactionType"
 >;
 
@@ -35,27 +35,34 @@ export const defaultTransaction: TransactionState = {
     txIsLoading: false,
     txIsDisabled: false,
     txFields: {},
-    viewType: 'ui',
-    editorSavedValue: null
+    viewType: 'ui'
 };
 
 export const transactionsState = proxy({
     transactions: [
         {
             header: "test1.json",
-            state: defaultTransaction,
+            state: { ...defaultTransaction },
         },
     ],
     activeHeader: "test1.json"
 });
 
+export const renameTxState = (oldName: string, nwName: string) => {
+    const tx = transactionsState.transactions.find(tx => tx.header === oldName);
+
+    if (!tx) throw Error(`No transaction state exists with given header name ${oldName}`);
+
+    tx.header = nwName
+}
+
 /**
  * Simple transaction state changer
  * @param header Unique key and tab name for the transaction tab
  * @param partialTx partial transaction state, `undefined` deletes the transaction
  * 
  */
-export const modifyTransaction = (
+export const modifyTxState = (
     header: string,
     partialTx?: Partial<TransactionState>,
     opts: { replaceState?: boolean } = {}
@@ -91,9 +98,9 @@ export const modifyTransaction = (
     }
 
     Object.keys(partialTx).forEach(k => {
-        // Typescript mess here, but is definetly safe!
+        // Typescript mess here, but is definitely 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];
     });
 
@@ -117,7 +124,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;
             } else {
                 try {
                     options[field] = JSON.parse(_value.$value);
@@ -130,8 +137,8 @@ export const prepareTransaction = (data: any) => {
             }
         }
 
-        // delete unneccesary fields
-        if (options[field] === undefined) {
+        // delete unnecessary fields
+        if (!options[field]) {
             delete options[field];
         }
     });
@@ -140,7 +147,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 +158,7 @@ export const prepareState = (value: string, txState: TransactionState) => {
 
     const { Account, TransactionType, Destination, ...rest } = options;
     let tx: Partial<TransactionState> = {};
-    const { txFields } = txState
+    const schema = getTxFields(transactionType)
 
     if (Account) {
         const acc = state.accounts.find(acc => acc.address === Account);
@@ -179,9 +186,8 @@ export const prepareState = (value: string, txState: TransactionState) => {
         tx.selectedTransaction = null;
     }
 
-    if (txFields.Destination !== undefined) {
+    if (schema.Destination !== undefined) {
         const dest = state.accounts.find(acc => acc.address === Destination);
-        rest.Destination = null
         if (dest) {
             tx.selectedDestAccount = {
                 label: dest.name,
@@ -198,15 +204,18 @@ export const prepareState = (value: string, txState: TransactionState) => {
             tx.selectedDestAccount = null
         }
     }
+    else if (Destination) {
+        rest.Destination = Destination
+    }
 
     Object.keys(rest).forEach(field => {
         const value = rest[field];
-        const origValue = txFields[field as keyof TxFields]
-        const isXrp = typeof value !== 'object' && origValue && typeof origValue === 'object' && origValue.$type === 'xrp'
+        const schemaVal = schema[field as keyof TxFields]
+        const isXrp = typeof value !== 'object' && schemaVal && typeof schemaVal === 'object' && schemaVal.$type === 'xrp'
         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] = {
@@ -217,9 +226,35 @@ export const prepareState = (value: string, txState: TransactionState) => {
     });
 
     tx.txFields = rest;
-    tx.editorSavedValue = null;
 
     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 }
+
+export const transactionsOptions = transactionsData.map(tx => ({
+    value: tx.TransactionType,
+    label: tx.TransactionType,
+}));
+
+export const defaultTransactionType = transactionsOptions.find(tt => tt.value === 'Payment')

stitches.config.ts

@@ -53,6 +53,7 @@ export const {
       accent: "#9D2DFF",
       background: "$gray1",
       backgroundAlt: "$gray4",
+      backgroundOverlay: "$mauve2",
       text: "$gray12",
       textMuted: "$gray10",
       primary: "$plum",
@@ -365,6 +366,7 @@ export const darkTheme = createTheme("dark", {
     ...greenDark,
     ...redDark,
     deep: "rgb(10, 10, 10)",
+    backgroundOverlay: "$mauve5"
     // backgroundA: transparentize(0.1, grayDark.gray1),
   },
 });

styles/keyframes.ts

@@ -0,0 +1,21 @@
+import { keyframes } from '../stitches.config';
+
+export const slideUpAndFade = keyframes({
+    "0%": { opacity: 0, transform: "translateY(2px)" },
+    "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+export const slideRightAndFade = keyframes({
+    "0%": { opacity: 0, transform: "translateX(-2px)" },
+    "100%": { opacity: 1, transform: "translateX(0)" },
+});
+
+export const slideDownAndFade = keyframes({
+    "0%": { opacity: 0, transform: "translateY(-2px)" },
+    "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+export const slideLeftAndFade = keyframes({
+    "0%": { opacity: 0, transform: "translateX(2px)" },
+    "100%": { opacity: 1, transform: "translateX(0)" },
+});

utils/comment-parser.ts

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

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

utils/helpers.ts

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

utils/hookOnCalculator.ts

@@ -18,13 +18,18 @@ export const tts = {
   ttDEPOSIT_PREAUTH: 19,
   ttTRUST_SET: 20,
   ttACCOUNT_DELETE: 21,
-  ttHOOK_SET: 22
+  ttHOOK_SET: 22,
+  ttNFTOKEN_MINT: 25,
+  ttNFTOKEN_BURN: 26,
+  ttNFTOKEN_CREATE_OFFER: 27,
+  ttNFTOKEN_CANCEL_OFFER: 28,
+  ttNFTOKEN_ACCEPT_OFFER: 29
 };
 
 export type TTS = typeof tts;
 
 const calculateHookOn = (arr: (keyof TTS)[]) => {
-  let start = '0x00000000003ff5bf';
+  let start = '0x000000003e3ff5bf';
   arr.forEach(n => {
     let v = BigInt(start);
     v ^= (BigInt(1) << BigInt(tts[n as keyof TTS]));

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

utils/setHook.ts

@@ -0,0 +1,78 @@
+import { getTags } from './comment-parser';
+import { tts, TTS } from './hookOnCalculator';
+
+export const transactionOptions = Object.keys(tts).map(key => ({
+    label: key,
+    value: key as keyof TTS,
+}));
+
+export type SetHookData = {
+    Invoke: {
+        value: keyof TTS;
+        label: string;
+    }[];
+    Fee: string;
+    HookNamespace: string;
+    HookParameters: {
+        HookParameter: {
+            HookParameterName: string;
+            HookParameterValue: string;
+        };
+        $metaData?: any;
+    }[];
+    // HookGrants: {
+    //   HookGrant: {
+    //     Authorize: string;
+    //     HookHash: string;
+    //   };
+    // }[];
+};
+
+
+export const getParameters = (content?: string) => {
+    const fieldTags = ["field", "param", "arg", "argument"];
+    const tags = getTags(content)
+        .filter(tag => fieldTags.includes(tag.tag))
+        .filter(tag => !!tag.name);
+
+    const paramters: SetHookData["HookParameters"] = tags.map(tag => ({
+        HookParameter: {
+            HookParameterName: tag.name,
+            HookParameterValue: tag.default || "",
+        },
+        $metaData: {
+            description: tag.description,
+            required: !tag.optional
+        },
+    }));
+
+    return paramters;
+};
+
+export const getInvokeOptions = (content?: string) => {
+    const invokeTags = ["invoke", "invoke-on"];
+
+    const options = getTags(content)
+        .filter(tag => invokeTags.includes(tag.tag))
+        .reduce((cumm, curr) => {
+            const combined = curr.type || `${curr.name} ${curr.description}`
+            const opts = combined.split(' ')
+
+            return cumm.concat(opts as any)
+        }, [] as (keyof TTS)[])
+        .filter(opt => Object.keys(tts).includes(opt))
+
+
+    const invokeOptions: SetHookData['Invoke'] = options.map(opt => ({
+        label: opt,
+        value: opt
+    }))
+
+    // default
+    if (!invokeOptions.length) {
+        const payment = transactionOptions.find(tx => tx.value === "ttPAYMENT")
+        if (payment) return [payment]
+    }
+
+    return invokeOptions;
+};

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

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)

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).

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)

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":
@@ -594,6 +594,18 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-context-menu@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-0.1.6.tgz#0c75f2faffec6c8697247a4b685a432b3c4d07f0"
+  integrity sha512-0qa6ABaeqD+WYI+8iT0jH0QLLcV8Kv0xI+mZL4FFnG4ec9H0v+yngb5cfBBfs9e/KM8mDzFFpaeegqsQlLNqyQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-menu" "0.1.6"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-use-callback-ref" "0.1.0"
+
 "@radix-ui/react-context@0.1.1":
   version "0.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-0.1.1.tgz"
@@ -635,9 +647,9 @@
     "@radix-ui/react-use-callback-ref" "0.1.0"
     "@radix-ui/react-use-escape-keydown" "0.1.0"
 
-"@radix-ui/react-dropdown-menu@^0.1.1":
+"@radix-ui/react-dropdown-menu@^0.1.6":
   version "0.1.6"
-  resolved "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-0.1.6.tgz"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-0.1.6.tgz#3203229788cd57e552c9f19dcc7008e2b545919c"
   integrity sha512-RZhtzjWwJ4ZBN7D8ek4Zn+ilHzYuYta9yIxFnbC0pfqMnSi67IQNONo1tuuNqtFh9SRHacPKc65zo+kBBlxtdg==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -917,10 +929,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"
@@ -939,6 +951,13 @@
   resolved "https://registry.npmjs.org/@types/btoa-lite/-/btoa-lite-1.0.0.tgz"
   integrity sha512-wJsiX1tosQ+J5+bY5LrSahHxr2wT+uME5UDwdN1kg4frt40euqA+wzECkmq4t5QbveHiJepfdThgQrPw6KiSlg==
 
+"@types/debug@^4.0.0":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82"
+  integrity sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==
+  dependencies:
+    "@types/ms" "*"
+
 "@types/dinero.js@^1.9.0":
   version "1.9.0"
   resolved "https://registry.npmjs.org/@types/dinero.js/-/dinero.js-1.9.0.tgz"
@@ -949,6 +968,13 @@
   resolved "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz"
   integrity sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==
 
+"@types/hast@^2.0.0":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"
+  integrity sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/json-schema@^7.0.8":
   version "7.0.9"
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz"
@@ -990,6 +1016,23 @@
   resolved "https://registry.npmjs.org/@types/lru-cache/-/lru-cache-5.1.1.tgz"
   integrity sha512-ssE3Vlrys7sdIzs5LOxCzTVMsU7i9oa/IaW92wF32JFb3CVczqOkru2xspuKczHEbG3nvmPY7IFqVmGGHdNbYw==
 
+"@types/mdast@^3.0.0":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
+  integrity sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/mdurl@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
+  integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
+
+"@types/ms@*":
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
+  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+
 "@types/node@*":
   version "17.0.21"
   resolved "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz"
@@ -1020,6 +1063,11 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
+"@types/prop-types@^15.0.0":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
 "@types/react-transition-group@^4.4.0":
   version "4.4.4"
   resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz"
@@ -1050,6 +1098,11 @@
   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/unist@*", "@types/unist@^2.0.0":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
+  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
+
 "@types/ws@^7.2.0":
   version "7.4.7"
   resolved "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz"
@@ -1280,13 +1333,10 @@ babel-plugin-macros@^2.6.1:
     cosmiconfig "^6.0.0"
     resolve "^1.12.0"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
+bail@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
+  integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==
 
 balanced-match@^1.0.0:
   version "1.0.2"
@@ -1483,6 +1533,11 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+character-entities@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+  integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
+
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz"
@@ -1525,6 +1580,16 @@ color-name@~1.1.4:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+comma-separated-tokens@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz#d4c25abb679b7751c880be623c1179780fe1dd98"
+  integrity sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==
+
+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"
@@ -1547,11 +1612,6 @@ core-js-pure@^3.20.2:
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.21.1.tgz"
   integrity sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ==
 
-core-js@^2.4.0:
-  version "2.6.12"
-  resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
@@ -1650,11 +1710,25 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.0.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 decimal.js@^10.2.0:
   version "10.3.1"
   resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz"
   integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
 
+decode-named-character-reference@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
+  integrity sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==
+  dependencies:
+    character-entities "^2.0.0"
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
@@ -1672,11 +1746,21 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
+dequal@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 detect-node-es@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz"
   integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
 
+diff@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40"
+  integrity sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==
+
 dinero.js@^1.9.1:
   version "1.9.1"
   resolved "https://registry.npmjs.org/dinero.js/-/dinero.js-1.9.1.tgz"
@@ -2061,6 +2145,11 @@ ext@^1.1.2:
   dependencies:
     type "^2.5.0"
 
+extend@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
@@ -2332,6 +2421,11 @@ hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hast-util-whitespace@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz#4fc1086467cc1ef5ba20673cb6b03cec3a970f1c"
+  integrity sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@@ -2412,6 +2506,11 @@ inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+inline-style-parser@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
+
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz"
@@ -2456,6 +2555,11 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-buffer@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
 is-callable@^1.1.4, is-callable@^1.2.4:
   version "1.2.4"
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz"
@@ -2536,6 +2640,11 @@ is-number@^7.0.0:
   resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
+is-plain-obj@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
+  integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
+
 is-plain-object@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz"
@@ -2737,6 +2846,11 @@ klaw-sync@^6.0.0:
   dependencies:
     graceful-fs "^4.1.11"
 
+kleur@^4.0.3:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
 language-subtag-registry@~0.3.2:
   version "0.3.21"
   resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz"
@@ -2869,6 +2983,60 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+mdast-util-definitions@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz#2c1d684b28e53f84938bb06317944bee8efa79db"
+  integrity sha512-rQ+Gv7mHttxHOBx2dkF4HWTg+EE+UR78ptQWDylzPKaQuVGdG4HIoY3SrS/pCp80nZ04greFvXbVFHT+uf0JVQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    unist-util-visit "^4.0.0"
+
+mdast-util-from-markdown@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz#84df2924ccc6c995dec1e2368b2b208ad0a76268"
+  integrity sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    mdast-util-to-string "^3.1.0"
+    micromark "^3.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-decode-string "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-stringify-position "^3.0.0"
+    uvu "^0.5.0"
+
+mdast-util-to-hast@^12.1.0:
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-12.2.0.tgz#4dbff7ab2b20b8d12fc8fe98bf804d97e7358cbf"
+  integrity sha512-YDwT5KhGzLgPpSnQhAlK1+WpCW4gsPmNNAxUNMkMTDhxQyPp2eX86WOelnKnLKEvSpfxqJbPbInHFkefXZBhEA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    "@types/mdurl" "^1.0.0"
+    mdast-util-definitions "^5.0.0"
+    mdurl "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    trim-lines "^3.0.0"
+    unist-builder "^3.0.0"
+    unist-util-generated "^2.0.0"
+    unist-util-position "^4.0.0"
+    unist-util-visit "^4.0.0"
+
+mdast-util-to-string@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9"
+  integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
+
+mdurl@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+
 memoize-one@^5.0.0:
   version "5.2.1"
   resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
@@ -2884,6 +3052,201 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+micromark-core-commonmark@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz#edff4c72e5993d93724a3c206970f5a15b0585ad"
+  integrity sha512-K+PkJTxqjFfSNkfAhp4GB+cZPfQd6dxtTXnf+RjZOV7T4EEXnvgzOcnp+eSTmpGk9d1S9sL6/lqrgSNn/s0HZA==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-factory-destination "^1.0.0"
+    micromark-factory-label "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-factory-title "^1.0.0"
+    micromark-factory-whitespace "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-classify-character "^1.0.0"
+    micromark-util-html-tag-name "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
+micromark-factory-destination@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.0.0.tgz#fef1cb59ad4997c496f887b6977aa3034a5a277e"
+  integrity sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-label@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-1.0.2.tgz#6be2551fa8d13542fcbbac478258fb7a20047137"
+  integrity sha512-CTIwxlOnU7dEshXDQ+dsr2n+yxpP0+fn271pu0bwDIS8uqfFcumXpj5mLn3hSC8iw2MUr6Gx8EcKng1dD7i6hg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-factory-space@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-1.0.0.tgz#cebff49968f2b9616c0fcb239e96685cb9497633"
+  integrity sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-title@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-1.0.2.tgz#7e09287c3748ff1693930f176e1c4a328382494f"
+  integrity sha512-zily+Nr4yFqgMGRKLpTVsNl5L4PMu485fGFDOQJQBl2NFpjGte1e86zC0da93wf97jrc4+2G2GQudFMHn3IX+A==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-factory-whitespace@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-1.0.0.tgz#e991e043ad376c1ba52f4e49858ce0794678621c"
+  integrity sha512-Qx7uEyahU1lt1RnsECBiuEbfr9INjQTGa6Err+gF3g0Tx4YEviPbqqGKNv/NrBaE7dVHdn1bVZKM/n5I/Bak7A==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-character@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-1.1.0.tgz#d97c54d5742a0d9611a68ca0cd4124331f264d86"
+  integrity sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-chunked@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-1.0.0.tgz#5b40d83f3d53b84c4c6bce30ed4257e9a4c79d06"
+  integrity sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-classify-character@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-1.0.0.tgz#cbd7b447cb79ee6997dd274a46fc4eb806460a20"
+  integrity sha512-F8oW2KKrQRb3vS5ud5HIqBVkCqQi224Nm55o5wYLzY/9PwHGXC01tr3d7+TqHHz6zrKQ72Okwtvm/xQm6OVNZA==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-combine-extensions@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.0.0.tgz#91418e1e74fb893e3628b8d496085639124ff3d5"
+  integrity sha512-J8H058vFBdo/6+AsjHp2NF7AJ02SZtWaVUjsayNFeAiydTxUwViQPxN0Hf8dp4FmCQi0UUFovFsEyRSUmFH3MA==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-decode-numeric-character-reference@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.0.0.tgz#dcc85f13b5bd93ff8d2868c3dba28039d490b946"
+  integrity sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-decode-string@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-1.0.2.tgz#942252ab7a76dec2dbf089cc32505ee2bc3acf02"
+  integrity sha512-DLT5Ho02qr6QWVNYbRZ3RYOSSWWFuH3tJexd3dgN1odEuPNxCngTCXJum7+ViRAd9BbdxCvMToPOD/IvVhzG6Q==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-encode@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-1.0.1.tgz#2c1c22d3800870ad770ece5686ebca5920353383"
+  integrity sha512-U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==
+
+micromark-util-html-tag-name@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.1.0.tgz#eb227118befd51f48858e879b7a419fc0df20497"
+  integrity sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==
+
+micromark-util-normalize-identifier@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.0.0.tgz#4a3539cb8db954bbec5203952bfe8cedadae7828"
+  integrity sha512-yg+zrL14bBTFrQ7n35CmByWUTFsgst5JhA4gJYoty4Dqzj4Z4Fr/DHekSS5aLfH9bdlfnSvKAWsAgJhIbogyBg==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-resolve-all@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-1.0.0.tgz#a7c363f49a0162e931960c44f3127ab58f031d88"
+  integrity sha512-CB/AGk98u50k42kvgaMM94wzBqozSzDDaonKU7P7jwQIuH2RU0TeBqGYJz2WY1UdihhjweivStrJ2JdkdEmcfw==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-util-sanitize-uri@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.0.0.tgz#27dc875397cd15102274c6c6da5585d34d4f12b2"
+  integrity sha512-cCxvBKlmac4rxCGx6ejlIviRaMKZc0fWm5HdCHEeDWRSkn44l6NdYVRyU+0nT1XC72EQJMZV8IPHF+jTr56lAg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-subtokenize@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-1.0.2.tgz#ff6f1af6ac836f8bfdbf9b02f40431760ad89105"
+  integrity sha512-d90uqCnXp/cy4G881Ub4psE57Sf8YD0pim9QdjCRNjfas2M1u6Lbt+XZK9gnHL2XFhnozZiEdCa9CNfXSfQ6xA==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-util-symbol@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-1.0.1.tgz#b90344db62042ce454f351cf0bebcc0a6da4920e"
+  integrity sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==
+
+micromark-util-types@^1.0.0, micromark-util-types@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-1.0.2.tgz#f4220fdb319205812f99c40f8c87a9be83eded20"
+  integrity sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==
+
+micromark@^3.0.0:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/micromark/-/micromark-3.0.10.tgz#1eac156f0399d42736458a14b0ca2d86190b457c"
+  integrity sha512-ryTDy6UUunOXy2HPjelppgJ2sNfcPz1pLlMdA6Rz9jPzhLikWXv/irpWV/I2jd68Uhmny7hHxAlAhk4+vWggpg==
+  dependencies:
+    "@types/debug" "^4.0.0"
+    debug "^4.0.0"
+    decode-named-character-reference "^1.0.0"
+    micromark-core-commonmark "^1.0.1"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
 micromatch@^4.0.2, micromatch@^4.0.4:
   version "4.0.4"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz"
@@ -2919,6 +3282,11 @@ monaco-editor@^0.33.0:
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.33.0.tgz#842e244f3750a2482f8a29c676b5684e75ff34af"
   integrity sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==
 
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
@@ -2949,10 +3317,10 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-next-auth@^4.0.0-beta.5:
-  version "4.2.1"
-  resolved "https://registry.npmjs.org/next-auth/-/next-auth-4.2.1.tgz"
-  integrity sha512-XDtt7nqevkNf4EJ2zKAKkI+MFsURf11kx11vPwxrBYA1MHeqWwaWbGOUOI2ekNTvfAg4nTEJJUH3LV2cLrH3Tg==
+next-auth@^4.10.3:
+  version "4.10.3"
+  resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-4.10.3.tgz#0a952dd5004fd2ac2ba414c990922cf9b33951a3"
+  integrity sha512-7zc4aXYc/EEln7Pkcsn21V1IevaTZsMLJwapfbnKA4+JY0+jFzWbt5p/ljugesGIrN4VOZhpZIw50EaFZyghJQ==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@panva/hkdf" "^1.0.1"
@@ -2964,6 +3332,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"
@@ -3330,7 +3703,7 @@ progress@^2.0.0:
   resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -3339,6 +3712,11 @@ prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2,
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-information@^6.0.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.1.1.tgz#5ca85510a3019726cb9afed4197b7b8ac5926a22"
+  integrity sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==
+
 proxy-compare@2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.0.3.tgz"
@@ -3417,6 +3795,32 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+react-markdown@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.3.tgz#e8aba0d2f5a1b2124d476ee1fff9448a2f57e4b3"
+  integrity sha512-We36SfqaKoVNpN1QqsZwWSv/OZt5J15LNgTLWynwAN5b265hrQrsjMtlRNwUvS+YyR3yDM8HpTNc4pK9H/Gc0A==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/prop-types" "^15.0.0"
+    "@types/unist" "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    hast-util-whitespace "^2.0.0"
+    prop-types "^15.0.0"
+    property-information "^6.0.0"
+    react-is "^18.0.0"
+    remark-parse "^10.0.0"
+    remark-rehype "^10.0.0"
+    space-separated-tokens "^2.0.0"
+    style-to-object "^0.3.0"
+    unified "^10.0.0"
+    unist-util-visit "^4.0.0"
+    vfile "^5.0.0"
+
 react-new-window@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/react-new-window/-/react-new-window-0.2.1.tgz"
@@ -3535,11 +3939,6 @@ reconnecting-websocket@^4.4.0:
   resolved "https://registry.npmjs.org/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz"
   integrity sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -3568,6 +3967,25 @@ relative-time-format@^1.0.7:
   resolved "https://registry.npmjs.org/relative-time-format/-/relative-time-format-1.0.7.tgz"
   integrity sha512-BoLPaoL5y94ngPI4iJ9mNHqRS8NA+Hjs6oYHL5UYkbnA7/iTlvJiMoQQt8txhHhc+Y3e6yXWhwTAKvsQhnx2yg==
 
+remark-parse@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.1.tgz#6f60ae53edbf0cf38ea223fe643db64d112e0775"
+  integrity sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    unified "^10.0.0"
+
+remark-rehype@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-10.1.0.tgz#32dc99d2034c27ecaf2e0150d22a6dcccd9a6279"
+  integrity sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-hast "^12.1.0"
+    unified "^10.0.0"
+
 require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
@@ -3638,30 +4056,25 @@ 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-binary-codec@^0.2.4:
-  version "0.2.7"
-  resolved "https://registry.npmjs.org/ripple-binary-codec/-/ripple-binary-codec-0.2.7.tgz"
-  integrity sha512-VD+sHgZK76q3kmO765klFHPDCEveS5SUeg/bUNVpNrj7w2alyDNkbF17XNbAjFv+kSYhfsUudQanoaSs2Y6uzw==
+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:
-    babel-runtime "^6.26.0"
-    bn.js "^5.1.1"
-    create-hash "^1.2.0"
-    decimal.js "^10.2.0"
-    inherits "^2.0.4"
-    lodash "^4.17.15"
-    ripple-address-codec "^4.1.0"
+    base-x "3.0.9"
+    create-hash "^1.1.2"
 
-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==
+ripple-binary-codec@=1.4.2, ripple-binary-codec@^0.2.4, ripple-binary-codec@^1.1.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.3"
+    ripple-address-codec "^4.2.4"
 
 ripple-bs58@^4.0.0:
   version "4.0.1"
@@ -3739,6 +4152,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+sade@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+  dependencies:
+    mri "^1.1.0"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
@@ -3858,6 +4278,11 @@ source-map@^0.5.7:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
+space-separated-tokens@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
+  integrity sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==
+
 split.js@^1.6.0:
   version "1.6.5"
   resolved "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz"
@@ -3943,6 +4368,13 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+style-to-object@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
+  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 styled-jsx@5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0.tgz"
@@ -4028,6 +4460,16 @@ tr46@~0.0.3:
   resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
   integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
 
+trim-lines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
+  integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
+
+trough@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-2.1.0.tgz#0f7b511a4fde65a46f18477ab38849b22c554876"
+  integrity sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==
+
 tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0:
   version "3.13.0"
   resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.13.0.tgz"
@@ -4099,6 +4541,67 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
+unified@^10.0.0:
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
+  integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    bail "^2.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^4.0.0"
+    trough "^2.0.0"
+    vfile "^5.0.0"
+
+unist-builder@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-3.0.0.tgz#728baca4767c0e784e1e64bb44b5a5a753021a04"
+  integrity sha512-GFxmfEAa0vi9i5sd0R2kcrI9ks0r82NasRq5QHh2ysGngrc6GiqD5CDf1FjPenY4vApmFASBIIlk/jj5J5YbmQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-generated@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-2.0.0.tgz#86fafb77eb6ce9bfa6b663c3f5ad4f8e56a60113"
+  integrity sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw==
+
+unist-util-is@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.1.1.tgz#e8aece0b102fa9bc097b0fef8f870c496d4a6236"
+  integrity sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==
+
+unist-util-position@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-4.0.3.tgz#5290547b014f6222dff95c48d5c3c13a88fadd07"
+  integrity sha512-p/5EMGIa1qwbXjA+QgcBXaPWjSnZfQ2Sc3yBEEfgPwsEmJd8Qh+DSk3LGnmOM4S1bY2C0AjmMnB8RuEYxpPwXQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-stringify-position@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.2.tgz#5c6aa07c90b1deffd9153be170dce628a869a447"
+  integrity sha512-7A6eiDCs9UtjcwZOcCpM4aPII3bAAGv13E96IkawkOAW0OhH+yRxtY0lzo8KiHpzEMfH7Q+FizUmwp8Iqy5EWg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-visit-parents@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.0.tgz#44bbc5d25f2411e7dfc5cecff12de43296aa8521"
+  integrity sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
+unist-util-visit@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.0.tgz#f41e407a9e94da31594e6b1c9811c51ab0b3d8f5"
+  integrity sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"
+
 universal-github-app-jwt@^1.0.1:
   version "1.1.0"
   resolved "https://registry.npmjs.org/universal-github-app-jwt/-/universal-github-app-jwt-1.1.0.tgz"
@@ -4173,6 +4676,16 @@ uuid@^8.3.2:
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uvu@^0.5.0:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
+  integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==
+  dependencies:
+    dequal "^2.0.0"
+    diff "^5.0.0"
+    kleur "^4.0.3"
+    sade "^1.7.3"
+
 v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz"
@@ -4185,6 +4698,24 @@ valtio@^1.2.5:
   dependencies:
     proxy-compare "2.0.3"
 
+vfile-message@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.2.tgz#a2908f64d9e557315ec9d7ea3a910f658ac05f7d"
+  integrity sha512-QjSNP6Yxzyycd4SVOtmKKyTsSvClqBPJcd00Z0zuPj3hOIjg0rUPG6DbFGPvUKRgYyaIWLPKpuEclcuvb3H8qA==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+
+vfile@^5.0.0:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.4.tgz#bbb8c96b956693bbf70b2c67fdb5781dff769b93"
+  integrity sha512-KI+7cnst03KbEyN1+JE504zF5bJBZa+J+CrevLeyIMq0aPU681I2rQ5p4PlnQ6exFtWiUrg26QUdFMnAKR6PIw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile-message "^3.0.0"
+
 vscode-jsonrpc@6.0.0, vscode-jsonrpc@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz"
@@ -4318,10 +4849,10 @@ ws@^7.2.0:
   resolved "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz"
   integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==
 
-xrpl-accountlib@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/xrpl-accountlib/-/xrpl-accountlib-1.3.2.tgz"
-  integrity sha512-mXwoumGp0xUiZ7Ty/1o4FHVRK4uLnqngxdYmikZs50drMjlgCUP6GXun2Vf4Uus1fnVnxhXIw+E7peH5OjiOJA==
+xrpl-accountlib@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/xrpl-accountlib/-/xrpl-accountlib-1.5.2.tgz#8f16abe449fd60ba9ed75597f6ce3f0c45dfff43"
+  integrity sha512-lieY2/5G9DySqdtgQ0AD/aMMG5Sy/MLAmbIsmsCaF06scM5DpR8s4SsEzgHni7dOG68Wjnb2Uz6tf5aV+l4/Kg==
   dependencies:
     assert "^2.0.0"
     bip32 "^2.0.5"
@@ -4330,13 +4861,13 @@ xrpl-accountlib@^1.3.2:
     elliptic "6.5.4"
     hash.js "^1.1.7"
     ripple-address-codec "^4.1.0"
-    ripple-binary-codec "^1.3.0"
+    ripple-binary-codec "^1.4.2"
     ripple-hashes "^0.3.4"
     ripple-keypairs "^1.0.3"
     ripple-lib "^1.6.4"
     ripple-secret-codec "^1.0.2"
     xrpl-secret-numbers "^0.3.3"
-    xrpl-sign-keypairs "^2.0.1"
+    xrpl-sign-keypairs "^2.1.1"
 
 xrpl-client@^1.9.4:
   version "1.9.4"
@@ -4355,13 +4886,13 @@ xrpl-secret-numbers@^0.3.3:
     brorand "^1.1.0"
     ripple-keypairs "^1.0.3"
 
-xrpl-sign-keypairs@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/xrpl-sign-keypairs/-/xrpl-sign-keypairs-2.0.1.tgz"
-  integrity sha512-84QbE3trxetaw0hqDADCWMx0HH1VAWnTJp0TGoKTGRf1jzTqjI7eNNNw5lmcay2MH8bW/waNzJIF8vSAJSkVrQ==
+xrpl-sign-keypairs@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/xrpl-sign-keypairs/-/xrpl-sign-keypairs-2.1.1.tgz#2f7f2855799c5d4ba091007963825eef1db21a4e"
+  integrity sha512-rKQmUCx+x7gjjJ5zv/Z7bOYR+8I36JwUCFlpuD9UzYD4w2msGQDG0rmxVENyZSfThDBVQ1kEArVn6SMDMe9LUQ==
   dependencies:
     big-integer latest
-    ripple-binary-codec "^1.3.0"
+    ripple-binary-codec "^1.4.2"
     ripple-bs58check latest
     ripple-hashes latest
     ripple-keypairs latest