Fix problem with accounts

Feat/hooks v2 preparations

.env.example

@@ -2,4 +2,8 @@ NEXTAUTH_URL=https://example.com
 GITHUB_SECRET=""
 GITHUB_ID=""
 NEXT_PUBLIC_COMPILE_API_ENDPOINT="http://localhost:9000/api/build"
-NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT="ws://localhost:9000/language-server/c"
+NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT="ws://localhost:9000/language-server/c"
+NEXT_PUBLIC_TESTNET_URL="hooks-testnet-v2.xrpl-labs.com"
+NEXT_PUBLIC_DEBUG_STREAM_URL="hooks-testnet-v2-debugstream.xrpl-labs.com"
+NEXT_PUBLIC_EXPLORER_URL="hooks-testnet-v2-explorer.xrpl-labs.com"
+NEXT_PUBLIC_SITE_URL=http://localhost:3000

.prettierignore

@@ -0,0 +1 @@
+*.md

README.md

@@ -26,6 +26,78 @@ You can start editing the page by modifying `pages/index.tsx`. The page auto-upd
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
+## Github Login
+
+If you want to use your Github app to provide login, here's the guide to do that.
+
+- First go to https://github.com/settings/profile -> Developer Settings -> OAuth Apps
+- Click "New OAuth App" button
+- Give application some name eg. Xrpl Hooks Development
+- Give some homepage url eg. localhost:3000
+- Give some optional description (these values will show up on the popup when you login)
+- Authorization callback URL should be http://localhost:3000/api/auth/callback (if you're creating the app for local development)
+- Click register application
+- Then a page should open up where you can get client id and client secret values. Copy paste those to .env.local to use them:
+
+```
+GITHUB_SECRET="client-secret-here"
+GITHUB_ID="client-id-here"
+```
+
+Login should now work through your own Github OAuth app.
+
+## Styling and Theming
+
+This project uses Stitches (https://stitches.dev) for theming and styling the components. You should be quite familiar with the API if you have used for example styled-components earlier. Stitches should provide better performance, near zero runtime.
+
+For components we try to use Radix-UI (https://www.radix-ui.com/) as much as possible. It may not provide all the necessary components so you're free to use other components/libraries if those makes sense. For colors we're using Radix-UI Colors (https://radix-ui.com/colors).
+
+Theme file can be found under `./stitches.config.ts` file. When you're creating new components remeber to import `styled` from that file and not `@stitches` directly. That way it will provide the correct theme for you automatically.
+
+Example:
+
+```tsx
+// Use our stitches.config instead of @stitches/react
+import { styled } from "../stitches.config";
+
+const Box = styled("div", {
+  boxSizing: "border-box",
+});
+
+export default Box;
+```
+
+Custom components can be found from `./components` folder.
+
+## Monaco Editor
+
+Project is relying on Monaco editor heavily. Instead of using Monaco editor directly we're using `@monaco-editor/react` which provides little helpers to use Monaco editor.
+
+On the Develop page we're using following loader for Monaco editor:
+
+```js
+loader.config({
+  paths: {
+    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
+  },
+});
+```
+
+By default `@monaco-editor/react` was using 0.29.? version of Monaco editor. @codingame/monaco-languageclient library (connects to clangd language server) was using API methods that were introduced in Monaco Editor 0.30 so that's why we're loading certain version of it.
+
+Monaco Languageclient related stuff is found from `./utils/languageClient.ts`. Basically we're connecting the editor to clangd language server which lives on separate backend. That project can be found from https://github.com/eqlabs/xrpl-hooks-compiler/. If you need access to that project ask permissions from @vbar (Vaclav Barta) on GitHub.
+
+### Language server hover messages
+If you want to extend hover messages provided by language-server you can add extra docs to `xrpl-hooks-docs/md/` folder. Just make sure the filename is matching with the error code that comes from language server. So lets say you want to add extra documentation for `hooks-func-addr-taken` check create new file called `hooks-func-addr-taken.md` and then remember to import and export it on `docs.ts` file with same logic as the other files.
+
+## Global state management
+
+Global state management is handled with library called Valtio (https://github.com/pmndrs/valtio). Initial state can be found from `./state/index.ts` file. All the actions which updates the state is found under `./state/actions/` folder.
+
+## Special notes
+
+Since we are dealing with greenfield tech and one of the dependencies (ripple-binary-codec) doesn't yet support signing `SetHook` transactions we had to monkey patch the library with patch-package (https://www.npmjs.com/package/patch-package). We modified the definitions.json file of the ripple-binary-codec library and then ran `yarn patch-package ripple-binary-codec` which created `patches/ripple-binary-codec+1.2.0.patch` file to this project. This file contains the modifications to `ripple-binary-codec` library. package.json contains postinstall hook which runs patch-package, and it will add the patch on the file mentioned earlier. This happens automatically after running patch package.
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
@@ -34,9 +106,3 @@ 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!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/Accounts.tsx

@@ -1,18 +1,14 @@
 import toast from "react-hot-toast";
 import { useSnapshot } from "valtio";
-import { ArrowSquareOut, Copy, Wallet, X } from "phosphor-react";
+import { ArrowSquareOut, Copy, Trash, Wallet, X } from "phosphor-react";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, FC } from "react";
 import Dinero from "dinero.js";
 
 import Button from "./Button";
-import { addFaucetAccount, deployHook, importAccount } from "../state/actions";
+import { addFaucetAccount, importAccount } from "../state/actions";
 import state from "../state";
 import Box from "./Box";
-import Container from "./Container";
+import { Container, Heading, Stack, Text, Flex } from ".";
-import Heading from "./Heading";
-import Stack from "./Stack";
-import Text from "./Text";
-import Flex from "./Flex";
 import {
   Dialog,
   DialogContent,
@@ -23,6 +19,7 @@ import {
 } from "./Dialog";
 import { css } from "../stitches.config";
 import { Input } from "./Input";
+import truncate from "../utils/truncate";
 
 const labelStyle = css({
   color: "$mauve10",
@@ -30,8 +27,12 @@ const labelStyle = css({
   fontSize: "10px",
   mb: "$0.5",
 });
+import transactionsData from "../content/transactions.json";
+import { SetHookDialog } from "./SetHookDialog";
+import { addFunds } from "../state/actions/addFaucetAccount";
+import { deleteHook } from "../state/actions/deployHook";
 
-const AccountDialog = ({
+export const AccountDialog = ({
   activeAccountAddress,
   setActiveAccountAddress,
 }: {
@@ -90,6 +91,22 @@ const AccountDialog = ({
           }}
         >
           <Wallet size="15px" /> {activeAccount?.name}
+          <DialogClose asChild>
+            <Button
+              size="xs"
+              outline
+              css={{ ml: "auto", mr: "$9" }}
+              tabIndex={-1}
+              onClick={() => {
+                const index = state.accounts.findIndex(
+                  (acc) => acc.address === activeAccount?.address
+                );
+                state.accounts.splice(index, 1);
+              }}
+            >
+              Delete Account <Trash size="15px" />
+            </Button>
+          </DialogClose>
         </DialogTitle>
         <DialogDescription as="div" css={{ fontFamily: "$monospace" }}>
           <Stack css={{ display: "flex", flexDirection: "column", gap: "$3" }}>
@@ -167,6 +184,8 @@ const AccountDialog = ({
                 <Text
                   css={{
                     fontFamily: "$monospace",
+                    display: "flex",
+                    alignItems: "center",
                   }}
                 >
                   {Dinero({
@@ -179,18 +198,33 @@ const AccountDialog = ({
                       currency: "XRP",
                       currencyDisplay: "name",
                     })}
+                  <Button
+                    css={{
+                      fontFamily: "$monospace",
+                      lineHeight: 2,
+                      mt: "2px",
+                      ml: "$3",
+                    }}
+                    ghost
+                    size="xs"
+                    onClick={() => {
+                      addFunds(activeAccount?.address || "");
+                    }}
+                  >
+                    Add Funds
+                  </Button>
                 </Text>
               </Flex>
               <Flex css={{ marginLeft: "auto" }}>
                 <a
-                  href={`https://hooks-testnet-explorer.xrpl-labs.com/${activeAccount?.address}`}
+                  href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${activeAccount?.address}`}
                   target="_blank"
                   rel="noreferrer noopener"
                 >
                   <Button
                     size="sm"
                     ghost
-                    css={{ color: "$green11 !important", mt: "$3" }}
+                    css={{ color: "$grass11 !important", mt: "$3" }}
                   >
                     <ArrowSquareOut size="15px" />
                   </Button>
@@ -205,17 +239,25 @@ const AccountDialog = ({
                     fontFamily: "$monospace",
                   }}
                 >
-                  {activeAccount && activeAccount?.hooks?.length > 0
+                  {activeAccount && activeAccount.hooks.length > 0
-                    ? activeAccount?.hooks
+                    ? activeAccount.hooks.map((i) => truncate(i, 12)).join(",")
-                        .map((i) => {
-                          return `${i?.substring(0, 6)}...${i?.substring(
-                            i.length - 4
-                          )}`;
-                        })
-                        .join(", ")
                     : "–"}
                 </Text>
               </Flex>
+              {activeAccount && activeAccount?.hooks?.length > 0 && (
+                <Flex css={{ marginLeft: "auto" }}>
+                  <Button
+                    size="xs"
+                    outline
+                    css={{ mt: "$3", mr: "$1", ml: "auto" }}
+                    onClick={() => {
+                      deleteHook(activeAccount);
+                    }}
+                  >
+                    Delete Hook <Trash size="15px" />
+                  </Button>
+                </Flex>
+              )}
             </Flex>
           </Stack>
         </DialogDescription>
@@ -229,7 +271,13 @@ const AccountDialog = ({
   );
 };
 
-const Accounts = () => {
+interface AccountProps {
+  card?: boolean;
+  hideDeployBtn?: boolean;
+  showHookStats?: boolean;
+}
+
+const Accounts: FC<AccountProps> = (props) => {
   const snap = useSnapshot(state);
   const [activeAccountAddress, setActiveAccountAddress] = useState<
     string | null
@@ -239,7 +287,7 @@ const Accounts = () => {
       if (snap.clientStatus === "online") {
         const requests = snap.accounts.map((acc) =>
           snap.client?.send({
-            id: acc.address,
+            id: `hooks-builder-req-info-${acc.address}`,
             command: "account_info",
             account: acc.address,
           })
@@ -259,7 +307,7 @@ const Accounts = () => {
         });
         const objectRequests = snap.accounts.map((acc) => {
           return snap.client?.send({
-            id: `${acc.address}-hooks`,
+            id: `hooks-builder-req-objects-${acc.address}`,
             command: "account_objects",
             account: acc.address,
           });
@@ -271,9 +319,10 @@ const Accounts = () => {
             (acc) => acc.address === address
           );
           if (accountToUpdate) {
-            accountToUpdate.hooks = res.account_objects
+            accountToUpdate.hooks =
-              .filter((ac: any) => ac?.LedgerEntryType === "Hook")
+              res.account_objects
-              .map((oo: any) => oo.HookHash);
+                .find((ac: any) => ac?.LedgerEntryType === "Hook")
+                ?.Hooks?.map((oo: any) => oo.Hook.HookHash) || [];
           }
         });
       }
@@ -282,7 +331,7 @@ const Accounts = () => {
     let fetchAccountInfoInterval: NodeJS.Timer;
     if (snap.clientStatus === "online") {
       fetchAccInfo();
-      fetchAccountInfoInterval = setInterval(() => fetchAccInfo(), 2000);
+      fetchAccountInfoInterval = setInterval(() => fetchAccInfo(), 10000);
     }
 
     return () => {
@@ -299,16 +348,21 @@ const Accounts = () => {
       as="div"
       css={{
         display: "flex",
-        borderTop: "1px solid $mauve6",
+        backgroundColor: props.card ? "$deep" : "$mauve1",
-        background: "$mauve1",
         position: "relative",
-        width: "50%",
+        flex: "1",
-        flexShrink: 0,
+        height: "100%",
-        borderRight: "1px solid $mauve6",
+        border: "1px solid $mauve6",
+        borderRadius: props.card ? "$md" : undefined,
       }}
     >
-      <Container css={{ px: 0, flexShrink: 1 }}>
+      <Container css={{ p: 0, flexShrink: 1, height: "100%" }}>
-        <Flex css={{ py: "$3" }}>
+        <Flex
+          css={{
+            py: "$3",
+            borderBottom: props.card ? "1px solid $mauve6" : undefined,
+          }}
+        >
           <Heading
             as="h3"
             css={{
@@ -326,79 +380,90 @@ const Accounts = () => {
             <Wallet size="15px" /> <Text css={{ lineHeight: 1 }}>Accounts</Text>
           </Heading>
           <Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
-            <Button ghost size="xs" onClick={() => addFaucetAccount(true)}>
+            <Button ghost size="sm" onClick={() => addFaucetAccount(true)}>
               Create
             </Button>
             <ImportAccountDialog />
           </Flex>
         </Flex>
-        <Box
+        <Stack
-          as="div"
           css={{
-            display: "flex",
             flexDirection: "column",
             width: "100%",
-            height: "160px",
             fontSize: "13px",
-            fontWeight: "$body",
-            fontFamily: "$monospace",
-            overflowY: "auto",
             wordWrap: "break-word",
+            fontWeight: "$body",
+            gap: 0,
+            height: "calc(100% - 52px)",
+            flexWrap: "nowrap",
+            overflowY: "auto",
           }}
         >
-          <Stack css={{ flexDirection: "column", gap: 0 }}>
+          {snap.accounts.map((account) => (
-            {snap.accounts.map((account) => (
+            <Flex
-              <Flex
+              column
-                key={account.address + account.name}
+              key={account.address + account.name}
-                onClick={() => setActiveAccountAddress(account.address)}
+              onClick={() => setActiveAccountAddress(account.address)}
-                css={{
+              css={{
-                  gap: "$3",
+                px: "$3",
-                  p: "$2 $3",
+                py: props.card ? "$3" : "$2",
-                  justifyContent: "center",
+                cursor: "pointer",
-                  cursor: "pointer",
+                borderBottom: props.card ? "1px solid $mauve6" : undefined,
-                  "@hover": {
+                "@hover": {
-                    "&:hover": {
+                  "&:hover": {
-                      background: "$mauve3",
+                    background: "$backgroundAlt",
-                    },
                   },
+                },
+              }}
+            >
+              <Flex
+                row
+                css={{
+                  justifyContent: "space-between",
                 }}
               >
-                <Text>{account.name} </Text>
+                <Box>
-                <Text css={{ color: "$mauve9" }}>
+                  <Text>{account.name} </Text>
-                  {account.address} (
+                  <Text
-                  {Dinero({
+                    css={{
-                    amount: Number(account?.xrp || "0"),
+                      color: "$textMuted",
-                    precision: 6,
+                      wordBreak: "break-word",
-                  })
+                    }}
-                    .toUnit()
+                  >
-                    .toLocaleString(undefined, {
+                    {account.address} (
-                      style: "currency",
+                    {Dinero({
-                      currency: "XRP",
+                      amount: Number(account?.xrp || "0"),
-                      currencyDisplay: "name",
+                      precision: 6,
-                    })}
+                    })
-                  )
+                      .toUnit()
-                </Text>
+                      .toLocaleString(undefined, {
-                <Button
+                        style: "currency",
-                  css={{ ml: "auto" }}
+                        currency: "XRP",
-                  size="xs"
+                        currencyDisplay: "name",
-                  uppercase
+                      })}
-                  isLoading={account.isLoading}
+                    )
-                  disabled={
+                  </Text>
-                    account.isLoading ||
+                </Box>
-                    !snap.files.filter((file) => file.compiledWatContent).length
+                {!props.hideDeployBtn && (
-                  }
+                  <div
-                  variant="secondary"
+                    className="hook-deploy-button"
-                  onClick={(e) => {
+                    onClick={(e) => {
-                    e.stopPropagation();
+                      e.stopPropagation();
-                    deployHook(account);
+                    }}
-                  }}
+                  >
-                >
+                    <SetHookDialog account={account} />
-                  Deploy
+                  </div>
-                </Button>
+                )}
               </Flex>
-            ))}
+              {props.showHookStats && (
-          </Stack>
+                <Text muted small css={{ mt: "$2" }}>
-        </Box>
+                  {account.hooks.length} hook
+                  {account.hooks.length === 1 ? "" : "s"} installed
+                </Text>
+              )}
+            </Flex>
+          ))}
+        </Stack>
       </Container>
       <AccountDialog
         activeAccountAddress={activeAccountAddress}
@@ -408,12 +473,17 @@ const Accounts = () => {
   );
 };
 
+export const transactionsOptions = transactionsData.map((tx) => ({
+  value: tx.TransactionType,
+  label: tx.TransactionType,
+}));
+
 const ImportAccountDialog = () => {
   const [value, setValue] = useState("");
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button ghost size="xs">
+        <Button ghost size="sm">
           Import
         </Button>
       </DialogTrigger>

components/Button.tsx

@@ -66,6 +66,12 @@ export const StyledButton = styled("button", {
       },
     },
     variant: {
+      link: {
+        textDecoration: "underline",
+        fontSize: "inherit",
+        color: "$textMuted",
+        textUnderlineOffset: "2px",
+      },
       default: {
         backgroundColor: "$mauve12",
         boxShadow: "inset 0 0 0 1px $colors$mauve12",
@@ -91,26 +97,26 @@ export const StyledButton = styled("button", {
           },
       },
       primary: {
-        backgroundColor: `$pink9`,
+        backgroundColor: `$accent`,
-        boxShadow: "inset 0 0 0 1px $colors$pink9",
+        boxShadow: "inset 0 0 0 1px $colors$purple9",
         color: "$white",
         "@hover": {
           "&:hover": {
-            backgroundColor: "$pink10",
+            backgroundColor: "$purple10",
-            boxShadow: "inset 0 0 0 1px $colors$pink11",
+            boxShadow: "inset 0 0 0 1px $colors$purple11",
           },
         },
         "&:active": {
-          backgroundColor: "$pink8",
+          backgroundColor: "$purple8",
-          boxShadow: "inset 0 0 0 1px $colors$pink8",
+          boxShadow: "inset 0 0 0 1px $colors$purple8",
         },
         "&:focus": {
-          boxShadow: "inset 0 0 0 2px $colors$pink12",
+          boxShadow: "inset 0 0 0 2px $colors$purple12",
         },
         '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
           {
             backgroundColor: "$mauve4",
-            boxShadow: "inset 0 0 0 1px $colors$pink8",
+            boxShadow: "inset 0 0 0 1px $colors$purple8",
           },
       },
       secondary: {
@@ -136,8 +142,35 @@ export const StyledButton = styled("button", {
             boxShadow: "inset 0 0 0 1px $colors$purple8",
           },
       },
+      destroy: {
+        backgroundColor: `$red9`,
+        boxShadow: "inset 0 0 0 1px $colors$red9",
+        color: "$white",
+        "@hover": {
+          "&:hover": {
+            backgroundColor: "$red10",
+            boxShadow: "inset 0 0 0 1px $colors$red11",
+          },
+        },
+        "&:active": {
+          backgroundColor: "$red8",
+          boxShadow: "inset 0 0 0 1px $colors$red8",
+        },
+        "&:focus": {
+          boxShadow: "inset 0 0 0 2px $colors$red12",
+        },
+        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
+          {
+            backgroundColor: "$mauve4",
+            boxShadow: "inset 0 0 0 1px $colors$red8",
+          },
+      },
+    },
+    muted: {
+      true: {
+        color: "$textMuted",
+      },
     },
-
     outline: {
       true: {
         backgroundColor: "transparent",

components/DebugStream.tsx

@@ -0,0 +1,147 @@
+import { useCallback, useEffect } from "react";
+import { proxy, ref, useSnapshot } from "valtio";
+import { Select } from ".";
+import state, { ILog } from "../state";
+import { extractJSON } from "../utils/json";
+import LogBox from "./LogBox";
+
+interface ISelect<T = string> {
+  label: string;
+  value: T;
+}
+
+const streamState = proxy({
+  selectedAccount: null as ISelect | null,
+  logs: [] as ILog[],
+  socket: undefined as WebSocket | undefined,
+});
+
+const DebugStream = () => {
+  const { selectedAccount, logs, socket } = useSnapshot(streamState);
+  const { accounts } = useSnapshot(state);
+
+  const accountOptions = accounts.map((acc) => ({
+    label: acc.name,
+    value: acc.address,
+  }));
+
+  const renderNav = () => (
+    <>
+      <Select
+        instanceId="DSAccount"
+        placeholder="Select account"
+        options={accountOptions}
+        hideSelectedOptions
+        value={selectedAccount}
+        onChange={(acc) => (streamState.selectedAccount = acc as any)}
+        css={{ width: "100%" }}
+      />
+    </>
+  );
+
+  const prepareLog = useCallback((str: any): ILog => {
+    if (typeof str !== "string") throw Error("Unrecognized debug log stream!");
+
+    const match = str.match(/([\s\S]+(?:UTC|ISO|GMT[+|-]\d+))\ ?([\s\S]*)/m);
+    const [_, tm, msg] = match || [];
+
+    const extracted = extractJSON(msg);
+    const timestamp = isNaN(Date.parse(tm || ""))
+      ? tm
+      : new Date(tm).toLocaleTimeString();
+
+    const message = !extracted
+      ? msg
+      : msg.slice(0, extracted.start) + msg.slice(extracted.end + 1);
+
+    const jsonData = extracted
+      ? JSON.stringify(extracted.result, null, 2)
+      : undefined;
+    return {
+      type: "log",
+      message,
+      timestamp,
+      jsonData,
+      defaultCollapsed: true,
+    };
+  }, []);
+
+  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]);
+
+  useEffect(() => {
+    const account = selectedAccount?.value;
+    const socket = streamState.socket;
+    if (!socket) return;
+
+    const onOpen = () => {
+      streamState.logs = [];
+      streamState.logs.push({
+        type: "success",
+        message: `Debug stream opened for account ${account}`,
+      });
+    };
+    const onError = () => {
+      streamState.logs.push({
+        type: "error",
+        message: "Something went wrong! Check your connection and try again.",
+      });
+    };
+    const onClose = (e: CloseEvent) => {
+      streamState.logs.push({
+        type: "error",
+        message: `Connection was closed. [code: ${e.code}]`,
+      });
+      streamState.selectedAccount = null;
+    };
+    const onMessage = (event: any) => {
+      if (!event.data) return;
+      const log = prepareLog(event.data);
+      // Filter out account_info and account_objects requests
+      try {
+        const parsed = JSON.parse(log.jsonData);
+        if (parsed?.id?._Request?.includes("hooks-builder-req")) {
+          return;
+        }
+      } catch (err) {
+        // Lets just skip if we cannot parse the message
+      }
+      return streamState.logs.push(log);
+    };
+
+    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);
+    };
+  }, [prepareLog, selectedAccount?.value, socket]);
+  return (
+    <LogBox
+      enhanced
+      renderNav={renderNav}
+      title="Debug stream"
+      logs={logs}
+      clearLog={() => (streamState.logs = [])}
+    />
+  );
+};
+
+export default DebugStream;

components/DeployEditor.tsx

@@ -1,20 +1,22 @@
-import React, { useRef } from "react";
+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 { useTheme } from "next-themes";
 import { useRouter } from "next/router";
 import NextLink from "next/link";
+import ReactTimeAgo from "react-time-ago";
+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 Text from "./Text";
+import { Button, Text, Link, Flex } from ".";
-import Link from "./Link";
 
 loader.config({
   paths: {
@@ -22,11 +24,72 @@ loader.config({
   },
 });
 
+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 compiledSize = activeFile?.compiledContent?.byteLength || 0;
+  const color =
+    compiledSize > FILESIZE_BREAKPOINTS[1]
+      ? "$error"
+      : compiledSize > FILESIZE_BREAKPOINTS[0]
+      ? "$warning"
+      : "$success";
+
+  const CompiledStatView = activeFile && (
+    <Flex
+      column
+      align="center"
+      css={{
+        fontSize: "$sm",
+        fontFamily: "$monospace",
+        textAlign: "center",
+      }}
+    >
+      <Flex row align="center">
+        <Text css={{ mr: "$1" }}>
+          Compiled {activeFile.name.split(".")[0] + ".wasm"}
+        </Text>
+        {activeFile?.lastCompiled && (
+          <ReactTimeAgo date={activeFile.lastCompiled} locale="en-US" />
+        )}
+        {activeFile.compiledContent?.byteLength && (
+          <Text css={{ ml: "$2", color }}>
+            ({filesize(activeFile.compiledContent.byteLength)})
+          </Text>
+        )}
+      </Flex>
+      <Button variant="link" onClick={() => setShowContent(true)}>
+        View as WAT-file
+      </Button>
+    </Flex>
+  );
+  const NoContentView = !snap.loading && router.isReady && (
+    <Text
+      css={{
+        mt: "-60px",
+        fontSize: "$sm",
+        fontFamily: "$monospace",
+        maxWidth: "300px",
+        textAlign: "center",
+      }}
+    >
+      {`You haven't compiled any files yet, compile files on `}
+      <NextLink shallow href={`/develop/${router.query.slug}`} passHref>
+        <Link as="a">develop view</Link>
+      </NextLink>
+    </Text>
+  );
+  const isContent =
+    snap.files?.filter((file) => file.compiledWatContent).length > 0 &&
+    router.isReady;
   return (
     <Box
       css={{
@@ -34,65 +97,53 @@ const DeployEditor = () => {
         display: "flex",
         position: "relative",
         flexDirection: "column",
-        backgroundColor: "$mauve3",
+        backgroundColor: "$mauve2",
         width: "100%",
       }}
     >
       <EditorNavigation showWat />
-      {snap.files?.filter((file) => file.compiledWatContent).length > 0 &&
+      <Container
-      router.isReady ? (
+        css={{
-        <Editor
+          display: "flex",
-          className="hooks-editor"
+          flex: 1,
-          // keepCurrentModel
+          justifyContent: "center",
-          defaultLanguage={snap.files?.[snap.active]?.language}
+          alignItems: "center",
-          language={snap.files?.[snap.active]?.language}
+        }}
-          path={`file://tmp/c/${snap.files?.[snap.active]?.name}.wat`}
+      >
-          value={snap.files?.[snap.active]?.compiledWatContent || ""}
+        {!isContent ? (
-          beforeMount={(monaco) => {
+          NoContentView
-            if (!state.editorCtx) {
+        ) : !showContent ? (
-              state.editorCtx = ref(monaco.editor);
+          CompiledStatView
-              // @ts-expect-error
+        ) : (
-              monaco.editor.defineTheme("dark", dark);
+          <Editor
-              // @ts-expect-error
+            className="hooks-editor"
-              monaco.editor.defineTheme("light", light);
+            defaultLanguage={"wat"}
-            }
+            language={"wat"}
-          }}
+            path={`file://tmp/c/${snap.files?.[snap.active]?.name}.wat`}
-          onMount={(editor, monaco) => {
+            value={snap.files?.[snap.active]?.compiledWatContent || ""}
-            editorRef.current = editor;
+            beforeMount={(monaco) => {
-            editor.updateOptions({
+              monaco.languages.register({ id: "wat" });
-              glyphMargin: true,
+              monaco.languages.setLanguageConfiguration("wat", wat.config);
-              readOnly: true,
+              monaco.languages.setMonarchTokensProvider("wat", wat.tokens);
-            });
+              if (!state.editorCtx) {
-          }}
+                state.editorCtx = ref(monaco.editor);
-          theme={theme === "dark" ? "dark" : "light"}
+                // @ts-expect-error
-        />
+                monaco.editor.defineTheme("dark", dark);
-      ) : (
+                // @ts-expect-error
-        <Container
+                monaco.editor.defineTheme("light", light);
-          css={{
+              }
-            display: "flex",
+            }}
-            flex: 1,
+            onMount={(editor, monaco) => {
-            justifyContent: "center",
+              editorRef.current = editor;
-            alignItems: "center",
+              editor.updateOptions({
-          }}
+                glyphMargin: true,
-        >
+                readOnly: true,
-          {!snap.loading && router.isReady && (
+              });
-            <Text
+            }}
-              css={{
+            theme={theme === "dark" ? "dark" : "light"}
-                mt: "-60px",
+          />
-                fontSize: "14px",
+        )}
-                fontFamily: "$monospace",
+      </Container>
-                maxWidth: "300px",
-                textAlign: "center",
-              }}
-            >
-              {`You haven't compiled any files yet, compile files on `}
-              <NextLink shallow href={`/develop/${router.query.slug}`} passHref>
-                <Link as="a">develop view</Link>
-              </NextLink>
-            </Text>
-          )}
-        </Container>
-      )}
     </Box>
   );
 };

components/Dialog.tsx

@@ -6,21 +6,28 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { styled } from "../stitches.config";
 
 const overlayShow = keyframes({
-  "0%": { opacity: 0 },
+  "0%": { opacity: 0.01 },
   "100%": { opacity: 1 },
 });
 
 const contentShow = keyframes({
-  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+  "0%": { opacity: 0.01 },
-  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+  "100%": { opacity: 1 },
 });
 const StyledOverlay = styled(DialogPrimitive.Overlay, {
-  zIndex: 1000,
+  zIndex: 9999,
   backgroundColor: blackA.blackA9,
   position: "fixed",
   inset: 0,
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "grid",
+  placeItems: "center",
+  overflowY: "auto",
   "@media (prefers-reduced-motion: no-preference)": {
-    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+    animation: `${overlayShow} 250ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
   ".dark &": {
     backgroundColor: blackA.blackA11,
@@ -32,15 +39,12 @@ const StyledContent = styled(DialogPrimitive.Content, {
   backgroundColor: "$mauve2",
   color: "$mauve12",
   borderRadius: "$md",
+  position: "relative",
   boxShadow:
     "0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)",
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
   width: "90vw",
   maxWidth: "450px",
-  maxHeight: "85vh",
+  // maxHeight: "85vh",
   padding: 25,
   "@media (prefers-reduced-motion: no-preference)": {
     animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
@@ -55,10 +59,9 @@ const StyledContent = styled(DialogPrimitive.Content, {
 
 const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => {
   return (
-    <div>
+    <StyledOverlay>
-      <StyledOverlay />
       <StyledContent css={css}>{children}</StyledContent>
-    </div>
+    </StyledOverlay>
   );
 };
 
@@ -83,3 +86,4 @@ export const DialogContent = Content;
 export const DialogTitle = StyledTitle;
 export const DialogDescription = StyledDescription;
 export const DialogClose = DialogPrimitive.Close;
+export const DialogPortal = DialogPrimitive.Portal;

components/DropdownMenu.tsx

@@ -71,7 +71,7 @@ const itemStyles = {
   },
 
   "&:focus": {
-    backgroundColor: "$pink9",
+    backgroundColor: "$purple9",
     color: "$white",
   },
 };
@@ -85,8 +85,8 @@ const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, {
 });
 const StyledTriggerItem = styled(DropdownMenuPrimitive.TriggerItem, {
   '&[data-state="open"]': {
-    backgroundColor: "$pink9",
+    backgroundColor: "$purple9",
-    color: "$pink9",
+    color: "$purple9",
   },
   ...itemStyles,
 });

components/EditorNavigation.tsx

@@ -26,7 +26,12 @@ import NewWindow from "react-new-window";
 import { signOut, useSession } from "next-auth/react";
 import { useSnapshot } from "valtio";
 
-import { createNewFile, syncToGist, updateEditorSettings, downloadAsZip } from "../state/actions";
+import {
+  createNewFile,
+  syncToGist,
+  updateEditorSettings,
+  downloadAsZip,
+} from "../state/actions";
 import state from "../state";
 import Box from "./Box";
 import Button from "./Button";
@@ -54,10 +59,8 @@ import {
 } from "./AlertDialog";
 import { styled } from "../stitches.config";
 
-const DEFAULT_EXTENSION = ".c";
-
 const ErrorText = styled(Text, {
-  color: "$red9",
+  color: "$error",
   mt: "$1",
   display: "block",
 });
@@ -85,25 +88,39 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
 
   const validateFilename = useCallback(
     (filename: string): { error: string | null } => {
-      if (snap.files.find(file => file.name === filename)) {
+      // 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." };
       }
-      // More checks in future
+
+      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
-    let _filename = filename.includes(".") ? filename : filename + DEFAULT_EXTENSION;
+    const chk = validateFilename(filename);
-    const chk = validateFilename(_filename);
+    if (chk && chk.error) {
-    if (chk.error) {
       setNewfileError(`Error: ${chk.error}`);
       return;
     }
 
     setIsNewfileDialogOpen(false);
-    createNewFile(_filename);
+    createNewFile(filename);
     setFilename("");
   }, [filename, setIsNewfileDialogOpen, setFilename, validateFilename]);
 
@@ -139,7 +156,9 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                 return (
                   <Button
                     size="sm"
-                    outline={showWat ? snap.activeWat !== index : snap.active !== index}
+                    outline={
+                      showWat ? snap.activeWat !== index : snap.active !== index
+                    }
                     onClick={() => (state.active = index)}
                     key={file.name + index}
                     css={{
@@ -174,7 +193,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                           // 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;
+                          state.active =
+                            index > snap.active ? snap.active : snap.active - 1;
                         }}
                       >
                         <X size="9px" weight="bold" />
@@ -184,10 +204,18 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                 );
               })}
             {!showWat && (
-              <Dialog open={isNewfileDialogOpen} onOpenChange={setIsNewfileDialogOpen}>
+              <Dialog
+                open={isNewfileDialogOpen}
+                onOpenChange={setIsNewfileDialogOpen}
+              >
                 <DialogTrigger asChild>
-                  <Button ghost size="sm" css={{ alignItems: "center", px: "$2", mr: "$3" }}>
+                  <Button
-                    <Plus size="16px" /> {snap.files.length === 0 && "Add new file"}
+                    ghost
+                    size="sm"
+                    css={{ alignItems: "center", px: "$2", mr: "$3" }}
+                  >
+                    <Plus size="16px" />{" "}
+                    {snap.files.length === 0 && "Add new file"}
                   </Button>
                 </DialogTrigger>
                 <DialogContent>
@@ -196,8 +224,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                     <label>Filename</label>
                     <Input
                       value={filename}
-                      onChange={e => setFilename(e.target.value)}
+                      onChange={(e) => setFilename(e.target.value)}
-                      onKeyPress={e => {
+                      onKeyPress={(e) => {
                         if (e.key === "Enter") {
                           handleConfirm();
                         }
@@ -216,10 +244,7 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                     <DialogClose asChild>
                       <Button outline>Cancel</Button>
                     </DialogClose>
-                    <Button
+                    <Button variant="primary" onClick={handleConfirm}>
-                      variant="primary"
-                      onClick={handleConfirm}
-                    >
                       Create file
                     </Button>
                   </Flex>
@@ -237,11 +262,13 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
       <Flex
         css={{
           py: "$3",
-          backgroundColor: "$mauve3",
+          backgroundColor: "$mauve2",
           zIndex: 1,
         }}
       >
-        <Container css={{ width: "unset", display: "flex", alignItems: "center" }}>
+        <Container
+          css={{ width: "unset", display: "flex", alignItems: "center" }}
+        >
           {status === "authenticated" ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -274,10 +301,15 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 <DropdownMenuItem disabled onClick={() => signOut()}>
-                  <User size="16px" /> {session?.user?.username} ({session?.user.name})
+                  <User size="16px" /> {session?.user?.username} (
+                  {session?.user.name})
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  onClick={() => window.open(`http://gist.github.com/${session?.user.username}`)}
+                  onClick={() =>
+                    window.open(
+                      `http://gist.github.com/${session?.user.username}`
+                    )
+                  }
                 >
                   <ArrowSquareOut size="16px" />
                   Go to your Gist
@@ -291,7 +323,12 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
               </DropdownMenuContent>
             </DropdownMenu>
           ) : (
-            <Button outline size="sm" css={{ mr: "$3" }} onClick={() => setPopUp(true)}>
+            <Button
+              outline
+              size="sm"
+              css={{ mr: "$3" }}
+              onClick={() => setPopUp(true)}
+            >
               <GithubLogo size="16px" /> Login
             </Button>
           )}
@@ -330,7 +367,13 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
               },
             }}
           >
-            <Button isLoading={snap.zipLoading} onClick={downloadAsZip} outline size="sm" css={{ alignItems: "center" }}>
+            <Button
+              isLoading={snap.zipLoading}
+              onClick={downloadAsZip}
+              outline
+              size="sm"
+              css={{ alignItems: "center" }}
+            >
               <DownloadSimple size="16px" />
             </Button>
             <Button
@@ -338,7 +381,9 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
               size="sm"
               css={{ alignItems: "center" }}
               onClick={() => {
-                navigator.clipboard.writeText(`${window.location.origin}/develop/${snap.gistId}`);
+                navigator.clipboard.writeText(
+                  `${window.location.origin}/develop/${snap.gistId}`
+                );
                 toast.success("Copied share link to clipboard!");
               }}
             >
@@ -368,7 +413,10 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                <DropdownMenuItem disabled={snap.zipLoading} onClick={downloadAsZip}>
+                <DropdownMenuItem
+                  disabled={snap.zipLoading}
+                  onClick={downloadAsZip}
+                >
                   <DownloadSimple size="16px" /> Download as ZIP
                 </DropdownMenuItem>
                 <DropdownMenuItem
@@ -383,7 +431,9 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                   Copy share link to clipboard
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  disabled={session?.user.username !== snap.gistOwner || !snap.gistId}
+                  disabled={
+                    session?.user.username !== snap.gistOwner || !snap.gistId
+                  }
                   onClick={() => {
                     syncToGist(session);
                   }}
@@ -409,15 +459,21 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
             </DropdownMenu>
           </Stack>
 
-          {popup && !session ? <NewWindow center="parent" url="/sign-in" /> : null}
+          {popup && !session ? (
+            <NewWindow center="parent" url="/sign-in" />
+          ) : null}
         </Container>
       </Flex>
-      <AlertDialog open={createNewAlertOpen} onOpenChange={value => setCreateNewAlertOpen(value)}>
+      <AlertDialog
+        open={createNewAlertOpen}
+        onOpenChange={(value) => setCreateNewAlertOpen(value)}
+      >
         <AlertDialogContent>
           <AlertDialogTitle>Are you sure?</AlertDialogTitle>
           <AlertDialogDescription>
-            This action will create new <strong>public</strong> Github Gist from your current saved
+            This action will create new <strong>public</strong> Github Gist from
-            files. You can delete gist anytime from your GitHub Gists page.
+            your current saved files. You can delete gist anytime from your
+            GitHub Gists page.
           </AlertDialogDescription>
           <Flex css={{ justifyContent: "flex-end", gap: "$3" }}>
             <AlertDialogCancel asChild>
@@ -451,8 +507,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
               type="number"
               min="1"
               value={editorSettings.tabSize}
-              onChange={e =>
+              onChange={(e) =>
-                setEditorSettings(curr => ({
+                setEditorSettings((curr) => ({
                   ...curr,
                   tabSize: Number(e.target.value),
                 }))
@@ -462,12 +518,18 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
 
           <Flex css={{ marginTop: 25, justifyContent: "flex-end", gap: "$3" }}>
             <DialogClose asChild>
-              <Button outline onClick={() => updateEditorSettings(editorSettings)}>
+              <Button
+                outline
+                onClick={() => updateEditorSettings(editorSettings)}
+              >
                 Cancel
               </Button>
             </DialogClose>
             <DialogClose asChild>
-              <Button variant="primary" onClick={() => updateEditorSettings(editorSettings)}>
+              <Button
+                variant="primary"
+                onClick={() => updateEditorSettings(editorSettings)}
+              >
                 Save changes
               </Button>
             </DialogClose>

components/Flex.tsx

@@ -3,6 +3,51 @@ import Box from "./Box";
 
 const Flex = styled(Box, {
   display: "flex",
+  variants: {
+    row: {
+      true: {
+        flexDirection: "row",
+      },
+    },
+    column: {
+      true: {
+        flexDirection: "column",
+      },
+    },
+    fluid: {
+      true: {
+        width: "100%",
+      },
+    },
+    align: {
+      start: {
+        alignItems: "start",
+      },
+      center: {
+        alignItems: "center",
+      },
+      end: {
+        alignItems: "end",
+      },
+    },
+    justify: {
+      start: {
+        justifyContent: "start",
+      },
+      center: {
+        justifyContent: "center",
+      },
+      end: {
+        justifyContent: "end",
+      },
+      "space-between": {
+        justifyContent: "space-between",
+      },
+      "space-around": {
+        justifyContent: "space-around",
+      },
+    },
+  },
 });
 
 export default Flex;

components/HooksEditor.tsx

@@ -5,12 +5,14 @@ import type monaco from "monaco-editor";
 import { ArrowBendLeftUp } from "phosphor-react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
+import uniqBy from "lodash.uniqby";
 
 import Box from "./Box";
 import Container from "./Container";
 import dark from "../theme/editor/amy.json";
 import light from "../theme/editor/xcode_default.json";
 import { saveFile } from "../state/actions";
+import { apiHeaderFiles } from "../state/constants";
 import state from "../state";
 
 import EditorNavigation from "./EditorNavigation";
@@ -20,23 +22,107 @@ import { createLanguageClient, createWebSocket } from "../utils/languageClient";
 import { listen } from "@codingame/monaco-jsonrpc";
 import ReconnectingWebSocket from "reconnecting-websocket";
 
+import docs from "../xrpl-hooks-docs/docs";
+
 loader.config({
   paths: {
     vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
   },
 });
 
+const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
+  const currPath = editor.getModel()?.uri.path;
+  if (apiHeaderFiles.find((h) => currPath?.endsWith(h))) {
+    editor.updateOptions({ readOnly: true });
+  } else {
+    editor.updateOptions({ readOnly: false });
+  }
+};
+
+let decorations: { [key: string]: string[] } = {};
+
+const setMarkers = (monacoE: typeof monaco) => {
+  // Get all the markers that are active at the moment,
+  // Also if same error is there twice, we can show the content
+  // only once (that's why we're using uniqBy)
+  const markers = uniqBy(
+    monacoE.editor
+      .getModelMarkers({})
+      // Filter out the markers that are hooks specific
+      .filter(
+        (marker) =>
+          typeof marker?.code === "string" &&
+          // Take only markers that starts with "hooks-"
+          marker?.code?.includes("hooks-")
+      ),
+    "code"
+  );
+
+  // Get the active model (aka active file you're editing)
+  // const model = monacoE.editor?.getModel(
+  //   monacoE.Uri.parse(`file:///work/c/${state.files?.[state.active]?.name}`)
+  // );
+  // console.log(state.active);
+  // 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) => {
+    decorations[model.id] = model?.deltaDecorations(
+      decorations?.[model.id] || [],
+      markers
+        .filter((marker) =>
+          marker?.resource.path
+            .split("/")
+            .includes(`${state.files?.[state.active]?.name}`)
+        )
+        .map((marker) => ({
+          range: new monacoE.Range(
+            marker.startLineNumber,
+            marker.startColumn,
+            marker.endLineNumber,
+            marker.endColumn
+          ),
+          options: {
+            hoverMessage: {
+              value:
+                // Find the related hover message markdown from the
+                // /xrpl-hooks-docs/xrpl-hooks-docs-files.json file
+                // which was generated from rst files
+
+                (typeof marker.code === "string" &&
+                  docs[marker?.code]?.toString()) ||
+                "",
+              supportHtml: true,
+              isTrusted: true,
+            },
+          },
+        }))
+    );
+  });
+};
+
 const HooksEditor = () => {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
+  const monacoRef = useRef<typeof monaco>();
   const subscriptionRef = useRef<ReconnectingWebSocket | null>(null);
   const snap = useSnapshot(state);
   const router = useRouter();
   const { theme } = useTheme();
+
+  useEffect(() => {
+    if (editorRef.current) validateWritability(editorRef.current);
+  }, [snap.active]);
+
   useEffect(() => {
     return () => {
       subscriptionRef?.current?.close();
     };
   }, []);
+  useEffect(() => {
+    if (monacoRef.current) {
+      setMarkers(monacoRef.current);
+    }
+  }, [snap.active]);
   return (
     <Box
       css={{
@@ -45,7 +131,7 @@ const HooksEditor = () => {
         display: "flex",
         position: "relative",
         flexDirection: "column",
-        backgroundColor: "$mauve3",
+        backgroundColor: "$mauve2",
         width: "100%",
       }}
     >
@@ -118,6 +204,7 @@ const HooksEditor = () => {
           }}
           onMount={(editor, monaco) => {
             editorRef.current = editor;
+            monacoRef.current = monaco;
             editor.updateOptions({
               glyphMargin: true,
               lightbulb: {
@@ -130,6 +217,16 @@ const HooksEditor = () => {
                 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"}
         />
@@ -157,7 +254,7 @@ const HooksEditor = () => {
                     fontFamily: "$monospace",
                   }}
                 >
-                  Click the link above to create a your file
+                  Click the link above to create your file
                 </Text>
               </Box>
             </Box>

components/Input.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { styled } from "../stitches.config";
 
 export const Input = styled("input", {
@@ -110,20 +111,24 @@ export const Input = styled("input", {
           backgroundColor: "transparent",
         },
       },
+      deep: {
+        backgroundColor: "$deep",
+        boxShadow: "none",
+      },
     },
     state: {
       invalid: {
-        boxShadow: "inset 0 0 0 1px $colors$red7",
+        boxShadow: "inset 0 0 0 1px $colors$crimson7",
         "&:focus": {
           boxShadow:
-            "inset 0px 0px 0px 1px $colors$red8, 0px 0px 0px 1px $colors$red8",
+            "inset 0px 0px 0px 1px $colors$crimson8, 0px 0px 0px 1px $colors$crimson8",
         },
       },
       valid: {
-        boxShadow: "inset 0 0 0 1px $colors$green7",
+        boxShadow: "inset 0 0 0 1px $colors$grass7",
         "&:focus": {
           boxShadow:
-            "inset 0px 0px 0px 1px $colors$green8, 0px 0px 0px 1px $colors$green8",
+            "inset 0px 0px 0px 1px $colors$grass8, 0px 0px 0px 1px $colors$grass8",
         },
       },
     },
@@ -144,4 +149,10 @@ export const Input = styled("input", {
   },
 });
 
-export default Input;
+// eslint-disable-next-line react/display-name
+const ReffedInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<typeof Input>
+>((props, ref) => <Input {...props} ref={ref} />);
+
+export default ReffedInput;

components/Link.tsx

@@ -3,6 +3,14 @@ import { styled } from "../stitches.config";
 const StyledLink = styled("a", {
   color: "CurrentColor",
   textDecoration: "underline",
+  cursor: 'pointer',
+  variants: {
+    highlighted: {
+      true: {
+        color: '$blue9'
+      }
+    }
+  }
 });
 
 export default StyledLink;

components/LogBox.tsx

@@ -1,25 +1,39 @@
-import React, { useRef, useLayoutEffect } from "react";
+import {
+  useRef,
+  useLayoutEffect,
+  ReactNode,
+  FC,
+  useState,
+  useCallback,
+} from "react";
 import { Notepad, Prohibit } from "phosphor-react";
 import useStayScrolled from "react-stay-scrolled";
 import NextLink from "next/link";
 
 import Container from "./Container";
-import Box from "./Box";
-import Flex from "./Flex";
 import LogText from "./LogText";
-import { ILog } from "../state";
+import state, { ILog } from "../state";
-import Text from "./Text";
+import { Pre, Link, Heading, Button, Text, Flex, Box } from ".";
-import Button from "./Button";
+import regexifyString from "regexify-string";
-import Heading from "./Heading";
+import { useSnapshot } from "valtio";
-import Link from "./Link";
+import { AccountDialog } from "./Accounts";
 
 interface ILogBox {
   title: string;
   clearLog?: () => void;
   logs: ILog[];
+  renderNav?: () => ReactNode;
+  enhanced?: boolean;
 }
 
-const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
+const LogBox: FC<ILogBox> = ({
+  title,
+  clearLog,
+  logs,
+  children,
+  renderNav,
+  enhanced,
+}) => {
   const logRef = useRef<HTMLPreElement>(null);
   const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
 
@@ -36,10 +50,24 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
         background: "$mauve1",
         position: "relative",
         flex: 1,
+        height: "100%",
       }}
     >
-      <Container css={{ px: 0, flexShrink: 1 }}>
+      <Container
-        <Flex css={{ py: "$3" }}>
+        css={{
+          px: 0,
+          height: "100%",
+        }}
+      >
+        <Flex
+          fluid
+          css={{
+            height: "48px",
+            alignItems: "center",
+            fontSize: "$sm",
+            fontWeight: 300,
+          }}
+        >
           <Heading
             as="h3"
             css={{
@@ -56,6 +84,15 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
           >
             <Notepad size="15px" /> <Text css={{ lineHeight: 1 }}>{title}</Text>
           </Heading>
+          <Flex
+            row
+            align="center"
+            css={{
+              width: "50%", // TODO make it max without breaking layout!
+            }}
+          >
+            {renderNav?.()}
+          </Flex>
           <Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
             {clearLog && (
               <Button ghost size="xs" onClick={clearLog}>
@@ -64,6 +101,7 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
             )}
           </Flex>
         </Flex>
+
         <Box
           as="pre"
           ref={logRef}
@@ -73,29 +111,31 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
             display: "flex",
             flexDirection: "column",
             width: "100%",
-            height: "160px",
+            height: "calc(100% - 48px)", // 100% minus the logbox header height
+            overflowY: "auto",
             fontSize: "13px",
             fontWeight: "$body",
             fontFamily: "$monospace",
             px: "$3",
             pb: "$2",
             whiteSpace: "normal",
-            overflowY: "auto",
           }}
         >
           {logs?.map((log, index) => (
-            <Box as="span" key={log.type + index}>
+            <Box
-              {/* <LogText capitalize variant={log.type}>
+              as="span"
-                {log.type}:{" "}
+              key={log.type + index}
-              </LogText> */}
+              css={{
-              <LogText variant={log.type}>
+                "@hover": {
-                {log.message}{" "}
+                  "&:hover": {
-                {log.link && (
+                    backgroundColor: enhanced ? "$backgroundAlt" : undefined,
-                  <NextLink href={log.link} shallow passHref>
+                  },
-                    <Link as="a">{log.linkText}</Link>
+                },
-                  </NextLink>
+                p: enhanced ? "$1" : undefined,
-                )}
+                my: enhanced ? "$1" : undefined,
-              </LogText>
+              }}
+            >
+              <Log {...log} />
             </Box>
           ))}
           {children}
@@ -105,4 +145,78 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
   );
 };
 
+export const Log: FC<ILog> = ({
+  type,
+  timestamp: timestamp,
+  message: _message,
+  link,
+  linkText,
+  defaultCollapsed,
+  jsonData: _jsonData,
+}) => {
+  const [expanded, setExpanded] = useState(!defaultCollapsed);
+  const { accounts } = useSnapshot(state);
+  const [dialogAccount, setDialogAccount] = useState<string | null>(null);
+
+  const enrichAccounts = useCallback(
+    (str?: string): ReactNode => {
+      if (!str || !accounts.length) return null;
+
+      const pattern = `(${accounts.map((acc) => acc.address).join("|")})`;
+      const res = regexifyString({
+        pattern: new RegExp(pattern, "gim"),
+        decorator: (match, idx) => {
+          const name = accounts.find((acc) => acc.address === match)?.name;
+          return (
+            <Link
+              key={match + idx}
+              as="a"
+              onClick={() => setDialogAccount(match)}
+              title={match}
+              highlighted
+            >
+              {name || match}
+            </Link>
+          );
+        },
+        input: str,
+      });
+
+      return <>{res}</>;
+    },
+    [accounts]
+  );
+  _message = _message.trim().replace(/\n /gi, "\n");
+  const message = enrichAccounts(_message);
+  const jsonData = enrichAccounts(_jsonData);
+
+  return (
+    <>
+      <AccountDialog
+        setActiveAccountAddress={setDialogAccount}
+        activeAccountAddress={dialogAccount}
+      />
+      <LogText variant={type}>
+        {timestamp && (
+          <Text muted monospace>
+            {timestamp}{" "}
+          </Text>
+        )}
+        <Pre>{message} </Pre>
+        {link && (
+          <NextLink href={link} shallow passHref>
+            <Link as="a">{linkText}</Link>
+          </NextLink>
+        )}
+        {jsonData && (
+          <Link onClick={() => setExpanded(!expanded)} as="a">
+            {expanded ? "Collapse" : "Expand"}
+          </Link>
+        )}
+        {expanded && jsonData && <Pre block>{jsonData}</Pre>}
+      </LogText>
+    </>
+  );
+};
+
 export default LogBox;

components/LogText.tsx

@@ -4,19 +4,20 @@ const Text = styled("span", {
   fontFamily: "$monospace",
   lineHeight: "$body",
   color: "$text",
+  wordWrap: "break-word",
   variants: {
     variant: {
       log: {
         color: "$text",
       },
       warning: {
-        color: "$yellow11",
+        color: "$warning",
       },
       error: {
-        color: "$red11",
+        color: "$error",
       },
       success: {
-        color: "$green11",
+        color: "$success",
       },
     },
     capitalize: {

components/Logo.tsx

@@ -1,8 +1,8 @@
 import { styled } from "../stitches.config";
 
 const SVG = styled("svg", {
-  "& #path-one, & #path-two": {
+  "& #path": {
-    fill: "$text",
+    fill: "$accent",
   },
 });
 function Logo({
@@ -14,21 +14,18 @@ function Logo({
 }) {
   return (
     <SVG
-      width={width || "1em"}
+      width={width || "1.1em"}
-      height={height || "1em"}
+      height={height || "1.1em"}
-      viewBox="0 0 28 22"
+      viewBox="0 0 294 283"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        id="path-one"
-        d="M19.603 3.87h2.3l-4.786 4.747a4.466 4.466 0 01-6.276 0L6.054 3.871h2.3l3.636 3.605a2.828 2.828 0 003.975 0l3.638-3.605zM8.325 17.069h-2.3l4.816-4.776a4.466 4.466 0 016.276 0l4.816 4.776h-2.3l-3.665-3.635a2.828 2.828 0 00-3.975 0l-3.668 3.635z"
-      />
-      <path
-        id="path-two"
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M1.556 9.769h4.751v1.555H1.556v10.072H0V0h1.556v9.769zM26.444 9.769h-4.751v1.555h4.751v10.072H28V0h-1.556v9.769z"
+        id="path"
+        d="M265.827 235L172.416 141.589L265.005 49H226.822L147.732 128.089H53.5514L27.4824 155.089H147.732L227.643 235H265.827Z"
+        fill="#9D2DFF"
       />
     </SVG>
   );

components/Navigation.tsx

@@ -27,6 +27,7 @@ import {
   DialogTrigger,
 } from "./Dialog";
 import PanelBox from "./PanelBox";
+import { templateFileIds } from "../state/constants";
 
 const Navigation = () => {
   const router = useRouter();
@@ -39,9 +40,11 @@ const Navigation = () => {
       as="nav"
       css={{
         display: "flex",
+        backgroundColor: "$mauve1",
         borderBottom: "1px solid $mauve6",
         position: "relative",
         zIndex: 2003,
+        height: "60px",
       }}
     >
       <Container
@@ -59,7 +62,7 @@ const Navigation = () => {
             pr: "$4",
           }}
         >
-          <Link href="/" passHref>
+          <Link href={gistId ? `/develop/${gistId}` : "/develop"} passHref>
             <Box
               as="a"
               css={{
@@ -68,7 +71,7 @@ const Navigation = () => {
                 color: "$textColor",
               }}
             >
-              <Logo width="30px" height="30px" />
+              <Logo width="32px" height="32px" />
             </Box>
           </Link>
           <Flex
@@ -89,10 +92,25 @@ const Navigation = () => {
                   css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}
                 >
                   {snap.files.length > 0 ? "Gist: " : "Playground"}
-                  <Text css={{ color: "$mauve12" }}>
+                  {snap.files.length > 0 && (
-                    {snap.files.length > 0 &&
+                    <Link
-                      `${snap.gistOwner || "-"}/${truncate(snap.gistId || "")}`}
+                      href={`https://gist.github.com/${snap.gistOwner || ""}/${
-                  </Text>
+                        snap.gistId || ""
+                      }`}
+                      passHref
+                    >
+                      <Text
+                        as="a"
+                        target="_blank"
+                        rel="noreferrer noopener"
+                        css={{ color: "$mauve12" }}
+                      >
+                        {`${snap.gistOwner || "-"}/${truncate(
+                          snap.gistId || ""
+                        )}`}
+                      </Text>
+                    </Link>
+                  )}
                 </Text>
               </>
             )}
@@ -110,7 +128,7 @@ const Navigation = () => {
                 </DialogTrigger>
                 <DialogContent
                   css={{
-                    maxWidth: "100%",
+                    maxWidth: "1080px",
                     width: "80vw",
                     height: "80%",
                     backgroundColor: "$mauve1 !important",
@@ -136,10 +154,12 @@ const Navigation = () => {
                         flexDirection: "column",
                         p: "$7",
                         height: "100%",
+                        backgroundColor: "$mauve2",
                         "@md": {
                           width: "30%",
+                          maxWidth: "300px",
                           borderBottom: "0px",
-                          borderRight: "1px solid $colors$mauve5",
+                          borderRight: "1px solid $colors$mauve6",
                         },
                       }}
                     >
@@ -150,9 +170,11 @@ const Navigation = () => {
                           alignItems: "center",
                           gap: "$3",
                           fontSize: "$xl",
+                          lineHeight: "$one",
+                          fontWeight: "$bold",
                         }}
                       >
-                        <Logo width="30px" height="30px" /> XRPL Hooks Editor
+                        <Logo width="48px" height="48px" /> XRPL Hooks Builder
                       </DialogTitle>
                       <DialogDescription as="div">
                         <Text
@@ -174,9 +196,9 @@ const Navigation = () => {
                               display: "inline-flex",
                               alignItems: "center",
                               gap: "$3",
-                              color: "$green9",
+                              color: "$purple10",
                               "&:hover": {
-                                color: "$green11 !important",
+                                color: "$purple11",
                               },
                               "&:focus": {
                                 outline: 0,
@@ -187,7 +209,7 @@ const Navigation = () => {
                             target="_blank"
                             href="https://github.com/XRPL-Labs/xrpld-hooks"
                           >
-                            <ArrowUpRight size="15px" /> Developing Hooks
+                            <ArrowUpRight size="15px" /> Hooks Github
                           </Text>
 
                           <Text
@@ -195,9 +217,9 @@ const Navigation = () => {
                               display: "inline-flex",
                               alignItems: "center",
                               gap: "$3",
-                              color: "$green9",
+                              color: "$purple10",
                               "&:hover": {
-                                color: "$green11 !important",
+                                color: "$purple11",
                               },
                               "&:focus": {
                                 outline: 0,
@@ -215,9 +237,9 @@ const Navigation = () => {
                               display: "inline-flex",
                               alignItems: "center",
                               gap: "$3",
-                              color: "$green9",
+                              color: "$purple10",
                               "&:hover": {
-                                color: "$green11 !important",
+                                color: "$purple11",
                               },
                               "&:focus": {
                                 outline: 0,
@@ -233,65 +255,67 @@ const Navigation = () => {
                         </Flex>
                       </DialogDescription>
                     </Flex>
-
+                    <div>
-                    <Flex
+                      <Flex
-                      css={{
+                        css={{
-                        display: "grid",
+                          display: "grid",
-                        gridTemplateColumns: "1fr",
+                          gridTemplateColumns: "1fr",
-                        gridTemplateRows: "max-content",
-                        flex: 1,
-                        p: "$7",
-                        gap: "$3",
-                        alignItems: "flex-start",
-                        flexWrap: "wrap",
-                        backgroundImage: `url('/pattern.svg'), url('/pattern-2.svg')`,
-                        backgroundRepeat: "no-repeat",
-                        backgroundPosition: "bottom left, top right",
-                        "@md": {
-                          gridTemplateColumns: "1fr 1fr 1fr",
                           gridTemplateRows: "max-content",
-                        },
+                          flex: 1,
-                      }}
+                          p: "$7",
-                    >
+                          gap: "$3",
-                      <PanelBox
+                          alignItems: "normal",
-                        as="a"
+                          flexWrap: "wrap",
-                        href="/develop/be088224fb37c0075e84491da0e602c1"
+                          backgroundColor: "$mauve1",
+                          "@md": {
+                            gridTemplateColumns: "1fr 1fr 1fr",
+                            gridTemplateRows: "max-content",
+                          },
+                        }}
                       >
-                        <Heading>Starter</Heading>
+                        <PanelBox
-                        <Text>
+                          as="a"
-                          Just an empty starter with essential imports
+                          href={`/develop/${templateFileIds.starter}`}
-                        </Text>
+                        >
-                      </PanelBox>
+                          <Heading>Starter</Heading>
-                      <PanelBox
+                          <Text>
-                        as="a"
+                            Just a basic starter with essential imports
-                        href="/develop/be088224fb37c0075e84491da0e602c1"
+                          </Text>
-                      >
+                        </PanelBox>
-                        <Heading>Firewall</Heading>
+                        <PanelBox
-                        <Text>
+                          as="a"
-                          This Hook essentially checks a blacklist of accounts
+                          href={`/develop/${templateFileIds.firewall}`}
-                        </Text>
+                        >
-                      </PanelBox>
+                          <Heading>Firewall</Heading>
-                      <PanelBox
+                          <Text>
-                        as="a"
+                            This Hook essentially checks a blacklist of accounts
-                        href="/develop/be088224fb37c0075e84491da0e602c1"
+                          </Text>
-                      >
+                        </PanelBox>
-                        <Heading>Accept</Heading>
+                        <PanelBox
-                        <Text>
+                          as="a"
-                          This hook just accepts any transaction coming through
+                          href={`/develop/${templateFileIds.notary}`}
-                          it
+                        >
-                        </Text>
+                          <Heading>Notary</Heading>
-                      </PanelBox>
+                          <Text>
-                      <PanelBox
+                            Collecting signatures for multi-sign transactions
-                        as="a"
+                          </Text>
-                        href="/develop/be088224fb37c0075e84491da0e602c1"
+                        </PanelBox>
-                      >
+                        <PanelBox
-                        <Heading>Accept</Heading>
+                          as="a"
-                        <Text>
+                          href={`/develop/${templateFileIds.carbon}`}
-                          This hook just accepts any transaction coming through
+                        >
-                          it
+                          <Heading>Carbon</Heading>
-                        </Text>
+                          <Text>Send a percentage of sum to an address</Text>
-                      </PanelBox>
+                        </PanelBox>
-                    </Flex>
+                        <PanelBox
+                          as="a"
+                          href={`/develop/${templateFileIds.peggy}`}
+                        >
+                          <Heading>Peggy</Heading>
+                          <Text>An oracle based stable coin hook</Text>
+                        </PanelBox>
+                      </Flex>
+                    </div>
                   </Flex>
                   <DialogClose asChild>
                     <Box
@@ -376,9 +400,13 @@ const Navigation = () => {
                 </Button>
               </Link>
             </ButtonGroup>
-            <Button outline disabled>
+            <Link href="https://xrpl-hooks.readme.io/" passHref>
-              <BookOpen size="15px" />
+              <a target="_blank" rel="noreferrer noopener">
-            </Button>
+                <Button outline>
+                  <BookOpen size="15px" />
+                </Button>
+              </a>
+            </Link>
           </Stack>
         </Flex>
       </Container>

components/PanelBox.tsx

@@ -5,8 +5,8 @@ import Text from "./Text";
 const PanelBox = styled("div", {
   display: "flex",
   flexDirection: "column",
-  border: "1px solid $colors$mauve5",
+  border: "1px solid $colors$mauve6",
-  backgroundColor: "$mauve1",
+  backgroundColor: "$mauve2",
   padding: "$3",
   borderRadius: "$sm",
   fontWeight: "lighter",

components/Pre.tsx

@@ -0,0 +1,27 @@
+import { styled } from "../stitches.config";
+
+const Pre = styled("span", {
+  m: 0,
+  wordBreak: "break-all",
+  fontFamily: '$monospace',
+  whiteSpace: 'pre-wrap',
+  variants: {
+    fluid: {
+      true: {
+        width: "100%",
+      },
+    },
+    line: {
+      true: {
+        whiteSpace: 'pre-line'
+      }
+    },
+    block: {
+      true: {
+        display: 'block'
+      }
+    }
+  },
+});
+
+export default Pre;

components/Select.tsx

@@ -0,0 +1,152 @@
+import { forwardRef } from "react";
+import { mauve, mauveDark, purple, purpleDark } from "@radix-ui/colors";
+import { useTheme } from "next-themes";
+import { styled } from "../stitches.config";
+import dynamic from "next/dynamic";
+import type { Props } from "react-select";
+const SelectInput = dynamic(() => import("react-select"), { ssr: false });
+
+// eslint-disable-next-line react/display-name
+const Select = forwardRef<any, Props>((props, ref) => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const colors: any = {
+    // primary: pink.pink9,
+    active: isDark ? purpleDark.purple9 : purple.purple9,
+    activeLight: isDark ? purpleDark.purple5 : purple.purple5,
+    primary: isDark ? mauveDark.mauve4 : mauve.mauve4,
+    secondary: isDark ? mauveDark.mauve8 : mauve.mauve8,
+    background: isDark ? mauveDark.mauve4 : mauve.mauve4,
+    searchText: isDark ? mauveDark.mauve12 : mauve.mauve12,
+    bg: isDark ? mauveDark.mauve1 : mauve.mauve1,
+    dropDownBg: isDark ? mauveDark.mauve5 : mauve.mauve2,
+    mauve4: isDark ? mauveDark.mauve4 : mauve.mauve4,
+    mauve5: isDark ? mauveDark.mauve5 : mauve.mauve5,
+    mauve8: isDark ? mauveDark.mauve8 : mauve.mauve8,
+    mauve9: isDark ? mauveDark.mauve9 : mauve.mauve9,
+    mauve12: isDark ? mauveDark.mauve12 : mauve.mauve12,
+    border: isDark ? mauveDark.mauve10 : mauve.mauve10,
+    placeholder: isDark ? mauveDark.mauve11 : mauve.mauve11,
+  };
+  colors.outline = colors.background;
+  colors.selected = colors.secondary;
+  return (
+    <SelectInput
+      ref={ref}
+      menuPosition={props.menuPosition || "fixed"}
+      styles={{
+        container: (provided) => {
+          return {
+            ...provided,
+            position: "relative",
+          };
+        },
+        singleValue: (provided) => ({
+          ...provided,
+          color: colors.mauve12,
+        }),
+        menu: (provided) => ({
+          ...provided,
+          backgroundColor: colors.dropDownBg,
+        }),
+        control: (provided, state) => {
+          return {
+            ...provided,
+            border: "0px",
+            backgroundColor: colors.mauve4,
+            boxShadow: `0 0 0 1px ${
+              state.isFocused ? colors.border : colors.secondary
+            }`,
+          };
+        },
+        input: (provided) => {
+          return {
+            ...provided,
+            color: "$text",
+          };
+        },
+        multiValue: (provided) => {
+          return {
+            ...provided,
+            backgroundColor: colors.mauve8,
+          };
+        },
+        multiValueLabel: (provided) => {
+          return {
+            ...provided,
+            color: colors.mauve12,
+          };
+        },
+        multiValueRemove: (provided) => {
+          return {
+            ...provided,
+            ":hover": {
+              background: colors.mauve9,
+            },
+          };
+        },
+        option: (provided, state) => {
+          return {
+            ...provided,
+            color: colors.searchText,
+            backgroundColor:
+              state.isSelected || state.isFocused
+                ? colors.activeLight
+                : colors.dropDownBg,
+            ":hover": {
+              backgroundColor: colors.active,
+              color: "#ffffff",
+            },
+            ":selected": {
+              backgroundColor: "red",
+            },
+          };
+        },
+        indicatorSeparator: (provided) => {
+          return {
+            ...provided,
+            backgroundColor: colors.secondary,
+          };
+        },
+        dropdownIndicator: (provided, state) => {
+          return {
+            ...provided,
+            color: state.isFocused ? colors.border : colors.secondary,
+            ":hover": {
+              color: colors.border,
+            },
+          };
+        },
+      }}
+      // theme={(theme) => ({
+      //   ...theme,
+      //   spacing: {
+      //     ...theme.spacing,
+      //     controlHeight: 30,
+      //   },
+      //   colors: {
+      //     primary: colors.selected,
+      //     primary25: colors.active,
+      //     primary50: colors.primary,
+      //     primary75: colors.primary,
+      //     danger: colors.primary,
+      //     dangerLight: colors.primary,
+      //     neutral0: colors.background,
+      //     neutral5: colors.primary,
+      //     neutral10: colors.primary,
+      //     neutral20: colors.outline,
+      //     neutral30: colors.primary,
+      //     neutral40: colors.primary,
+      //     neutral50: colors.placeholder,
+      //     neutral60: colors.primary,
+      //     neutral70: colors.primary,
+      //     neutral80: colors.searchText,
+      //     neutral90: colors.primary,
+      //   },
+      // })}
+      {...props}
+    />
+  );
+});
+
+export default styled(Select, {});

components/SetHookDialog.tsx

@@ -0,0 +1,257 @@
+import React, { useState } from "react";
+import { Plus, Trash, X } from "phosphor-react";
+import Button from "./Button";
+import Box from "./Box";
+import { Stack, Flex, Select } from ".";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  DialogTrigger,
+} from "./Dialog";
+import { Input } from "./Input";
+import {
+  Controller,
+  SubmitHandler,
+  useFieldArray,
+  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 toast from "react-hot-toast";
+
+const transactionOptions = Object.keys(tts).map((key) => ({
+  label: key,
+  value: key as keyof TTS,
+}));
+
+export type SetHookData = {
+  Invoke: {
+    value: keyof TTS;
+    label: string;
+  }[];
+  HookParameters: {
+    HookParameter: {
+      HookParameterName: string;
+      HookParameterValue: string;
+    };
+  }[];
+  // 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,
+    // formState: { errors },
+  } = useForm<SetHookData>();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "HookParameters", // unique name for your Field Array
+  });
+  // const {
+  //   fields: grantFields,
+  //   append: grantAppend,
+  //   remove: grantRemove,
+  // } = useFieldArray({
+  //   control,
+  //   name: "HookGrants", // unique name for your Field Array
+  // });
+  if (!account) {
+    return null;
+  }
+
+  const onSubmit: SubmitHandler<SetHookData> = async (data) => {
+    const currAccount = state.accounts.find(
+      (acc) => acc.address === account.address
+    );
+    if (currAccount) currAccount.isLoading = true;
+    const res = await deployHook(account, data);
+    if (currAccount) currAccount.isLoading = false;
+
+    if (res && res.engine_result === "tesSUCCESS") {
+      toast.success("Transaction succeeded!");
+      return setIsSetHookDialogOpen(false);
+    }
+    toast.error(`Transaction failed! (${res?.engine_result_message})`);
+  };
+  return (
+    <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
+      <DialogTrigger asChild>
+        <Button
+          ghost
+          size="xs"
+          uppercase
+          variant={"secondary"}
+          disabled={
+            account.isLoading ||
+            !snap.files.filter((file) => file.compiledWatContent).length
+          }
+        >
+          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 style={{ marginBottom: "10px", display: "block" }}>
+                  Hook parameters
+                </label>
+                <Stack>
+                  {fields.map((field, index) => (
+                    <Stack key={field.id}>
+                      <Input
+                        // important to include key with field's id
+                        placeholder="Parameter name"
+                        {...register(
+                          `HookParameters.${index}.HookParameter.HookParameterName`
+                        )}
+                      />
+                      <Input
+                        placeholder="Parameter value"
+                        {...register(
+                          `HookParameters.${index}.HookParameter.HookParameterValue`
+                        )}
+                      />
+                      <Button onClick={() => remove(index)} variant="destroy">
+                        <Trash weight="regular" size="16px" />
+                      </Button>
+                    </Stack>
+                  ))}
+                  <Button
+                    outline
+                    fullWidth
+                    type="button"
+                    onClick={() =>
+                      append({
+                        HookParameter: {
+                          HookParameterName: "",
+                          HookParameterValue: "",
+                        },
+                      })
+                    }
+                  >
+                    <Plus size="16px" />
+                    Add Hook Parameter
+                  </Button>
+                </Stack>
+              </Box>
+              {/* <Box css={{ width: "100%" }}>
+                <label style={{ marginBottom: "10px", display: "block" }}>
+                  Hook Grants
+                </label>
+                <Stack>
+                  {grantFields.map((field, index) => (
+                    <Stack key={field.id}>
+                      <Input
+                        // important to include key with field's id
+                        placeholder="Authorize"
+                        {...register(
+                          `HookGrants.${index}.HookGrant.Authorize`,
+                          { minLength: 5 }
+                        )}
+                      />
+                      <Input
+                        placeholder="HookHash"
+                        {...register(`HookGrants.${index}.HookGrant.HookHash`, {
+                          minLength: 64,
+                          maxLength: 64,
+                        })}
+                      />
+                      <Button
+                        onClick={() => grantRemove(index)}
+                        variant="destroy"
+                      >
+                        <Trash weight="regular" size="16px" />
+                      </Button>
+                    </Stack>
+                  ))}
+                  <Button
+                    outline
+                    fullWidth
+                    type="button"
+                    onClick={() =>
+                      grantAppend({
+                        HookGrant: {
+                          Authorize: "",
+                          HookHash: "",
+                        },
+                      })
+                    }
+                  >
+                    <Plus size="16px" />
+                    Add Hook Grant
+                  </Button>
+                </Stack>
+              </Box> */}
+            </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}
+            >
+              Set Hook
+            </Button>
+            {/* </DialogClose> */}
+          </Flex>
+          <DialogClose asChild>
+            <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
+              <X size="20px" />
+            </Box>
+          </DialogClose>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SetHookDialog;

components/Tabs.tsx

@@ -0,0 +1,257 @@
+import React, {
+  useEffect,
+  useState,
+  Fragment,
+  isValidElement,
+  useCallback,
+} from "react";
+import type { ReactNode, ReactElement } from "react";
+import { Box, Button, Flex, Input, Stack, Text } from ".";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from "./Dialog";
+import { Plus, X } from "phosphor-react";
+import { styled } from "../stitches.config";
+
+const ErrorText = styled(Text, {
+  color: "$error",
+  mt: "$1",
+  display: "block",
+});
+
+interface TabProps {
+  header?: string;
+  children: ReactNode;
+}
+
+// TODO customise strings shown
+interface Props {
+  activeIndex?: number;
+  activeHeader?: string;
+  headless?: boolean;
+  children: ReactElement<TabProps>[];
+  keepAllAlive?: boolean;
+  defaultExtension?: string;
+  forceDefaultExtension?: boolean;
+  onCreateNewTab?: (name: string) => any;
+  onCloseTab?: (index: number, header?: string) => any;
+}
+
+export const Tab = (props: TabProps) => null;
+
+export const Tabs = ({
+  children,
+  activeIndex,
+  activeHeader,
+  headless,
+  keepAllAlive = false,
+  onCreateNewTab,
+  onCloseTab,
+  defaultExtension = "",
+  forceDefaultExtension,
+}: Props) => {
+  const [active, setActive] = useState(activeIndex || 0);
+  const tabs: TabProps[] = children.map((elem) => elem.props);
+
+  const [isNewtabDialogOpen, setIsNewtabDialogOpen] = useState(false);
+  const [tabname, setTabname] = useState("");
+  const [newtabError, setNewtabError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (activeIndex) setActive(activeIndex);
+  }, [activeIndex]);
+
+  useEffect(() => {
+    if (activeHeader) {
+      const idx = tabs.findIndex((tab) => tab.header === activeHeader);
+      setActive(idx);
+    }
+  }, [activeHeader, tabs]);
+
+  // when filename changes, reset error
+  useEffect(() => {
+    setNewtabError(null);
+  }, [tabname, setNewtabError]);
+
+  const validateTabname = useCallback(
+    (tabname: string): { error: string | null } => {
+      if (tabs.find((tab) => tab.header === tabname)) {
+        return { error: "Name already exists." };
+      }
+      return { error: null };
+    },
+    [tabs]
+  );
+
+  const handleCreateTab = useCallback(() => {
+    // add default extension in case omitted
+    let _tabname = tabname.includes(".") ? tabname : tabname + defaultExtension;
+    if (forceDefaultExtension && !_tabname.endsWith(defaultExtension)) {
+      _tabname = _tabname + defaultExtension;
+    }
+
+    const chk = validateTabname(_tabname);
+    if (chk.error) {
+      setNewtabError(`Error: ${chk.error}`);
+      return;
+    }
+
+    setIsNewtabDialogOpen(false);
+    setTabname("");
+    // switch to new tab?
+    setActive(tabs.length);
+
+    onCreateNewTab?.(_tabname);
+  }, [tabname, defaultExtension, validateTabname, onCreateNewTab, tabs.length]);
+
+  const handleCloseTab = useCallback(
+    (idx: number) => {
+      if (idx <= active && active !== 0) {
+        setActive(active - 1);
+      }
+
+      onCloseTab?.(idx, tabs[idx].header);
+    },
+    [active, onCloseTab, tabs]
+  );
+
+  return (
+    <>
+      {!headless && (
+        <Stack
+          css={{
+            gap: "$3",
+            flex: 1,
+            flexWrap: "nowrap",
+            marginBottom: "-1px",
+            width: "100%",
+            overflow: "auto",
+          }}
+        >
+          {tabs.map((tab, idx) => (
+            <Button
+              key={tab.header}
+              role="tab"
+              tabIndex={idx}
+              onClick={() => setActive(idx)}
+              onKeyPress={() => setActive(idx)}
+              outline={active !== idx}
+              size="sm"
+              css={{
+                "&:hover": {
+                  span: {
+                    visibility: "visible",
+                  },
+                },
+              }}
+            >
+              {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>
+          ))}
+          {onCreateNewTab && (
+            <Dialog
+              open={isNewtabDialogOpen}
+              onOpenChange={setIsNewtabDialogOpen}
+            >
+              <DialogTrigger asChild>
+                <Button
+                  ghost
+                  size="sm"
+                  css={{ alignItems: "center", px: "$2", mr: "$3" }}
+                >
+                  <Plus size="16px" /> {tabs.length === 0 && "Add new tab"}
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogTitle>Create new tab</DialogTitle>
+                <DialogDescription>
+                  <label>Tabname</label>
+                  <Input
+                    value={tabname}
+                    onChange={(e) => setTabname(e.target.value)}
+                    onKeyPress={(e) => {
+                      if (e.key === "Enter") {
+                        handleCreateTab();
+                      }
+                    }}
+                  />
+                  <ErrorText>{newtabError}</ErrorText>
+                </DialogDescription>
+
+                <Flex
+                  css={{
+                    marginTop: 25,
+                    justifyContent: "flex-end",
+                    gap: "$3",
+                  }}
+                >
+                  <DialogClose asChild>
+                    <Button outline>Cancel</Button>
+                  </DialogClose>
+                  <Button variant="primary" onClick={handleCreateTab}>
+                    Create
+                  </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>
+      )}
+    </>
+  );
+};

components/Text.tsx

@@ -4,6 +4,23 @@ const Text = styled("span", {
   fontFamily: "$body",
   lineHeight: "$body",
   color: "$text",
+  variants: {
+    small: {
+      true: {
+        fontSize: '$xs'
+      }
+    },
+    muted: {
+      true: {
+        color: '$mauve9'
+      }
+    },
+    monospace: {
+      true: {
+        fontFamily: '$monospace'
+      }
+    }
+  }
 });
 
 export default Text;

components/index.tsx

@@ -0,0 +1,17 @@
+export { default as Flex } from "./Flex";
+export { default as Link } from "./Link";
+export { default as Container } from "./Container";
+export { default as Heading } from "./Heading";
+export { default as Stack } from "./Stack";
+export { default as Text } from "./Text";
+export { default as Input } from "./Input";
+export { default as Select } from "./Select";
+export * from "./Tabs";
+export * from "./AlertDialog";
+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/transactions.json

@@ -0,0 +1,221 @@
+[
+  {
+    "TransactionType": "AccountDelete",
+    "Account": "rWYkbWkCeg8dP6rXALnjgZSjjLyih5NXm",
+    "Destination": "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe",
+    "DestinationTag": 13,
+    "Fee": "2000000",
+    "Sequence": 2470665,
+    "Flags": 2147483648
+  },
+  {
+    "TransactionType": "AccountSet",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Fee": "12",
+    "Sequence": 5,
+    "Domain": "6578616D706C652E636F6D",
+    "SetFlag": 5,
+    "MessageKey": "03AB40A0490F9B7ED8DF29D246BF2D6269820A0EE7742ACDD457BEA7C7D0931EDB"
+  },
+  {
+    "Account": "rUn84CUYbNjRoTQ6mSW7BVJPSVJNLb1QLo",
+    "TransactionType": "CheckCancel",
+    "CheckID": "49647F0D748DC3FE26BDACBC57F251AADEFFF391403EC9BF87C97F67E9977FB0",
+    "Fee": "12"
+  },
+  {
+    "Account": "rfkE1aSy9G8Upk4JssnwBxhEv5p4mn2KTy",
+    "TransactionType": "CheckCash",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "CheckID": "838766BA2B995C00744175F69A1B11E32C3DBC40E64801A4056FCBD657F57334",
+    "Fee": "12"
+  },
+  {
+    "TransactionType": "CheckCreate",
+    "Account": "rUn84CUYbNjRoTQ6mSW7BVJPSVJNLb1QLo",
+    "Destination": "rfkE1aSy9G8Upk4JssnwBxhEv5p4mn2KTy",
+    "SendMax": "100000000",
+    "Expiration": 570113521,
+    "InvoiceID": "6F1DFD1D0FE8A32E40E1F2C05CF1C15545BAB56B617F9C6C2D63A6B704BEF59B",
+    "DestinationTag": 1,
+    "Fee": "12"
+  },
+  {
+    "TransactionType": "DepositPreauth",
+    "Account": "rsUiUMpnrgxQp24dJYZDhmV4bE3aBtQyt8",
+    "Authorize": "rEhxGqkqPPSxQ3P25J66ft5TwpzV14k2de",
+    "Fee": "10",
+    "Flags": 2147483648,
+    "Sequence": 2
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "EscrowCancel",
+    "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "OfferSequence": 7
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "EscrowCreate",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
+    "CancelAfter": 533257958,
+    "FinishAfter": 533171558,
+    "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
+    "DestinationTag": 23480,
+    "SourceTag": 11747
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "EscrowFinish",
+    "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "OfferSequence": 7,
+    "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
+    "Fulfillment": "A0028000"
+  },
+  {
+    "TransactionType": "NFTokenBurn",
+    "Account": "rvYAfWj5gh67oV6fW32ZzP3Aw4Eubs59B",
+    "Fee": "10",
+    "TokenID": "000B013A95F14B0044F78A264E41713C64B5F89242540EE208C3098E00000D65"
+  },
+  {
+    "TransactionType": "NFTokenAcceptOffer",
+    "Fee": "10"
+  },
+  {
+    "TransactionType": "NFTokenCancelOffer",
+    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "TokenIDs": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007"
+  },
+  {
+    "TransactionType": "NFTokenCreateOffer",
+    "Account": "rs8jBmmfpwgmrSPgwMsh7CvKRmRt1JTVSX",
+    "TokenID": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "Flags": 1
+  },
+  {
+    "TransactionType": "OfferCancel",
+    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "Fee": "12",
+    "Flags": 0,
+    "LastLedgerSequence": 7108629,
+    "OfferSequence": 6,
+    "Sequence": 7
+  },
+  {
+    "TransactionType": "OfferCreate",
+    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "Fee": "12",
+    "Flags": 0,
+    "LastLedgerSequence": 7108682,
+    "Sequence": 8,
+    "TakerGets": "6000000",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    }
+  },
+  {
+    "TransactionType": "Payment",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Destination": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "Fee": "12",
+    "Flags": 2147483648,
+    "Sequence": 2
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "PaymentChannelCreate",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
+    "SettleDelay": 86400,
+    "PublicKey": "32D2471DB72B27E3310F355BB33E339BF26F8392D5A93D3BC0FC3B566612DA0F0A",
+    "CancelAfter": 533171558,
+    "DestinationTag": 23480,
+    "SourceTag": 11747
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "PaymentChannelFund",
+    "Channel": "C1AE6DDDEEC05CF2978C0BAD6FE302948E9533691DC749DCDD3B9E5992CA6198",
+    "Amount": {
+      "value": "200",
+      "type": "currency"
+    },
+    "Expiration": 543171558
+  },
+  {
+    "Flags": 0,
+    "TransactionType": "SetRegularKey",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Fee": "12",
+    "RegularKey": "rAR8rR8sUkBoCZFawhkWzY4Y5YoyuznwD"
+  },
+  {
+    "Flags": 0,
+    "TransactionType": "SignerListSet",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Fee": "12",
+    "SignerQuorum": 3,
+    "SignerEntries": {
+      "type": "json",
+      "value": [
+        {
+          "SignerEntry": {
+            "Account": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
+            "SignerWeight": 2
+          }
+        },
+        {
+          "SignerEntry": {
+            "Account": "rUpy3eEg8rqjqfUoLeBnZkscbKbFsKXC3v",
+            "SignerWeight": 1
+          }
+        },
+        {
+          "SignerEntry": {
+            "Account": "raKEEVSGnKSD9Zyvxu4z6Pqpm4ABH8FS6n",
+            "SignerWeight": 1
+          }
+        }
+      ]
+    }
+  },
+  {
+    "TransactionType": "TicketCreate",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Fee": "10",
+    "Sequence": 381,
+    "TicketCount": 10
+  },
+  {
+    "TransactionType": "TrustSet",
+    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "Fee": "12",
+    "Flags": 262144,
+    "LastLedgerSequence": 8007750,
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "Sequence": 12
+  }
+]

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next.config.js

@@ -11,6 +11,10 @@ module.exports = {
     if (!isServer) {
       config.resolve.fallback.fs = false;
     }
+    config.module.rules.push({
+      test: /\.md$/,
+      use: "raw-loader",
+    });
     return config;
   },
 };

package.json

@@ -20,10 +20,14 @@
     "@radix-ui/react-dropdown-menu": "^0.1.1",
     "@radix-ui/react-id": "^0.1.1",
     "@stitches/react": "^1.2.6-0",
-    "file-saver": "^2.0.5",
-    "jszip": "^3.7.1",
     "base64-js": "^1.5.1",
     "dinero.js": "^1.9.1",
+    "file-saver": "^2.0.5",
+    "filesize": "^8.0.7",
+    "javascript-time-ago": "^2.3.11",
+    "jszip": "^3.7.1",
+    "lodash.uniqby": "^4.7.0",
+    "lodash.xor": "^4.5.0",
     "monaco-editor": "^0.30.1",
     "next": "^12.0.4",
     "next-auth": "^4.0.0-beta.5",
@@ -37,25 +41,33 @@
     "re-resizable": "^6.9.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-hook-form": "^7.28.0",
     "react-hot-keys": "^2.7.1",
     "react-hot-toast": "^2.1.1",
     "react-new-window": "^0.2.1",
+    "react-select": "^5.2.1",
+    "react-split": "^2.0.14",
     "react-stay-scrolled": "^7.4.0",
+    "react-time-ago": "^7.1.9",
     "reconnecting-websocket": "^4.4.0",
+    "regexify-string": "^1.0.17",
     "valtio": "^1.2.5",
     "vscode-languageserver": "^7.0.0",
     "vscode-uri": "^3.0.2",
     "wabt": "1.0.16",
-    "xrpl-accountlib": "^1.2.3",
+    "xrpl-accountlib": "^1.3.2",
-    "xrpl-client": "^1.9.3"
+    "xrpl-client": "^1.9.4"
   },
   "devDependencies": {
-    "@types/file-saver": "^2.0.4",
     "@types/dinero.js": "^1.9.0",
+    "@types/file-saver": "^2.0.4",
+    "@types/lodash.uniqby": "^4.7.6",
+    "@types/lodash.xor": "^4.5.6",
     "@types/pako": "^1.0.2",
     "@types/react": "17.0.31",
     "eslint": "7.32.0",
     "eslint-config-next": "11.1.2",
+    "raw-loader": "^4.0.2",
     "typescript": "4.4.4"
   }
 }

pages/_app.tsx

@@ -13,24 +13,105 @@ import Navigation from "../components/Navigation";
 import { fetchFiles } from "../state/actions";
 import state from "../state";
 
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en.json";
+import { useSnapshot } from "valtio";
+
+TimeAgo.setDefaultLocale(en.locale);
+TimeAgo.addLocale(en)
+
 function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   const router = useRouter();
   const slug = router.query?.slug;
   const gistId = (Array.isArray(slug) && slug[0]) ?? null;
+
+  const origin = "https://xrpl-hooks-ide.vercel.app"; // TODO: Change when site is deployed
+  const shareImg = "/share-image.png";
+
+  const snap = useSnapshot(state);
   useEffect(() => {
     if (gistId && router.isReady) {
       fetchFiles(gistId);
     } else {
-      if (!gistId && router.isReady && !router.pathname.includes("/sign-in")) {
+      if (
+        !gistId &&
+        router.isReady &&
+        !router.pathname.includes("/sign-in") &&
+        !snap.files.length &&
+        !snap.mainModalShowed
+      ) {
         state.mainModalOpen = true;
+        state.mainModalShowed = true;
       }
     }
-  }, [gistId, router.isReady, router.pathname]);
+  }, [
+    gistId,
+    router.isReady,
+    router.pathname,
+    snap.files,
+    snap.mainModalShowed,
+  ]);
 
   return (
     <>
       <Head>
-        <title>XRPL Hooks Playground</title>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+        <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" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@xrpllabs" />
+        <meta
+          name="description"
+          content="Playground for buildings Hooks, that 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."
+        />
+        <meta
+          name="twitter:description"
+          content="Playground for buildings Hooks, that add smart contract functionality to the XRP Ledger.."
+        />
+        <meta property="og:image" content={`${origin}${shareImg}`} />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+        <meta name="twitter:image" content={`${origin}${shareImg}`} />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <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="msapplication-TileColor" content="#c10ad0" />
+        <meta
+          name="theme-color"
+          content="#161618"
+          media="(prefers-color-scheme: dark)"
+        />
+        <meta
+          name="theme-color"
+          content="#FDFCFD"
+          media="(prefers-color-scheme: light)"
+        />
       </Head>
       <IdProvider>
         <SessionProvider session={session}>

pages/_document.tsx

@@ -16,11 +16,14 @@ class MyDocument extends Document {
   }
   render() {
     globalStyles();
+
     return (
       <Html>
         <Head>
-          <meta name="description" content="Playground for XRPL Hooks" />
+          <style
-          <link rel="icon" href="/favicon.ico" />
+            id="stitches"
+            dangerouslySetInnerHTML={{ __html: getCssText() }}
+          />
           <link rel="preconnect" href="https://fonts.googleapis.com" />
           <link
             rel="preconnect"
@@ -31,10 +34,6 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Work+Sans:wght@400;600;700&display=swap"
             rel="stylesheet"
           />
-          <style
-            id="stitches"
-            dangerouslySetInnerHTML={{ __html: getCssText() }}
-          />
         </Head>
         <body>
           <Main />

pages/_middleware.ts

@@ -4,7 +4,9 @@ import { NextResponse as Response } from 'next/server';
 export default function middleware(req: NextRequest, ev: NextFetchEvent) {
 
   if (req.nextUrl.pathname === "/") {
-    return Response.redirect("/develop");
+    const url = req.nextUrl.clone();
+    url.pathname = '/develop';
+    return Response.redirect(url);
 
   }
 }

pages/api/faucet.ts

@@ -21,8 +21,15 @@ export default async function handler(
   if (req.method !== 'POST') {
     return res.status(405).json({ error: 'Method not allowed!' })
   }
+  const { account } = req.query;
+  const ip = Array.isArray(req?.headers?.["x-real-ip"]) ? req?.headers?.["x-real-ip"][0] : req?.headers?.["x-real-ip"];
   try {
-    const response = await fetch('https://hooks-testnet.xrpl-labs.com/newcreds', { method: 'POST' });
+    const response = await fetch(`https://${process.env.NEXT_PUBLIC_TESTNET_URL}/newcreds?account=${account ? account : ''}`, {
+      method: 'POST',
+      headers: {
+        'x-forwarded-for': ip || '',
+      },
+    });
     const json: Faucet | ErrorResponse = await response.json();
     if ("error" in json) {
       return res.status(429).json(json)

pages/deploy/[[...slug]].tsx

@@ -1,8 +1,9 @@
-import React from "react";
 import dynamic from "next/dynamic";
-import Flex from "../../components/Flex";
+import React from "react";
+import Split from "react-split";
 import { useSnapshot } from "valtio";
 import state from "../../state";
+import { getSplit, saveSplit } from "../../state/actions/persistSplits";
 
 const DeployEditor = dynamic(() => import("../../components/DeployEditor"), {
   ssr: false,
@@ -17,21 +18,45 @@ const LogBox = dynamic(() => import("../../components/LogBox"), {
 });
 
 const Deploy = () => {
-  const snap = useSnapshot(state);
+  const { deployLogs } = useSnapshot(state);
   return (
-    <>
+    <Split
-      <main style={{ display: "flex", flex: 1 }}>
+      direction="vertical"
+      gutterSize={4}
+      gutterAlign="center"
+      sizes={getSplit("deployVertical") || [40, 60]}
+      style={{ height: "calc(100vh - 60px)" }}
+      onDragEnd={(e) => saveSplit("deployVertical", e)}
+    >
+      <main style={{ display: "flex", flex: 1, position: "relative" }}>
         <DeployEditor />
       </main>
-      <Flex css={{ flexDirection: "row", width: "100%" }}>
+      <Split
-        <Accounts />
+        direction="horizontal"
-        <LogBox
+        sizes={getSplit("deployHorizontal") || [50, 50]}
-          title="Deploy Log"
+        minSize={[320, 160]}
-          logs={snap.deployLogs}
+        gutterSize={4}
-          clearLog={() => (state.deployLogs = [])}
+        gutterAlign="center"
-        />
+        style={{
-      </Flex>
+          display: "flex",
-    </>
+          flexDirection: "row",
+          width: "100%",
+          height: "100%",
+        }}
+        onDragEnd={(e) => saveSplit("deployHorizontal", e)}
+      >
+        <div style={{ alignItems: "stretch", display: "flex" }}>
+          <Accounts />
+        </div>
+        <div>
+          <LogBox
+            title="Deploy Log"
+            logs={deployLogs}
+            clearLog={() => (state.deployLogs = [])}
+          />
+        </div>
+      </Split>
+    </Split>
   );
 };
 

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

@@ -1,13 +1,15 @@
-import dynamic from "next/dynamic";
-import { useSnapshot } from "valtio";
-import Hotkeys from "react-hot-keys";
-import { Play } from "phosphor-react";
-
 import type { NextPage } from "next";
-import { compileCode } from "../../state/actions";
+import dynamic from "next/dynamic";
-import state from "../../state";
+import { Play } from "phosphor-react";
-import Button from "../../components/Button";
+import Hotkeys from "react-hot-keys";
+import Split from "react-split";
+import { useSnapshot } from "valtio";
 import Box from "../../components/Box";
+import Button from "../../components/Button";
+import state from "../../state";
+import { compileCode } from "../../state/actions";
+import { getSplit, saveSplit } from "../../state/actions/persistSplits";
+
 
 const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
   ssr: false,
@@ -19,8 +21,17 @@ const LogBox = dynamic(() => import("../../components/LogBox"), {
 
 const Home: NextPage = () => {
   const snap = useSnapshot(state);
+
   return (
-    <>
+    <Split
+      direction="vertical"
+      sizes={getSplit("developVertical") || [70, 30]}
+      minSize={[100, 100]}
+      gutterAlign="center"
+      gutterSize={4}
+      style={{ height: "calc(100vh - 60px)" }}
+      onDragEnd={(e) => saveSplit("developVertical", e)}
+    >
       <main style={{ display: "flex", flex: 1, position: "relative" }}>
         <HooksEditor />
         {snap.files[snap.active]?.name?.split(".")?.[1].toLowerCase() ===
@@ -65,7 +76,7 @@ const Home: NextPage = () => {
           logs={snap.logs}
         />
       </Box>
-    </>
+    </Split>
   );
 };
 

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

@@ -1,7 +1,464 @@
-import Container from "../../components/Container";
+import dynamic from "next/dynamic";
+import { Play } from "phosphor-react";
+import { FC, useCallback, useEffect, useState } from "react";
+import Split from "react-split";
+import { useSnapshot } from "valtio";
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Input,
+  Select,
+  Tab,
+  Tabs,
+  Text,
+} from "../../components";
+import transactionsData from "../../content/transactions.json";
+import state from "../../state";
+import { sendTransaction } from "../../state/actions";
+import { getSplit, saveSplit } from "../../state/actions/persistSplits";
+
+const DebugStream = dynamic(() => import("../../components/DebugStream"), {
+  ssr: false,
+});
+
+const LogBox = dynamic(() => import("../../components/LogBox"), {
+  ssr: false,
+});
+const Accounts = dynamic(() => import("../../components/Accounts"), {
+  ssr: false,
+});
+
+// type SelectOption<T> = { value: T, label: string };
+type TxFields = Omit<
+  typeof transactionsData[0],
+  "Account" | "Sequence" | "TransactionType"
+>;
+type OtherFields = (keyof Omit<TxFields, "Destination">)[];
+
+interface Props {
+  header?: string;
+}
+
+const Transaction: FC<Props> = ({ header, ...props }) => {
+  const snap = useSnapshot(state);
+
+  const transactionsOptions = transactionsData.map((tx) => ({
+    value: tx.TransactionType,
+    label: tx.TransactionType,
+  }));
+  const [selectedTransaction, setSelectedTransaction] = useState<
+    typeof transactionsOptions[0] | null
+  >(null);
+
+  const accountOptions = snap.accounts.map((acc) => ({
+    label: acc.name,
+    value: acc.address,
+  }));
+  const [selectedAccount, setSelectedAccount] = useState<
+    typeof accountOptions[0] | null
+  >(null);
+
+  const destAccountOptions = snap.accounts
+    .map((acc) => ({
+      label: acc.name,
+      value: acc.address,
+    }))
+    .filter((acc) => acc.value !== selectedAccount?.value);
+  const [selectedDestAccount, setSelectedDestAccount] = useState<
+    typeof destAccountOptions[0] | null
+  >(null);
+
+  const [txIsLoading, setTxIsLoading] = useState(false);
+  const [txIsDisabled, setTxIsDisabled] = useState(false);
+  const [txFields, setTxFields] = useState<TxFields>({});
+
+  useEffect(() => {
+    const transactionType = selectedTransaction?.value;
+    const account = snap.accounts.find(
+      (acc) => acc.address === selectedAccount?.value
+    );
+    if (!account || !transactionType || txIsLoading) {
+      setTxIsDisabled(true);
+    } else {
+      setTxIsDisabled(false);
+    }
+  }, [txIsLoading, selectedTransaction, selectedAccount, snap.accounts]);
+
+  useEffect(() => {
+    let _txFields: TxFields | undefined = transactionsData.find(
+      (tx) => tx.TransactionType === selectedTransaction?.value
+    );
+    if (!_txFields) return setTxFields({});
+    _txFields = { ..._txFields } as TxFields;
+
+    setSelectedDestAccount(null);
+    // @ts-ignore
+    delete _txFields.TransactionType;
+    // @ts-ignore
+    delete _txFields.Account;
+    // @ts-ignore
+    delete _txFields.Sequence;
+    setTxFields(_txFields);
+  }, [selectedTransaction, setSelectedDestAccount]);
+
+  const submitTest = useCallback(async () => {
+    const account = snap.accounts.find(
+      (acc) => acc.address === selectedAccount?.value
+    );
+    const TransactionType = selectedTransaction?.value;
+    if (!account || !TransactionType || txIsDisabled) return;
+
+    setTxIsLoading(true);
+    // setTxIsError(null)
+    try {
+      let options = { ...txFields };
+
+      options.Destination = selectedDestAccount?.value;
+      (Object.keys(options) as (keyof TxFields)[]).forEach((field) => {
+        let _value = options[field];
+        // convert currency
+        if (typeof _value === "object" && _value.type === "currency") {
+          if (+_value.value) {
+            options[field] = (+_value.value * 1000000 + "") as any;
+          } else {
+            options[field] = undefined; // 👇 💀
+          }
+        }
+        // handle type: `json`
+        if (typeof _value === "object" && _value.type === "json") {
+          if (typeof _value.value === "object") {
+            options[field] = _value.value as any;
+          } else {
+            try {
+              options[field] = JSON.parse(_value.value);
+            } catch (error) {
+              const message = `Input error for json field '${field}': ${
+                error instanceof Error ? error.message : ""
+              }`;
+              throw Error(message);
+            }
+          }
+        }
+
+        // delete unneccesary fields
+        if (!options[field]) {
+          delete options[field];
+        }
+      });
+      const logPrefix = header ? `${header.split(".")[0]}: ` : undefined;
+      await sendTransaction(
+        account,
+        {
+          TransactionType,
+          ...options,
+        },
+        { logPrefix }
+      );
+    } catch (error) {
+      console.error(error);
+      if (error instanceof Error) {
+        state.transactionLogs.push({ type: "error", message: error.message });
+      }
+    }
+    setTxIsLoading(false);
+  }, [
+    header,
+    selectedAccount?.value,
+    selectedDestAccount?.value,
+    selectedTransaction?.value,
+    snap.accounts,
+    txFields,
+    txIsDisabled,
+  ]);
+
+  const resetState = useCallback(() => {
+    setSelectedAccount(null);
+    setSelectedDestAccount(null);
+    setSelectedTransaction(null);
+    setTxFields({});
+    setTxIsDisabled(false);
+    setTxIsLoading(false);
+  }, []);
+
+  const usualFields = ["TransactionType", "Amount", "Account", "Destination"];
+  const otherFields = Object.keys(txFields).filter(
+    (k) => !usualFields.includes(k)
+  ) as OtherFields;
+  return (
+    <Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
+      <Container
+        css={{
+          p: "$3 01",
+          fontSize: "$sm",
+          height: "calc(100% - 45px)",
+        }}
+      >
+        <Flex column fluid css={{ height: "100%", overflowY: "auto" }}>
+          <Flex
+            row
+            fluid
+            css={{
+              justifyContent: "flex-end",
+              alignItems: "center",
+              mb: "$3",
+              mt: "1px",
+              pr: "1px",
+            }}
+          >
+            <Text muted css={{ mr: "$3" }}>
+              Transaction type:{" "}
+            </Text>
+            <Select
+              instanceId="transactionsType"
+              placeholder="Select transaction type"
+              options={transactionsOptions}
+              hideSelectedOptions
+              css={{ width: "70%" }}
+              value={selectedTransaction}
+              onChange={(tt) => setSelectedTransaction(tt as any)}
+            />
+          </Flex>
+          <Flex
+            row
+            fluid
+            css={{
+              justifyContent: "flex-end",
+              alignItems: "center",
+              mb: "$3",
+              pr: "1px",
+            }}
+          >
+            <Text muted css={{ mr: "$3" }}>
+              Account:{" "}
+            </Text>
+            <Select
+              instanceId="from-account"
+              placeholder="Select your account"
+              css={{ width: "70%" }}
+              options={accountOptions}
+              value={selectedAccount}
+              onChange={(acc) => setSelectedAccount(acc as any)}
+            />
+          </Flex>
+          {txFields.Amount !== undefined && (
+            <Flex
+              row
+              fluid
+              css={{
+                justifyContent: "flex-end",
+                alignItems: "center",
+                mb: "$3",
+                pr: "1px",
+              }}
+            >
+              <Text muted css={{ mr: "$3" }}>
+                Amount (XRP):{" "}
+              </Text>
+              <Input
+                value={txFields.Amount.value}
+                onChange={(e) =>
+                  setTxFields({
+                    ...txFields,
+                    Amount: { type: "currency", value: e.target.value },
+                  })
+                }
+                css={{ width: "70%", flex: "inherit", height: "$9" }}
+              />
+            </Flex>
+          )}
+          {txFields.Destination !== undefined && (
+            <Flex
+              row
+              fluid
+              css={{
+                justifyContent: "flex-end",
+                alignItems: "center",
+                mb: "$3",
+                pr: "1px",
+              }}
+            >
+              <Text muted css={{ mr: "$3" }}>
+                Destination account:{" "}
+              </Text>
+              <Select
+                instanceId="to-account"
+                placeholder="Select the destination account"
+                css={{ width: "70%" }}
+                options={destAccountOptions}
+                value={selectedDestAccount}
+                isClearable
+                onChange={(acc) => setSelectedDestAccount(acc as any)}
+              />
+            </Flex>
+          )}
+          {otherFields.map((field) => {
+            let _value = txFields[field];
+            let value = typeof _value === "object" ? _value.value : _value;
+            value =
+              typeof value === "object"
+                ? JSON.stringify(value)
+                : value?.toLocaleString();
+            let isCurrency =
+              typeof _value === "object" && _value.type === "currency";
+            return (
+              <Flex
+                key={field}
+                row
+                fluid
+                css={{
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  mb: "$3",
+                  pr: "1px",
+                }}
+              >
+                <Text muted css={{ mr: "$3" }}>
+                  {field + (isCurrency ? " (XRP)" : "")}:{" "}
+                </Text>
+                <Input
+                  value={value}
+                  onChange={(e) =>
+                    setTxFields({
+                      ...txFields,
+                      [field]:
+                        typeof _value === "object"
+                          ? { ..._value, value: e.target.value }
+                          : e.target.value,
+                    })
+                  }
+                  css={{ width: "70%", flex: "inherit", height: "$9" }}
+                />
+              </Flex>
+            );
+          })}
+        </Flex>
+      </Container>
+      <Flex
+        row
+        css={{
+          justifyContent: "space-between",
+          position: "absolute",
+          left: 0,
+          bottom: 0,
+          width: "100%",
+        }}
+      >
+        <Button outline>VIEW AS JSON</Button>
+        <Flex row>
+          <Button onClick={resetState} outline css={{ mr: "$3" }}>
+            RESET
+          </Button>
+          <Button
+            variant="primary"
+            onClick={submitTest}
+            isLoading={txIsLoading}
+            disabled={txIsDisabled}
+          >
+            <Play weight="bold" size="16px" />
+            RUN TEST
+          </Button>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};
 
 const Test = () => {
-  return <Container css={{ py: "$10" }}>This will be the test page</Container>;
+  const { transactionLogs } = useSnapshot(state);
+  const [tabHeaders, setTabHeaders] = useState<string[]>(["test1.json"]);
+  return (
+    <Container css={{ px: 0 }}>
+      <Split
+        direction="vertical"
+        sizes={getSplit("testVertical") || [50, 50]}
+        gutterSize={4}
+        gutterAlign="center"
+        style={{ height: "calc(100vh - 60px)" }}
+        onDragEnd={(e) => saveSplit("testVertical", e)}
+      >
+        <Flex
+          row
+          fluid
+          css={{
+            justifyContent: "center",
+            p: "$3 $2",
+          }}
+        >
+          <Split
+            direction="horizontal"
+            sizes={getSplit("testHorizontal") || [50, 50]}
+            minSize={[180, 320]}
+            gutterSize={4}
+            gutterAlign="center"
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              width: "100%",
+              height: "100%",
+            }}
+            onDragEnd={(e) => saveSplit("testHorizontal", e)}
+          >
+            <Box css={{ width: "55%", px: "$2" }}>
+              <Tabs
+                keepAllAlive
+                forceDefaultExtension
+                defaultExtension=".json"
+                onCreateNewTab={(name) =>
+                  setTabHeaders(tabHeaders.concat(name))
+                }
+                onCloseTab={(index) =>
+                  setTabHeaders(tabHeaders.filter((_, idx) => idx !== index))
+                }
+              >
+                {tabHeaders.map((header) => (
+                  <Tab key={header} header={header}>
+                    <Transaction header={header} />
+                  </Tab>
+                ))}
+              </Tabs>
+            </Box>
+            <Box css={{ width: "45%", mx: "$2", height: "100%" }}>
+              <Accounts card hideDeployBtn showHookStats />
+            </Box>
+          </Split>
+        </Flex>
+
+        <Flex row fluid>
+          <Split
+            direction="horizontal"
+            sizes={[50, 50]}
+            minSize={[320, 160]}
+            gutterSize={4}
+            gutterAlign="center"
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              width: "100%",
+              height: "100%",
+            }}
+          >
+            <Box
+              css={{
+                borderRight: "1px solid $mauve8",
+                height: "100%",
+              }}
+            >
+              <LogBox
+                title="Development Log"
+                logs={transactionLogs}
+                clearLog={() => (state.transactionLogs = [])}
+              />
+            </Box>
+            <Box css={{ height: "100%" }}>
+              <DebugStream />
+            </Box>
+          </Split>
+        </Flex>
+      </Split>
+    </Container>
+  );
 };
 
 export default Test;

patches/ripple-binary-codec+1.2.0.patch

@@ -1,377 +0,0 @@
-diff --git a/node_modules/ripple-binary-codec/dist/enums/definitions.json b/node_modules/ripple-binary-codec/dist/enums/definitions.json
-index 2333c42..99557cb 100644
---- a/node_modules/ripple-binary-codec/dist/enums/definitions.json
-+++ b/node_modules/ripple-binary-codec/dist/enums/definitions.json
-@@ -1,3 +1,4 @@
-+
- {
-   "TYPES": {
-     "Validation": 10003,
-@@ -40,8 +41,7 @@
-     "Check": 67,
-     "Nickname": 110,
-     "Contract": 99,
--    "NFTokenPage": 80,
--    "NFTokenOffer": 55,
-+    "GeneratorMap": 103,
-     "NegativeUNL": 78
-   },
-   "FIELDS": [
-@@ -95,16 +95,6 @@
-         "type": "UInt16"
-       }
-     ],
--    [
--      "TransferFee",
--      {
--        "nth": 4,
--        "isVLEncoded": false,
--        "isSerialized": true,
--        "isSigningField": true,
--        "type": "UInt16"
--      }
--    ],
-     [
-       "Flags",
-       {
-@@ -455,6 +445,16 @@
-         "type": "UInt32"
-       }
-     ],
-+    [
-+      "EmitGeneration",
-+      {
-+        "nth": 43,
-+        "isVLEncoded": false,
-+        "isSerialized": true,
-+        "isSigningField": true,
-+        "type": "UInt32"
-+      }
-+    ],
-     [
-       "IndexNext",
-       {
-@@ -635,16 +635,6 @@
-         "type": "Hash256"
-       }
-     ],
--    [
--      "TokenID",
--      {
--        "nth": 10,
--        "isVLEncoded": false,
--        "isSerialized": true,
--        "isSigningField": true,
--        "type": "Hash256"
--      }
--    ],
-     [
-       "BookDirectory",
-       {
-@@ -916,7 +906,7 @@
-       }
-     ],
-     [
--      "URI",
-+      "Generator",
-       {
-         "nth": 5,
-         "isVLEncoded": true,
-@@ -1156,7 +1146,7 @@
-       }
-     ],
-     [
--      "Minter",
-+      "EmitCallback",
-       {
-         "nth": 9,
-         "isVLEncoded": true,
-@@ -1276,9 +1266,9 @@
-       }
-     ],
-     [
--      "NonFungibleToken",
-+      "Signer",
-       {
--        "nth": 12,
-+        "nth": 16,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1286,9 +1276,9 @@
-       }
-     ],
-     [
--      "Signer",
-+      "Majority",
-       {
--        "nth": 16,
-+        "nth": 18,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1296,9 +1286,9 @@
-       }
-     ],
-     [
--      "Majority",
-+      "DisabledValidator",
-       {
--        "nth": 18,
-+        "nth": 19,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1306,9 +1296,9 @@
-       }
-     ],
-     [
--      "DisabledValidator",
-+      "EmitDetails",
-       {
--        "nth": 19,
-+        "nth": 12,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1395,16 +1385,6 @@
-         "type": "STArray"
-       }
-     ],
--    [
--      "NonFungibleTokens",
--      {
--        "nth": 10,
--        "isVLEncoded": false,
--        "isSerialized": true,
--        "isSigningField": true,
--        "type": "STArray"
--      }
--    ],
-     [
-       "Majorities",
-       {
-@@ -1535,16 +1515,6 @@
-         "type": "Vector256"
-       }
-     ],
--    [
--      "TokenIDs",
--      {
--        "nth": 4,
--        "isVLEncoded": true,
--        "isSerialized": true,
--        "isSigningField": true,
--        "type": "Vector256"
--      }
--    ],
-     [
-       "Transaction",
-       {
-@@ -1616,9 +1586,9 @@
-       }
-     ],
-     [
--      "TokenTaxon",
-+      "HookStateCount",
-       {
--        "nth": 42,
-+        "nth": 40,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1626,9 +1596,9 @@
-       }
-     ],
-     [
--      "MintedTokens",
-+      "HookReserveCount",
-       {
--        "nth": 43,
-+        "nth": 41,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1636,9 +1606,9 @@
-       }
-     ],
-     [
--      "BurnedTokens",
-+      "HookDataMaxSize",
-       {
--        "nth": 44,
-+        "nth": 42,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1646,29 +1616,29 @@
-       }
-     ],
-     [
--      "Channel",
-+      "HookOn",
-       {
--        "nth": 22,
-+        "nth": 16,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
--        "type": "Hash256"
-+        "type": "UInt64"
-       }
-     ],
-     [
--      "ConsensusHash",
-+      "EmitBurden",
-       {
--        "nth": 23,
-+        "nth": 12,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
--        "type": "Hash256"
-+        "type": "UInt64"
-       }
-     ],
-     [
--      "CheckID",
-+      "Channel",
-       {
--        "nth": 24,
-+        "nth": 22,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1676,9 +1646,9 @@
-       }
-     ],
-     [
--      "ValidatedHash",
-+      "ConsensusHash",
-       {
--        "nth": 25,
-+        "nth": 23,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1686,9 +1656,9 @@
-       }
-     ],
-     [
--      "PreviousPageMin",
-+      "CheckID",
-       {
--        "nth": 26,
-+        "nth": 24,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1696,9 +1666,9 @@
-       }
-     ],
-     [
--      "NextPageMin",
-+      "ValidatedHash",
-       {
--        "nth": 27,
-+        "nth": 25,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1706,9 +1676,9 @@
-       }
-     ],
-     [
--      "BuyOffer",
-+      "EmitParentTxnID",
-       {
--        "nth": 28,
-+        "nth": 10,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1716,9 +1686,9 @@
-       }
-     ],
-     [
--      "SellOffer",
-+      "EmitNonce",
-       {
--        "nth": 29,
-+        "nth": 11,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1754,36 +1724,6 @@
-         "isSigningField": true,
-         "type": "UInt64"
-       }
--    ],
--    [
--      "Cookie",
--      {
--        "nth": 10,
--        "isVLEncoded": false,
--        "isSerialized": true,
--        "isSigningField": true,
--        "type": "UInt64"
--      }
--    ],
--    [
--      "ServerVersion",
--      {
--        "nth": 11,
--        "isVLEncoded": false,
--        "isSerialized": true,
--        "isSigningField": true,
--        "type": "UInt64"
--      }
--    ],
--    [
--      "OfferNode",
--      {
--        "nth": 12,
--        "isVLEncoded": false,
--        "isSerialized": true,
--        "isSigningField": true,
--        "type": "UInt64"
--      }
-     ]
-   ],
-   "TRANSACTION_RESULTS": {
-@@ -1908,18 +1848,7 @@
-     "tecDUPLICATE": 149,
-     "tecKILLED": 150,
-     "tecHAS_OBLIGATIONS": 151,
--    "tecTOO_SOON": 152,
--
--    "tecMAX_SEQUENCE_REACHED": 154,
--    "tecNO_SUITABLE_PAGE": 155,
--    "tecBUY_SELL_MISMATCH": 156,
--    "tecOFFER_TYPE_MISMATCH": 157,
--    "tecCANT_ACCEPT_OWN_OFFER": 158,
--    "tecINSUFFICIENT_FUNDS": 159,
--    "tecOBJECT_NOT_FOUND": 160,
--    "tecINSUFFICIENT_PAYMENT": 161,
--    "tecINCORRECT_ASSET": 162,
--    "tecTOO_MANY": 163
-+    "tecTOO_SOON": 152
-   },
-   "TRANSACTION_TYPES": {
-     "Invalid": -1,
-@@ -1946,11 +1875,10 @@
-     "DepositPreauth": 19,
-     "TrustSet": 20,
-     "AccountDelete": 21,
--    "NFTokenMint": 25,
--    "NFTokenBurn": 26,
--    "NFTokenCreateOffer": 27,
--    "NFTokenCancelOffer": 28,
--    "NFTokenAcceptOffer": 29,
-+    "SetHook": 22,
-+    "Invoke": 23,
-+    "Batch": 24,
-+
-     "EnableAmendment": 100,
-     "SetFee": 101,
-     "UNLModify": 102

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#161618</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/safari-pinned-tab.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="588.000000pt" height="588.000000pt" viewBox="0 0 588.000000 588.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,588.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3843 4097 c-381 -380 -737 -736 -791 -790 l-99 -99 -940 1 -940 0
+-204 -211 c-112 -116 -228 -235 -257 -265 -29 -30 -51 -57 -48 -60 2 -3 542
+-5 1198 -5 l1193 0 799 -799 799 -799 380 0 c209 0 378 2 376 5 -2 2 -422 423
+-933 934 l-928 929 921 920 c507 507 921 923 921 927 0 3 -170 5 -377 5 l-378
+0 -692 -693z"/>
+</g>
+</svg>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Hooks Builder",
+    "short_name": "Hooks Builder",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#161618",
+    "background_color": "#161618",
+    "display": "standalone"
+}

public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

raw-loader.d.ts

@@ -0,0 +1,4 @@
+declare module "*.md" {
+  const content: string;
+  export default content;
+};

state/actions/addFaucetAccount.ts

@@ -1,4 +1,4 @@
-import Router from "next/router";
+
 import toast from "react-hot-toast";
 import state, { FaucetAccountRes } from '../index';
 
@@ -29,14 +29,13 @@ export const names = [
  */
 export const addFaucetAccount = async (showToast: boolean = false) => {
   // Lets limit the number of faucet accounts to 5 for now
-  if (state.accounts.length > 4) {
+  if (state.accounts.length > 5) {
-    return toast.error("You can only have maximum 5 accounts");
+    return toast.error("You can only have maximum 6 accounts");
   }
   if (typeof window !== 'undefined') {
 
 
     const toastId = showToast ? toast.loading("Creating account") : "";
-    console.log(Router)
     const res = await fetch(`${window.location.origin}/api/faucet`, {
       method: "POST",
     });
@@ -51,14 +50,16 @@ export const addFaucetAccount = async (showToast: boolean = false) => {
       if (showToast) {
         toast.success("New account created", { id: toastId });
       }
+      const currNames = state.accounts.map(acc => acc.name);
       state.accounts.push({
-        name: names[state.accounts.length],
+        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'
       });
     }
   }
@@ -74,4 +75,22 @@ export const addFaucetAccount = async (showToast: boolean = false) => {
       }, 10000);
     }
   }
-})();
+})();
+
+export const addFunds = async (address: string) => {
+  const toastId = toast.loading("Requesting funds");
+  const res = await fetch(`${window.location.origin}/api/faucet?account=${address}`, {
+    method: "POST",
+  });
+  const json: FaucetAccountRes | { error: string } = await res.json();
+  if ("error" in json) {
+    return toast.error(json.error, { id: toastId });
+  } else {
+    toast.success(`Funds added (${json.xrp} XRP)`, { id: toastId });
+    const currAccount = state.accounts.find(acc => acc.address === address);
+    if (currAccount) {
+      currAccount.xrp = (Number(currAccount.xrp) + (json.xrp * 1000000)).toString();
+    }
+  }
+
+}

state/actions/compileCode.ts

@@ -25,6 +25,7 @@ export const compileCode = async (activeId: number) => {
   }
   // Set loading state to true
   state.compiling = true;
+  state.logs = []
   try {
     const res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
       method: "POST",
@@ -38,7 +39,6 @@ export const compileCode = async (activeId: number) => {
           {
             type: "c",
             name: state.files[activeId].name,
-            options: "-O0",
             src: state.files[activeId].content,
           },
         ],
@@ -66,6 +66,7 @@ export const compileCode = async (activeId: number) => {
     // Decode base64 encoded wasm that is coming back from the endpoint
     const bufferData = await decodeBinary(json.output);
     state.files[state.active].compiledContent = ref(bufferData);
+    state.files[state.active].lastCompiled = new Date();
     // Import wabt from and create human readable version of wasm file and
     // put it into state
     import("wabt").then((wabt) => {
@@ -87,4 +88,4 @@ export const compileCode = async (activeId: number) => {
     });
     state.compiling = false;
   }
-};
+};

state/actions/createNewFile.ts

@@ -1,8 +1,17 @@
 import state, { IFile } from '../index';
 
-/* Initializes empty file to global state */
+const languageMapping = {
+  'ts': 'typescript',
+  'js': 'javascript',
+  'md': 'markdown',
+  'c': 'c',
+  'h': 'c',
+  'other': ''
+} /* Initializes empty file to global state */
 export const createNewFile = (name: string) => {
-  const emptyFile: IFile = { name, language: "c", content: "" };
+  const tempName = name.split('.');
+  const fileExt = tempName[tempName.length - 1] || 'other';
+  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;
 };

state/actions/deployHook.ts

@@ -1,6 +1,20 @@
 import { derive, sign } from "xrpl-accountlib";
+import toast from "react-hot-toast";
 
 import state, { IAccount } from "../index";
+import calculateHookOn, { TTS } from "../../utils/hookOnCalculator";
+import { SetHookData } from "../../components/SetHookDialog";
+
+const hash = 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'))
+    .join('');
+  return hashHex;
+}
+
 
 function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
   if (!arrayBuffer) {
@@ -30,7 +44,7 @@ function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
  * hex string, signs the transaction and deploys it to
  * Hooks testnet.
  */
-export const deployHook = async (account: IAccount & { name?: string }) => {
+export const deployHook = async (account: IAccount & { name?: string }, data: SetHookData) => {
   if (
     !state.files ||
     state.files.length === 0 ||
@@ -45,17 +59,44 @@ export const deployHook = async (account: IAccount & { name?: string }) => {
   if (!state.client) {
     return;
   }
+  const HookNamespace = await hash(arrayBufferToHex(
+    state.files?.[state.active]?.compiledContent
+  ).toUpperCase());
+  const hookOnValues: (keyof TTS)[] = data.Invoke.map(tt => tt.value);
+  const { HookParameters } = data;
+  const filteredHookParameters = HookParameters.filter(hp => hp.HookParameter.HookParameterName && hp.HookParameter.HookParameterValue);
+  // const filteredHookGrants = HookGrants.filter(hg => hg.HookGrant.Authorize || hg.HookGrant.HookHash).map(hg => {
+  //   return {
+  //     HookGrant: {
+  //       ...(hg.HookGrant.Authorize && { Authorize: hg.HookGrant.Authorize }),
+  //       // HookHash: hg.HookGrant.HookHash || undefined
+  //       ...(hg.HookGrant.HookHash && { HookHash: hg.HookGrant.HookHash })
+  //     }
+  //   }
+  // });
   if (typeof window !== "undefined") {
     const tx = {
       Account: account.address,
       TransactionType: "SetHook",
-      CreateCode: arrayBufferToHex(
-        state.files?.[state.active]?.compiledContent
-      ).toUpperCase(),
-      HookOn: "0000000000000000",
       Sequence: account.sequence,
-      Fee: "1000",
+      Fee: "100000",
+      Hooks: [
+        {
+          Hook: {
+            CreateCode: arrayBufferToHex(
+              state.files?.[state.active]?.compiledContent
+            ).toUpperCase(),
+            HookOn: calculateHookOn(hookOnValues),
+            HookNamespace,
+            HookApiVersion: 0,
+            Flags: 1,
+            // ...(filteredHookGrants.length > 0 && { HookGrants: filteredHookGrants }),
+            ...(filteredHookParameters.length > 0 && { HookParameters: filteredHookParameters }),
+          }
+        }
+      ]
     };
+
     const keypair = derive.familySeed(account.secret);
     const { signedTransaction } = sign(tx, keypair);
     const currentAccount = state.accounts.find(
@@ -64,11 +105,13 @@ export const deployHook = async (account: IAccount & { name?: string }) => {
     if (currentAccount) {
       currentAccount.isLoading = true;
     }
+    let submitRes;
     try {
-      const submitRes = await state.client.send({
+      submitRes = await state.client.send({
         command: "submit",
         tx_blob: signedTransaction,
       });
+
       if (submitRes.engine_result === "tesSUCCESS") {
         state.deployLogs.push({
           type: "success",
@@ -81,7 +124,7 @@ export const deployHook = async (account: IAccount & { name?: string }) => {
       } else {
         state.deployLogs.push({
           type: "error",
-          message: `[${submitRes.engine_result}] ${submitRes.engine_result_message}`,
+          message: `[${submitRes.engine_result || submitRes.error}] ${submitRes.engine_result_message || submitRes.error_exception}`,
         });
       }
     } catch (err) {
@@ -94,5 +137,75 @@ export const deployHook = async (account: IAccount & { name?: string }) => {
     if (currentAccount) {
       currentAccount.isLoading = false;
     }
+    return submitRes;
+  }
+};
+
+export const deleteHook = async (account: IAccount & { name?: string }) => {
+  if (!state.client) {
+    return;
+  }
+
+  if (typeof window !== "undefined") {
+    const tx = {
+      Account: account.address,
+      TransactionType: "SetHook",
+      Sequence: account.sequence,
+      Fee: "1000000",
+      Hooks: [
+        {
+          Hook: {
+            CreateCode: "",
+            Flags: 1,
+          }
+        }
+      ]
+    };
+
+    const keypair = derive.familySeed(account.secret);
+    const { signedTransaction } = sign(tx, keypair);
+    const currentAccount = state.accounts.find(
+      (acc) => acc.address === account.address
+    );
+    if (currentAccount) {
+      currentAccount.isLoading = true;
+    }
+    let submitRes;
+    const toastId = toast.loading("Deleting hook...");
+    try {
+      submitRes = await state.client.send({
+        command: "submit",
+        tx_blob: signedTransaction,
+      });
+
+      if (submitRes.engine_result === "tesSUCCESS") {
+        toast.success('Hook deleted successfully ✅', { id: toastId })
+        state.deployLogs.push({
+          type: "success",
+          message: "Hook deleted successfully ✅",
+        });
+        state.deployLogs.push({
+          type: "success",
+          message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`,
+        });
+      } else {
+        toast.error(`${submitRes.engine_result_message || submitRes.error_exception}`, { id: toastId })
+        state.deployLogs.push({
+          type: "error",
+          message: `[${submitRes.engine_result || submitRes.error}] ${submitRes.engine_result_message || submitRes.error_exception}`,
+        });
+      }
+    } catch (err) {
+      console.log(err);
+      toast.error('Error occured while deleting hoook', { id: toastId })
+      state.deployLogs.push({
+        type: "error",
+        message: "Error occured while deleting hook",
+      });
+    }
+    if (currentAccount) {
+      currentAccount.isLoading = false;
+    }
+    return submitRes;
   }
 };

state/actions/fetchFiles.ts

@@ -1,6 +1,8 @@
 import { Octokit } from "@octokit/core";
 import Router from "next/router";
 import state from '../index';
+import { templateFileIds } from '../constants';
+
 
 const octokit = new Octokit();
 
@@ -17,6 +19,17 @@ export const fetchFiles = (gistId: string) => {
 
     octokit
       .request("GET /gists/{gist_id}", { gist_id: gistId })
+      .then(res => {
+        if (!Object.values(templateFileIds).includes(gistId)) {
+          return res
+        }
+        // in case of templates, fetch header file(s) and append to res
+        return octokit.request("GET /gists/{gist_id}", { gist_id: templateFileIds.headers }).then(({ data: { files: headerFiles } }) => {
+          const files = { ...res.data.files, ...headerFiles }
+          res.data.files = files
+          return res
+        })
+      })
       .then((res) => {
         if (res.data.files && Object.keys(res.data.files).length > 0) {
           const files = Object.keys(res.data.files).map((filename) => ({
@@ -44,6 +57,7 @@ export const fetchFiles = (gistId: string) => {
         state.loading = false;
       })
       .catch((err) => {
+        // console.error(err)
         state.loading = false;
         state.logs.push({
           type: "error",

state/actions/index.ts

@@ -8,6 +8,7 @@ import { saveFile } from "./saveFile";
 import { syncToGist } from "./syncToGist";
 import { updateEditorSettings } from "./updateEditorSettings";
 import { downloadAsZip } from "./downloadAsZip";
+import { sendTransaction } from "./sendTransaction";
 
 export {
   addFaucetAccount,
@@ -19,5 +20,6 @@ export {
   saveFile,
   syncToGist,
   updateEditorSettings,
-  downloadAsZip
+  downloadAsZip,
+  sendTransaction
 };

state/actions/persistSplits.ts

@@ -0,0 +1,15 @@
+import { snapshot } from "valtio"
+import state from ".."
+
+export type SplitSize = number[]
+
+export const saveSplit = (splitId: string, event: SplitSize) => {
+  state.splits[splitId] = event
+}
+
+export const getSplit = (splitId: string): SplitSize | null => {
+  const { splits } = snapshot(state)
+  const split = splits[splitId]
+  return split ? split : null
+}
+

state/actions/saveFile.ts

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

state/actions/sendTransaction.ts

@@ -0,0 +1,57 @@
+import { derive, sign } from "xrpl-accountlib";
+
+import state from '..'
+import type { IAccount } from "..";
+
+interface TransactionOptions {
+    TransactionType: string,
+    Account?: string,
+    Fee?: string,
+    Destination?: string
+    [index: string]: any
+}
+interface OtherOptions {
+    logPrefix?: string
+}
+
+export const sendTransaction = async (account: IAccount, txOptions: TransactionOptions, options?: OtherOptions) => {
+    if (!state.client) throw Error('XRPL client not initalized')
+
+    const { Fee = "1000", ...opts } = txOptions
+    const tx: TransactionOptions = {
+        Account: account.address,
+        Sequence: account.sequence, // TODO auto-fillable
+        Fee,  // TODO auto-fillable
+        ...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);
+        const { signedTransaction } = sign(tx, signedAccount);
+        const response = await state.client.send({
+            command: "submit",
+            tx_blob: signedTransaction,
+        });
+        if (response.engine_result === "tesSUCCESS") {
+            state.transactionLogs.push({
+                type: 'success',
+                message: `${logPrefix}[${response.engine_result}] ${response.engine_result_message}`
+            })
+        } else {
+            state.transactionLogs.push({
+                type: "error",
+                message: `${logPrefix}[${response.error || response.engine_result}] ${response.error_exception || response.engine_result_message}`,
+            });
+        }
+    } catch (err) {
+        console.error(err);
+        state.transactionLogs.push({
+            type: "error",
+            message: err instanceof Error ? `${logPrefix}Error: ${err.message}` : `${logPrefix}Something went wrong, try again later`,
+        });
+    }
+};

state/constants/index.ts

@@ -0,0 +1 @@
+export * from './templates'

state/constants/templates.ts

@@ -0,0 +1,21 @@
+// export const templateFileIds = {
+//     'starter': '1d14e51e2e02dc0a508cb0733767a914', // TODO currently same as accept
+//     'firewall': 'bcd6d0c0fcbe52545ddb802481ff9d26',
+//     'notary': 'a789c75f591eeab7932fd702ed8cf9ea',
+//     'carbon': '43925143fa19735d8c6505c34d3a6a47',
+//     'peggy': 'ceaf352e2a65741341033ab7ef05c448',
+//     'headers': '9b448e8a55fab11ef5d1274cb59f9cf3'
+// }
+
+export const templateFileIds = {
+    'starter': '1f7d2963d9e342ea092286115274f3e3',
+    'firewall': '70edec690f0de4dd315fad1f4f996d8c',
+    'notary': '3d5677768fe8a54c4f6317e185d9ba66',
+    'carbon': 'a9fbcaf1b816b198c7fc0f62962bebf2',
+    'doubler': '56b86174aeb70b2b48eee962bad3e355',
+    'peggy': 'd21298a37e1550b781682014762a567b',
+    'headers': '9b448e8a55fab11ef5d1274cb59f9cf3'
+
+}
+
+export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'hookmacro.h']

state/index.ts

@@ -1,7 +1,13 @@
-import { proxy, ref, subscribe } from "valtio";
-import { devtools } from 'valtio/utils'
 import type monaco from "monaco-editor";
+import { proxy, ref, subscribe } from "valtio";
+import { devtools } from 'valtio/utils';
 import { XrplClient } from "xrpl-client";
+import { SplitSize } from "./actions/persistSplits";
+
+declare module "valtio" {
+  function useSnapshot<T extends object>(p: T): T;
+  function snapshot<T extends object>(p: T): T;
+}
 
 export interface IFile {
   name: string;
@@ -9,6 +15,7 @@ export interface IFile {
   content: string;
   compiledContent?: ArrayBuffer | null;
   compiledWatContent?: string | null;
+  lastCompiled?: Date
 }
 
 export interface FaucetAccountRes {
@@ -27,13 +34,17 @@ export interface IAccount {
   sequence: number;
   hooks: string[];
   isLoading: boolean;
+  version?: string;
 }
 
 export interface ILog {
   type: "error" | "warning" | "log" | "success";
   message: string;
+  jsonData?: any,
+  timestamp?: string;
   link?: string;
   linkText?: string;
+  defaultCollapsed?: boolean
 }
 
 export interface IState {
@@ -49,25 +60,33 @@ export interface IState {
   compiling: boolean;
   logs: ILog[];
   deployLogs: ILog[];
+  transactionLogs: ILog[];
   editorCtx?: typeof monaco.editor;
   editorSettings: {
     tabSize: number;
   };
+  splits: {
+    [id: string]: SplitSize
+  };
   client: XrplClient | null;
   clientStatus: "offline" | "online";
   mainModalOpen: boolean;
+  mainModalShowed: boolean;
   accounts: IAccount[];
 }
 
 // let localStorageState: null | string = null;
 let initialState: IState = {
   files: [],
+  // active file index on the Develop page editor
   active: 0,
+  // Active file index on the Deploy page editor
   activeWat: 0,
   loading: false,
   compiling: false,
   logs: [],
   deployLogs: [],
+  transactionLogs: [],
   editorCtx: undefined,
   gistId: undefined,
   gistOwner: undefined,
@@ -77,14 +96,19 @@ let initialState: IState = {
   editorSettings: {
     tabSize: 2,
   },
+  splits: {},
   client: null,
   clientStatus: "offline" as "offline",
   mainModalOpen: false,
+  mainModalShowed: false,
   accounts: [],
 };
 
 let localStorageAccounts: string | null = null;
 let initialAccounts: IAccount[] = [];
+
+// TODO: What exactly should we store in localStorage? editorSettings, splits, accounts?
+
 // Check if there's a persited accounts in localStorage
 if (typeof window !== "undefined") {
   try {
@@ -96,6 +120,8 @@ if (typeof window !== "undefined") {
   if (localStorageAccounts) {
     initialAccounts = JSON.parse(localStorageAccounts);
   }
+  // filter out old accounts (they do not have version property at all)
+  initialAccounts = initialAccounts.filter(acc => acc.version === '2');
 }
 
 // Initialize state
@@ -104,9 +130,8 @@ const state = proxy<IState>({
   accounts: initialAccounts.length > 0 ? initialAccounts : [],
   logs: [],
 });
-
 // Initialize socket connection
-const client = new XrplClient("wss://hooks-testnet.xrpl-labs.com");
+const client = new XrplClient(`wss://${process.env.NEXT_PUBLIC_TESTNET_URL}`);
 
 client.on("online", () => {
   state.client = ref(client);
@@ -133,4 +158,4 @@ if (typeof window !== "undefined") {
     }
   });
 }
-export default state
+export default state

stitches.config.ts

@@ -1,28 +1,27 @@
 // stitches.config.ts
-import type Stitches from '@stitches/react';
+import type Stitches from "@stitches/react";
-import { createStitches } from '@stitches/react';
+import { createStitches } from "@stitches/react";
+
 import {
   gray,
   blue,
-  red,
+  crimson,
-  green,
+  grass,
-  plum,
   slate,
   mauve,
-  pink,
+  amber,
-  yellow,
   purple,
   grayDark,
   blueDark,
-  redDark,
+  crimsonDark,
-  greenDark,
+  grassDark,
-  plumDark,
   slateDark,
   mauveDark,
-  pinkDark,
+  amberDark,
-  yellowDark,
   purpleDark,
-} from '@radix-ui/colors';
+  red,
+  redDark,
+} from "@radix-ui/colors";
 
 export const {
   styled,
@@ -38,24 +37,30 @@ export const {
     colors: {
       ...gray,
       ...blue,
-      ...red,
+      ...crimson,
-      ...green,
+      ...grass,
-      ...plum,
       ...slate,
       ...mauve,
-      ...pink,
+      ...amber,
-      ...yellow,
       ...purple,
+      ...red,
+      accent: "#9D2DFF",
       background: "$gray1",
+      backgroundAlt: "$gray4",
       text: "$gray12",
+      textMuted: "$gray10",
       primary: "$plum",
+      error: '$red9',
+      warning: '$amber11',
+      success: "$grass11",
       white: "white",
-      black: "black"
+      black: "black",
+      deep: "rgb(244, 244, 244)",
     },
     fonts: {
       body: 'Work Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
-      heading: 'Work Sans, sans-serif',
+      heading: "Work Sans, sans-serif",
-      monospace: 'Roboto Mono, monospace',
+      monospace: "Roboto Mono, monospace",
     },
     fontSizes: {
       xs: "0.6875rem",
@@ -71,7 +76,7 @@ export const {
       "7xl": "4.5rem",
       "8xl": "6rem",
       "9xl": "8rem",
-      default: '$md'
+      default: "$md",
     },
     space: {
       px: "1px",
@@ -107,15 +112,15 @@ export const {
       72: "18rem",
       80: "20rem",
       96: "24rem",
-      "widePlus": '2048px',
+      widePlus: "2048px",
-      "wide": '1536px',
+      wide: "1536px",
-      "layoutPlus": '1260px',
+      layoutPlus: "1260px",
-      "layout": '1024px',
+      layout: "1024px",
-      "copyUltra": '980px',
+      copyUltra: "980px",
-      "copyPlus": '768px',
+      copyPlus: "768px",
-      "copy": '680px',
+      copy: "680px",
-      "narrowPlus": '600px',
+      narrowPlus: "600px",
-      "narrow": '512px',
+      narrow: "512px",
       xs: "20rem",
       sm: "24rem",
       md: "28rem",
@@ -215,62 +220,112 @@ export const {
     lg: "(min-width: 62em)",
     xl: "(min-width: 80em)",
     "2xl": "(min-width: 96em)",
-    hover: '(any-hover: hover)',
+    hover: "(any-hover: hover)",
-    dark: '(prefers-color-scheme: dark)',
+    dark: "(prefers-color-scheme: dark)",
-    light: '(prefers-color-scheme: light)',
+    light: "(prefers-color-scheme: light)",
   },
   utils: {
     // Abbreviated margin properties
-    m: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'margin'>) => ({
+    m: (
+      value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"margin">
+    ) => ({
       margin: value,
     }),
-    mt: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginTop'>) => ({
+    mt: (
+      value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"marginTop">
+    ) => ({
       marginTop: value,
     }),
-    mr: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginRight'>) => ({
+    mr: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"marginRight">
+    ) => ({
       marginRight: value,
     }),
-    mb: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginBottom'>) => ({
+    mb: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"marginBottom">
+    ) => ({
       marginBottom: value,
     }),
-    ml: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginLeft'>) => ({
+    ml: (
+      value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"marginLeft">
+    ) => ({
       marginLeft: value,
     }),
-    mx: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginLeft' | 'marginRight'>) => ({
+    mx: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"marginLeft" | "marginRight">
+    ) => ({
       marginLeft: value,
       marginRight: value,
     }),
-    my: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginTop' | 'marginBottom'>) => ({
+    my: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"marginTop" | "marginBottom">
+    ) => ({
       marginTop: value,
       marginBottom: value,
     }),
     // Abbreviated margin properties
-    p: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'padding'>) => ({
+    p: (
+      value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"padding">
+    ) => ({
       padding: value,
     }),
-    pt: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingTop'>) => ({
+    pt: (
+      value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"paddingTop">
+    ) => ({
       paddingTop: value,
     }),
-    pr: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingRight'>) => ({
+    pr: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"paddingRight">
+    ) => ({
       paddingRight: value,
     }),
-    pb: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingBottom'>) => ({
+    pb: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"paddingBottom">
+    ) => ({
       paddingBottom: value,
     }),
-    pl: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingLeft'>) => ({
+    pl: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"paddingLeft">
+    ) => ({
       paddingLeft: value,
     }),
-    px: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingLeft' | 'paddingRight'>) => ({
+    px: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"paddingLeft" | "paddingRight">
+    ) => ({
       paddingLeft: value,
       paddingRight: value,
     }),
-    py: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingTop' | 'paddingBottom'>) => ({
+    py: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"paddingTop" | "paddingBottom">
+    ) => ({
       paddingTop: value,
       paddingBottom: value,
     }),
 
     // A property for applying width/height together
-    size: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'width' | 'height'>) => ({
+    size: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"width" | "height">
+    ) => ({
       width: value,
       height: value,
     }),
@@ -279,45 +334,45 @@ export const {
     // }),
 
     // A property to apply linear gradient
-    linearGradient: (value: Stitches.ScaleValue<'space'>) => ({
+    linearGradient: (value: Stitches.ScaleValue<"space">) => ({
       backgroundImage: `linear-gradient(${value})`,
     }),
 
     // An abbreviated property for border-radius
-    br: (value: Stitches.ScaleValue<'space'>) => ({
+    br: (value: Stitches.ScaleValue<"space">) => ({
       borderRadius: value,
     }),
   },
-
 });
 
-export const darkTheme = createTheme('dark', {
+export const darkTheme = createTheme("dark", {
   colors: {
     ...grayDark,
     ...blueDark,
-    ...redDark,
+    ...crimsonDark,
-    ...greenDark,
+    ...grassDark,
-    ...plumDark,
     ...slateDark,
     ...mauveDark,
-    ...pinkDark,
+    ...amberDark,
-    ...yellowDark,
     ...purpleDark,
+    ...redDark,
+    deep: "rgb(10, 10, 10)",
+    // backgroundA: transparentize(0.1, grayDark.gray1),
   },
 });
 
 export const globalStyles = globalCss({
   // body: { backgroundColor: '$background', color: '$text', fontFamily: 'Helvetica' },
-  'html, body': {
+  "html, body": {
-    backgroundColor: '$gray1',
+    backgroundColor: "$mauve2",
-    color: '$gray12',
+    color: "$mauve12",
-    fontFamily: '$body',
+    fontFamily: "$body",
-    fontSize: '$md',
+    fontSize: "$md",
-    '-webkit-font-smoothing': 'antialiased',
+    "-webkit-font-smoothing": "antialiased",
-    '-moz-osx-font-smoothing': 'grayscale'
+    "-moz-osx-font-smoothing": "grayscale",
+  },
+  a: {
+    color: "inherit",
+    textDecoration: "none",
   },
-  'a': {
-    color: 'inherit',
-    textDecoration: 'none'
-  }
 });

styles/globals.css

@@ -6,8 +6,51 @@ body,
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  /* overflow-y: hidden; */
 }
 
 * {
   box-sizing: border-box;
 }
+
+.monaco-hover p {
+  margin-bottom: 10px !important;
+}
+
+.gutter {
+  position: relative;
+  transition: border-color 0.3s, background-color 0.3s;
+}
+
+.gutter-vertical {
+  margin-top: -4px;
+}
+.gutter-horizontal {
+  margin-left: -4px;
+}
+.gutter-vertical:hover {
+  cursor: row-resize;
+  background-color: rgba(255, 255, 255, 0.25);
+}
+html.light .gutter-vertical:hover {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+.gutter-horizontal:hover {
+  cursor: col-resize;
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+html.light .gutter-horizontal:hover {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+/* Adjust Monaco tooltip stylings */
+.markdown-hover h3 {
+  margin: 0;
+}
+.monaco-editor .monaco-hover hr {
+  margin: 8px 0;
+}
+.monaco-editor .monaco-hover {
+  z-index: 9999;
+}

theme/editor/amy.json

@@ -3,7 +3,7 @@
   "inherit": true,
   "rules": [
     {
-      "background": "1a1d1e",
+      "background": "161618",
       "token": ""
     },
     {
@@ -182,10 +182,10 @@
   ],
   "colors": {
     "editor.foreground": "#D0D0FF",
-    "editor.background": "#232326",
+    "editor.background": "#1C1C1F",
     "editor.selectionBackground": "#ffffff30",
     "editor.lineHighlightBackground": "#ffffff20",
     "editorCursor.foreground": "#7070FF",
     "editorWhitespace.foreground": "#BFBFBF"
   }
-}
+}

theme/editor/xcode_default.json

@@ -3,7 +3,7 @@
   "inherit": true,
   "rules": [
     {
-      "background": "FFFFFF",
+      "background": "F4F2F4",
       "token": ""
     },
     {
@@ -89,10 +89,10 @@
   ],
   "colors": {
     "editor.foreground": "#000000",
-    "editor.background": "#f4f2f4",
+    "editor.background": "#F9F8F9",
     "editor.selectionBackground": "#B5D5FF",
     "editor.lineHighlightBackground": "#00000012",
     "editorCursor.foreground": "#000000",
     "editorWhitespace.foreground": "#BFBFBF"
   }
-}
+}

tsconfig.json

@@ -26,6 +26,7 @@
     "**/*.tsx"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "*.md"
   ]
 }

utils/hookOnCalculator.ts

@@ -0,0 +1,41 @@
+export const tts = {
+  ttPAYMENT: 0,
+  ttESCROW_CREATE: 1,
+  ttESCROW_FINISH: 2,
+  ttACCOUNT_SET: 3,
+  ttESCROW_CANCEL: 4,
+  ttREGULAR_KEY_SET: 5,
+  ttOFFER_CREATE: 7,
+  ttOFFER_CANCEL: 8,
+  ttTICKET_CREATE: 10,
+  ttSIGNER_LIST_SET: 12,
+  ttPAYCHAN_CREATE: 13,
+  ttPAYCHAN_FUND: 14,
+  ttPAYCHAN_CLAIM: 15,
+  ttCHECK_CREATE: 16,
+  ttCHECK_CASH: 17,
+  ttCHECK_CANCEL: 18,
+  ttDEPOSIT_PREAUTH: 19,
+  ttTRUST_SET: 20,
+  ttACCOUNT_DELETE: 21,
+  ttHOOK_SET: 22
+};
+
+export type TTS = typeof tts;
+
+const calculateHookOn = (arr: (keyof TTS)[]) => {
+  let start = '0x00000000003ff5bf';
+  arr.forEach(n => {
+    let v = BigInt(start);
+    v ^= (BigInt(1) << BigInt(tts[n as keyof TTS]));
+    let s = v.toString(16);
+    let l = s.length;
+    if (l < 16)
+      s = '0'.repeat(16 - l) + s;
+    s = '0x' + s;
+    start = s;
+  })
+  return start.substring(2);
+}
+
+export default calculateHookOn

utils/json.ts

@@ -0,0 +1,21 @@
+export const extractJSON = (str?: string) => {
+    if (!str) return
+    let firstOpen = 0, firstClose = 0, candidate = '';
+    firstOpen = str.indexOf('{', firstOpen + 1);
+    do {
+        firstClose = str.lastIndexOf('}');
+        if (firstClose <= firstOpen) {
+            return;
+        }
+        do {
+            candidate = str.substring(firstOpen, firstClose + 1);
+            try {
+                let result = JSON.parse(candidate);
+                return { result, start: firstOpen < 0 ? 0 : firstOpen, end: firstClose }
+            }
+            catch (e) { }
+            firstClose = str.substring(0, firstClose).lastIndexOf('}');
+        } while (firstClose > firstOpen);
+        firstOpen = str.indexOf('{', firstOpen + 1);
+    } while (firstOpen != -1);
+}

utils/wat-highlight.ts

@@ -0,0 +1,714 @@
+// 'WebAssembly Text Format' Monarch language
+
+import type monaco from 'monaco-editor';
+
+const WebAssemblyTextLanguage: { config: monaco.languages.LanguageConfiguration, tokens: monaco.languages.IMonarchLanguage } = {
+  config: {
+    brackets: [
+      ["(", ")"],
+      ["if", "end"],
+      ["loop", "end"],
+      ["block", "end"],
+    ],
+    autoClosingPairs: [
+      { open: "(", close: ")" },
+      { open: "if", close: "end" },
+      { open: "loop", close: "end" },
+      { open: "block", close: "end" },
+    ],
+    surroundingPairs: [
+      { open: "(", close: ")" },
+      { open: "if", close: "end" },
+      { open: "loop", close: "end" },
+      { open: "block", close: "end" },
+    ],
+  },
+  tokens: {
+    keywords: [
+      "module",
+      "import",
+      "export",
+      "memory",
+      "data",
+      "table",
+      "elem",
+      "start",
+      "func",
+      "tag",
+      "type",
+      "param",
+      "result",
+      "global",
+      "local",
+      "mut",
+      "struct",
+      "array",
+      "field",
+    ],
+    types: [
+      "i8",
+      "i16",
+      "i32",
+      "i64",
+      "f32",
+      "f64",
+      "v128",
+      "i31ref",
+      "eqref",
+      "anyref",
+      "dataref",
+      "externref",
+      "funcref",
+      "exnref",
+      "extern",
+      "null",
+      "any",
+      "eq",
+    ],
+    instructions: [
+      "pop",
+      "nop",
+      "drop",
+      "data.drop",
+      "elem.drop",
+      "local.get",
+      "local.set",
+      "local.tee",
+      "global.get",
+      "global.set",
+      "tuple.make",
+      "tuple.extract",
+      "select",
+      "v128.const",
+      "v128.and",
+      "v128.or",
+      "v128.xor",
+      "v128.not",
+      "v128.andnot",
+      "v128.bitselect",
+      "v128.load",
+      "v128.load8x8_s",
+      "v128.load8x8_u",
+      "v128.load16x4_s",
+      "v128.load16x4_u",
+      "v128.load32x2_s",
+      "v128.load32x2_u",
+      "v128.load8_lane",
+      "v128.load16_lane",
+      "v128.load32_lane",
+      "v128.load64_lane",
+      "v128.load8_splat",
+      "v128.load16_splat",
+      "v128.load32_splat",
+      "v128.load64_splat",
+      "v128.load32_zero",
+      "v128.load64_zero",
+      "v128.store",
+      "v128.store8_lane",
+      "v128.store16_lane",
+      "v128.store32_lane",
+      "v128.store64_lane",
+      "v128.any_true",
+      "i8x16.shuffle",
+      "i8x16.swizzle",
+      "i8x16.bitmask",
+      "i8x16.splat",
+      "i8x16.popcnt",
+      "i8x16.replace_lane",
+      "i8x16.extract_lane_s",
+      "i8x16.extract_lane_u",
+      "i8x16.all_true",
+      "i8x16.abs",
+      "i8x16.add",
+      "i8x16.add_sat_s",
+      "i8x16.add_sat_u",
+      "i8x16.sub",
+      "i8x16.sub_sat_s",
+      "i8x16.sub_sat_u",
+      "i8x16.mul",
+      "i8x16.neg",
+      "i8x16.shl",
+      "i8x16.shr_s",
+      "i8x16.shr_u",
+      "i8x16.eq",
+      "i8x16.ne",
+      "i8x16.lt_s",
+      "i8x16.lt_u",
+      "i8x16.le_s",
+      "i8x16.le_u",
+      "i8x16.gt_s",
+      "i8x16.gt_u",
+      "i8x16.ge_s",
+      "i8x16.ge_u",
+      "i8x16.min_s",
+      "i8x16.min_u",
+      "i8x16.max_s",
+      "i8x16.max_u",
+      "i8x16.avgr_u",
+      "i8x16.narrow_i16x8_s",
+      "i8x16.narrow_i16x8_u",
+      "i16x8.bitmask",
+      "i16x8.splat",
+      "i16x8.load_8x8_s",
+      "i16x8.load_8x8_u",
+      "i16x8.replace_lane",
+      "i16x8.extract_lane_s",
+      "i16x8.extract_lane_u",
+      "i16x8.extend_low_i8x16_s",
+      "i16x8.extend_high_i8x16_s",
+      "i16x8.extend_low_i8x16_u",
+      "i16x8.extend_high_i8x16_u",
+      "i16x8.all_true",
+      "i16x8.abs",
+      "i16x8.add",
+      "i16x8.add_sat_s",
+      "i16x8.add_sat_u",
+      "i16x8.extadd_pairwise_i8x16_s",
+      "i16x8.extadd_pairwise_i8x16_u",
+      "i16x8.sub",
+      "i16x8.sub_sat_s",
+      "i16x8.sub_sat_u",
+      "i16x8.q15mulr_sat_s",
+      "i16x8.mul",
+      "i16x8.extmul_low_i8x16_s",
+      "i16x8.extmul_high_i8x16_s",
+      "i16x8.extmul_low_i8x16_u",
+      "i16x8.extmul_high_i8x16_u",
+      "i16x8.neg",
+      "i16x8.shl",
+      "i16x8.shr_s",
+      "i16x8.shr_u",
+      "i16x8.eq",
+      "i16x8.ne",
+      "i16x8.lt_s",
+      "i16x8.lt_u",
+      "i16x8.le_s",
+      "i16x8.le_u",
+      "i16x8.gt_s",
+      "i16x8.gt_u",
+      "i16x8.ge_s",
+      "i16x8.ge_u",
+      "i16x8.min_s",
+      "i16x8.min_u",
+      "i16x8.max_s",
+      "i16x8.max_u",
+      "i16x8.avgr_u",
+      "i16x8.narrow_i32x4_s",
+      "i16x8.narrow_i32x4_u",
+      "i32x4.bitmask",
+      "i32x4.splat",
+      "i32x4.load_16x4_s",
+      "i32x4.load_16x4_u",
+      "i32x4.replace_lane",
+      "i32x4.extract_lane",
+      "i32x4.extend_low_i16x8_s",
+      "i32x4.extend_high_i16x8_s",
+      "i32x4.extend_low_i16x8_u",
+      "i32x4.extend_high_i16x8_u",
+      "i32x4.all_true",
+      "i32x4.abs",
+      "i32x4.add",
+      "i32x4.extadd_pairwise_i16x8_s",
+      "i32x4.extadd_pairwise_i16x8_u",
+      "i32x4.sub",
+      "i32x4.mul",
+      "i32x4.extmul_low_i16x8_s",
+      "i32x4.extmul_high_i16x8_s",
+      "i32x4.extmul_low_i16x8_u",
+      "i32x4.extmul_high_i16x8_u",
+      "i32x4.neg",
+      "i32x4.shl",
+      "i32x4.shr_s",
+      "i32x4.shr_u",
+      "i32x4.eq",
+      "i32x4.ne",
+      "i32x4.lt_s",
+      "i32x4.lt_u",
+      "i32x4.le_s",
+      "i32x4.le_u",
+      "i32x4.gt_s",
+      "i32x4.gt_u",
+      "i32x4.ge_s",
+      "i32x4.ge_u",
+      "i32x4.min_s",
+      "i32x4.min_u",
+      "i32x4.max_s",
+      "i32x4.max_u",
+      "i32x4.trunc_sat_f32x4_s",
+      "i32x4.trunc_sat_f32x4_u",
+      "i32x4.trunc_sat_f64x2_s_zero",
+      "i32x4.trunc_sat_f64x2_u_zero",
+      "i32x4.dot_i16x8_s",
+      "i64x2.bitmask",
+      "i64x2.splat",
+      "i64x2.load32x2_s",
+      "i64x2.load32x2_u",
+      "i64x2.replace_lane",
+      "i64x2.extract_lane",
+      "i64x2.extend_low_i32x4_s",
+      "i64x2.extend_high_i32x4_s",
+      "i64x2.extend_low_i32x4_u",
+      "i64x2.extend_high_i32x4_u",
+      "i64x2.all_true",
+      "i64x2.abs",
+      "i64x2.add",
+      "i64x2.sub",
+      "i64x2.mul",
+      "i64x2.neg",
+      "i64x2.shl",
+      "i64x2.shr_s",
+      "i64x2.shr_u",
+      "f32x4.splat",
+      "f32x4.replace_lane",
+      "f32x4.extract_lane",
+      "f32x4.add",
+      "f32x4.sub",
+      "f32x4.mul",
+      "i64x2.extmul_low_i32x4_s",
+      "i64x2.extmul_high_i32x4_s",
+      "i64x2.extmul_low_i32x4_u",
+      "i64x2.extmul_high_i32x4_u",
+      "i64x2.eq",
+      "i64x2.ne",
+      "i64x2.lt_s",
+      "i64x2.le_s",
+      "i64x2.gt_s",
+      "i64x2.ge_s",
+      "f32x4.neg",
+      "f32x4.eq",
+      "f32x4.ne",
+      "f32x4.lt",
+      "f32x4.le",
+      "f32x4.gt",
+      "f32x4.ge",
+      "f32x4.abs",
+      "f32x4.min",
+      "f32x4.pmin",
+      "f32x4.max",
+      "f32x4.pmax",
+      "f32x4.div",
+      "f32x4.sqrt",
+      "f32x4.ceil",
+      "f32x4.floor",
+      "f32x4.trunc",
+      "f32x4.nearest",
+      "f32x4.demote_f64x2_zero",
+      "f32x4.convert_i32x4_s",
+      "f32x4.convert_i32x4_u",
+      "f64x2.splat",
+      "f64x2.replace_lane",
+      "f64x2.extract_lane",
+      "f64x2.add",
+      "f64x2.sub",
+      "f64x2.mul",
+      "f64x2.neg",
+      "f64x2.eq",
+      "f64x2.ne",
+      "f64x2.lt",
+      "f64x2.le",
+      "f64x2.gt",
+      "f64x2.ge",
+      "f64x2.abs",
+      "f64x2.min",
+      "f64x2.max",
+      "f64x2.pmin",
+      "f64x2.pmax",
+      "f64x2.div",
+      "f64x2.sqrt",
+      "f64x2.ceil",
+      "f64x2.floor",
+      "f64x2.trunc",
+      "f64x2.nearest",
+      "f64x2.promote_low_f32x4",
+      "f64x2.convert_low_i32x4_s",
+      "f64x2.convert_low_i32x4_u",
+      "i32.atomic.load",
+      "i32.atomic.load8_u",
+      "i32.atomic.load16_u",
+      "i32.atomic.store",
+      "i32.atomic.store8",
+      "i32.atomic.store16",
+      "i32.atomic.rmw.add",
+      "i32.atomic.rmw.sub",
+      "i32.atomic.rmw.and",
+      "i32.atomic.rmw.or",
+      "i32.atomic.rmw.xor",
+      "i32.atomic.rmw.xchg",
+      "i32.atomic.rmw.cmpxchg",
+      "i32.atomic.rmw8.add_u",
+      "i32.atomic.rmw8.sub_u",
+      "i32.atomic.rmw8.and_u",
+      "i32.atomic.rmw8.or_u",
+      "i32.atomic.rmw8.xor_u",
+      "i32.atomic.rmw8.xchg_u",
+      "i32.atomic.rmw8.cmpxchg_u",
+      "i32.atomic.rmw16.add_u",
+      "i32.atomic.rmw16.sub_u",
+      "i32.atomic.rmw16.and_u",
+      "i32.atomic.rmw16.or_u",
+      "i32.atomic.rmw16.xor_u",
+      "i32.atomic.rmw16.xchg_u",
+      "i32.atomic.rmw16.cmpxchg_u",
+      "i64.atomic.load",
+      "i64.atomic.load8_u",
+      "i64.atomic.load16_u",
+      "i64.atomic.load32_u",
+      "i64.atomic.store",
+      "i64.atomic.store8",
+      "i64.atomic.store16",
+      "i64.atomic.store32",
+      "i64.atomic.rmw.add",
+      "i64.atomic.rmw.sub",
+      "i64.atomic.rmw.and",
+      "i64.atomic.rmw.or",
+      "i64.atomic.rmw.xor",
+      "i64.atomic.rmw.xchg",
+      "i64.atomic.rmw.cmpxchg",
+      "i64.atomic.rmw8.add_u",
+      "i64.atomic.rmw8.sub_u",
+      "i64.atomic.rmw8.and_u",
+      "i64.atomic.rmw8.or_u",
+      "i64.atomic.rmw8.xor_u",
+      "i64.atomic.rmw8.xchg_u",
+      "i64.atomic.rmw8.cmpxchg_u",
+      "i64.atomic.rmw16.add_u",
+      "i64.atomic.rmw16.sub_u",
+      "i64.atomic.rmw16.and_u",
+      "i64.atomic.rmw16.or_u",
+      "i64.atomic.rmw16.xor_u",
+      "i64.atomic.rmw16.xchg_u",
+      "i64.atomic.rmw16.cmpxchg_u",
+      "i64.atomic.rmw32.add_u",
+      "i64.atomic.rmw32.sub_u",
+      "i64.atomic.rmw32.and_u",
+      "i64.atomic.rmw32.or_u",
+      "i64.atomic.rmw32.xor_u",
+      "i64.atomic.rmw32.xchg_u",
+      "i64.atomic.rmw32.cmpxchg_u",
+      "atomic.fence",
+      "func.bind",
+      "ref",
+      "ref.eq",
+      "ref.null",
+      "ref.is_null",
+      "ref.is_func",
+      "ref.is_data",
+      "ref.is_i31",
+      "ref.as_func",
+      "ref.as_non_null",
+      "ref.as_data",
+      "ref.as_i31",
+      "ref.func",
+      "ref.cast",
+      "ref.cast_static",
+      "ref.test",
+      "ref.test_static",
+      "table.get",
+      "table.set",
+      "table.size",
+      "table.grow",
+      "table.fill",
+      "table.init",
+      "table.copy",
+      "throw",
+      "rethrow",
+      "i32.load",
+      "i32.load8_s",
+      "i32.load8_u",
+      "i32.load16_s",
+      "i32.load16_u",
+      "i32.store",
+      "i32.store8",
+      "i32.store16",
+      "i32.const",
+      "i32.eqz",
+      "i32.eq",
+      "i32.ne",
+      "i32.lt_s",
+      "i32.lt_u",
+      "i32.le_s",
+      "i32.le_u",
+      "i32.gt_s",
+      "i32.gt_u",
+      "i32.ge_s",
+      "i32.ge_u",
+      "i32.clz",
+      "i32.ctz",
+      "i32.popcnt",
+      "i32.add",
+      "i32.sub",
+      "i32.mul",
+      "i32.div_s",
+      "i32.div_u",
+      "i32.rem_s",
+      "i32.rem_u",
+      "i32.and",
+      "i32.or",
+      "i32.xor",
+      "i32.shl",
+      "i32.shr_s",
+      "i32.shr_u",
+      "i32.rotl",
+      "i32.rotr",
+      "i32.wrap_i64",
+      "i32.trunc_f32_s",
+      "i32.trunc_f32_u",
+      "i32.trunc_f64_s",
+      "i32.trunc_f64_u",
+      "i32.reinterpret_f32",
+      "i64.load",
+      "i64.load8_s",
+      "i64.load8_u",
+      "i64.load16_s",
+      "i64.load16_u",
+      "i64.load32_s",
+      "i64.load32_u",
+      "i64.store",
+      "i64.store8",
+      "i64.store16",
+      "i64.store32",
+      "i64.const",
+      "i64.eqz",
+      "i64.eq",
+      "i64.ne",
+      "i64.lt_s",
+      "i64.lt_u",
+      "i64.le_s",
+      "i64.le_u",
+      "i64.gt_s",
+      "i64.gt_u",
+      "i64.ge_s",
+      "i64.ge_u",
+      "i64.clz",
+      "i64.ctz",
+      "i64.popcnt",
+      "i64.add",
+      "i64.sub",
+      "i64.mul",
+      "i64.div_s",
+      "i64.div_u",
+      "i64.rem_s",
+      "i64.rem_u",
+      "i64.and",
+      "i64.or",
+      "i64.xor",
+      "i64.shl",
+      "i64.shr_s",
+      "i64.shr_u",
+      "i64.rotl",
+      "i64.rotr",
+      "i64.extend_i32_s",
+      "i64.extend_i32_u",
+      "i64.trunc_f32_s",
+      "i64.trunc_f32_u",
+      "i64.trunc_f64_s",
+      "i64.trunc_f64_u",
+      "i64.reinterpret_f64",
+      "f32.load",
+      "f32.store",
+      "f32.const",
+      "f32.eq",
+      "f32.ne",
+      "f32.lt",
+      "f32.le",
+      "f32.gt",
+      "f32.ge",
+      "f32.abs",
+      "f32.neg",
+      "f32.ceil",
+      "f32.floor",
+      "f32.trunc",
+      "f32.nearest",
+      "f32.sqrt",
+      "f32.add",
+      "f32.sub",
+      "f32.mul",
+      "f32.div",
+      "f32.min",
+      "f32.max",
+      "f32.copysign",
+      "f32.convert_i32_s",
+      "f32.convert_i32_u",
+      "f32.convert_i64_s",
+      "f32.convert_i64_u",
+      "f32.demote_f64",
+      "f32.reinterpret_i32",
+      "f64.load",
+      "f64.store",
+      "f64.const",
+      "f64.eq",
+      "f64.ne",
+      "f64.lt",
+      "f64.le",
+      "f64.gt",
+      "f64.ge",
+      "f64.abs",
+      "f64.neg",
+      "f64.ceil",
+      "f64.floor",
+      "f64.trunc",
+      "f64.nearest",
+      "f64.sqrt",
+      "f64.add",
+      "f64.sub",
+      "f64.mul",
+      "f64.div",
+      "f64.min",
+      "f64.max",
+      "f64.copysign",
+      "f64.convert_i32_s",
+      "f64.convert_i32_u",
+      "f64.convert_i64_s",
+      "f64.convert_i64_u",
+      "f64.promote_f32",
+      "f64.reinterpret_i64",
+      "i32.extend8_s",
+      "i32.extend16_s",
+      "i64.extend8_s",
+      "i64.extend16_s",
+      "i64.extend32_s",
+      "i32.trunc_sat_f32_s",
+      "i32.trunc_sat_f32_u",
+      "i32.trunc_sat_f64_s",
+      "i32.trunc_sat_f64_u",
+      "i64.trunc_sat_f32_s",
+      "i64.trunc_sat_f32_u",
+      "i64.trunc_sat_f64_s",
+      "i64.trunc_sat_f64_u",
+      "memory.size",
+      "memory.grow",
+      "memory.copy",
+      "memory.fill",
+      "memory.init",
+      "memory.atomic.notify",
+      "memory.atomic.wait32",
+      "memory.atomic.wait64",
+      "i31.new",
+      "i31.get_u",
+      "i31.get_s",
+      "array.new",
+      "array.new_default",
+      "array.init",
+      "array.init_static",
+      "array.get",
+      "array.get_s",
+      "array.get_u",
+      "array.set",
+      "array.len",
+      "array.copy",
+      "struct.new",
+      "struct.new_default",
+      "struct.new_with_rtt",
+      "struct.new_default_with_rtt",
+      "struct.get",
+      "struct.get_s",
+      "struct.get_u",
+      "struct.set",
+      "rtt.canon",
+      "rtt.sub",
+      "rtt.fresh_sub",
+    ],
+    controlInstructions: [
+      "block",
+      "loop",
+      "if",
+      "else",
+      "then",
+      "end",
+      "do",
+      "let",
+      "br",
+      "br_if",
+      "br_table",
+      "br_on_exn",
+      "br_on_null",
+      "br_on_non_null",
+      "br_on_cast",
+      "br_on_cast_static",
+      "br_on_cast_fail",
+      "br_on_cast_static_fail",
+      "br_on_func",
+      "br_on_non_func",
+      "br_on_data",
+      "br_on_non_data",
+      "br_on_i31",
+      "br_on_non_i31",
+      "call",
+      "call_indirect",
+      "call_ref",
+      "return",
+      "return_call",
+      "return_call_indirect",
+      "return_call_ref",
+      "try",
+      "catch",
+      "catch_all",
+      "delegate",
+      "unreachable",
+    ],
+
+    escapes:
+      /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+    digits: /\d+(_+\d+)*/,
+    octaldigits: /[0-7]+(_+[0-7]+)*/,
+    binarydigits: /[0-1]+(_+[0-1]+)*/,
+    hexdigits: /[[0-9a-fA-F]+(_+[0-9a-fA-F]+)*/,
+
+    tokenizer: {
+      root: [
+        // whitespace
+        { include: "@whitespace" },
+
+        // strings
+        [/"([^"\\]|\\.)*$/, "string.invalid"], // non-teminated string
+        [/"/, "string", "@string"],
+
+        // numbers (not all of these are generated, but here to be sure)
+        [/(@digits)[eE]([\-+]?(@digits))?[fFdD]?/, "number.float"],
+        [/(@digits)\.(@digits)([eE][\-+]?(@digits))?[fFdD]?/, "number.float"],
+        [/0[xX](@hexdigits)[Ll]?/, "number.hex"],
+        [/0(@octaldigits)[Ll]?/, "number.octal"],
+        [/0[bB](@binarydigits)[Ll]?/, "number.binary"],
+        [/(@digits)[fFdD]/, "number.float"],
+        [/(@digits)[lL]?/, "number"],
+
+        // variable names
+        [/\$[^\s\)]*/, { token: "identifier" }],
+
+        // instructions and types
+        [
+          /[a-z0-9_]+(?:\.[a-z0-9_]+)*/,
+          {
+            cases: {
+              "@types": { token: "type.$0" },
+              "@keywords": { token: "keyword.$0" },
+              "@controlInstructions": { token: "controlInstruction.$0" },
+              "@instructions": { token: "instruction.$0" },
+              "@default": "identifier",
+            },
+          },
+        ],
+      ],
+
+      string: [
+        [/[^\\"]+/, "string"],
+        [/@escapes/, "string.escape"],
+        [/\\./, "string.escape.invalid"],
+        [/"/, "string", "@pop"],
+      ],
+
+      whitespace: [
+        [/[ \t\r\n]+/, ""],
+        [/(;; )(ERROR |FAILURE )([^\n]*)/, ["comment", "error", ""]],
+        [/(;; )(WARNING )([^\n]*)/, ["comment", "warning", ""]],
+        [/(;; )(INFO )([^\n]*)/, ["comment", "info", ""]],
+        [/(;; )(PEDANTIC )([^\n]*)/, ["comment", "pedantic", ""]],
+        [/(;;  +)(~+|\^)$/, ["comment", "underline"]],
+        [/(;;  )([^\n]*)/, ["comment", ""]],
+        [/;;[^\n]*/, "comment"],
+      ],
+    },
+  },
+};
+
+export default WebAssemblyTextLanguage;

xrpl-hooks-docs/docs.ts

@@ -0,0 +1,87 @@
+import hooksAccountBufLen from "./md/hooks-account-buf-len.md";
+import hooksAccountConvBufLen from "./md/hooks-account-conv-buf-len.md";
+import hooksAccountConvPure from "./md/hooks-account-conv-pure.md";
+import hooksArrayBufLen from "./md/hooks-array-buf-len.md";
+import hooksBurdenPrereq from "./md/hooks-burden-prereq.md";
+import hooksDetailBufLen from "./md/hooks-detail-buf-len.md";
+import hooksDetailPrereq from "./md/hooks-detail-prereq.md";
+import hooksEmitBufLen from "./md/hooks-emit-buf-len.md";
+import hooksEmitPrereq from "./md/hooks-emit-prereq.md";
+import hooksEntryPointRecursion from "./md/hooks-entry-point-recursion.md";
+import hooksEntryPointsNeg from "./md/hooks-entry-points-neg.md";
+import hooksEntryPoints from "./md/hooks-entry-points.md";
+import hooksFeePrereq from "./md/hooks-fee-prereq.md";
+import hooksFieldAddBufLen from "./md/hooks-field-add-buf-len.md";
+import hooksFieldBufLen from "./md/hooks-field-buf-len.md";
+import hooksFieldDelBufLen from "./md/hooks-field-del-buf-len.md";
+import hooksFloatArithPure from "./md/hooks-float-arith-pure.md";
+import hooksFloatComparePure from "./md/hooks-float-compare-pure.md";
+import hooksFloatIntPure from "./md/hooks-float-int-pure.md";
+import hooksFloatManipPure from "./md/hooks-float-manip-pure.md";
+import hooksFloatOnePure from "./md/hooks-float-one-pure.md";
+import hooksFloatPure from "./md/hooks-float-pure.md";
+import hooksGuardCalled from "./md/hooks-guard-called.md";
+import hooksGuardInFor from "./md/hooks-guard-in-for.md";
+import hooksGuardInWhile from "./md/hooks-guard-in-while.md";
+import hooksHashBufLen from "./md/hooks-hash-buf-len.md";
+import hooksKeyletBufLen from "./md/hooks-keylet-buf-len.md";
+import hooksRaddrConvBufLen from "./md/hooks-raddr-conv-buf-len.md";
+import hooksRaddrConvPure from "./md/hooks-raddr-conv-pure.md";
+import hooksReserveLimit from "./md/hooks-reserve-limit.md";
+import hooksSlotHashBufLen from "./md/hooks-slot-hash-buf-len.md";
+import hooksSlotKeyletBufLen from "./md/hooks-slot-keylet-buf-len.md";
+import hooksSlotLimit from "./md/hooks-slot-limit.md";
+import hooksSlotSubLimit from "./md/hooks-slot-sub-limit.md";
+import hooksSlotTypeLimit from "./md/hooks-slot-type-limit.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 hooksValidateBufLen from "./md/hooks-validate-buf-len.md";
+import hooksVerifyBufLen from "./md/hooks-verify-buf-len.md";
+
+
+
+const docs: { [key: string]: string; } = {
+  "hooks-account-buf-len": hooksAccountBufLen,
+  "hooks-account-conv-buf-len": hooksAccountConvBufLen,
+  "hooks-account-conv-pure": hooksAccountConvPure,
+  "hooks-array-buf-len": hooksArrayBufLen,
+  "hooks-burden-prereq": hooksBurdenPrereq,
+  "hooks-detail-buf-len": hooksDetailBufLen,
+  "hooks-detail-prereq": hooksDetailPrereq,
+  "hooks-emit-buf-len": hooksEmitBufLen,
+  "hooks-emit-prereq": hooksEmitPrereq,
+  "hooks-entry-point-recursion": hooksEntryPointRecursion,
+  "hooks-entry-points-neg": hooksEntryPointsNeg,
+  "hooks-entry-points": hooksEntryPoints,
+  "hooks-fee-prereq": hooksFeePrereq,
+  "hooks-field-add-buf-len": hooksFieldAddBufLen,
+  "hooks-field-buf-len": hooksFieldBufLen,
+  "hooks-field-del-buf-len": hooksFieldDelBufLen,
+  "hooks-float-arith-pure": hooksFloatArithPure,
+  "hooks-float-compare-pure": hooksFloatComparePure,
+  "hooks-float-int-pure": hooksFloatIntPure,
+  "hooks-float-manip-pure": hooksFloatManipPure,
+  "hooks-float-one-pure": hooksFloatOnePure,
+  "hooks-float-pure": hooksFloatPure,
+  "hooks-guard-called": hooksGuardCalled,
+  "hooks-guard-in-for": hooksGuardInFor,
+  "hooks-guard-in-while": hooksGuardInWhile,
+  "hooks-hash-buf-len": hooksHashBufLen,
+  "hooks-keylet-buf-len": hooksKeyletBufLen,
+  "hooks-raddr-conv-buf-len": hooksRaddrConvBufLen,
+  "hooks-raddr-conv-pure": hooksRaddrConvPure,
+  "hooks-reserve-limit": hooksReserveLimit,
+  "hooks-slot-hash-buf-len": hooksSlotHashBufLen,
+  "hooks-slot-keylet-buf-len": hooksSlotKeyletBufLen,
+  "hooks-slot-limit": hooksSlotLimit,
+  "hooks-slot-sub-limit": hooksSlotSubLimit,
+  "hooks-slot-type-limit": hooksSlotTypeLimit,
+  "hooks-state-buf-len": hooksStateBufLen,
+  "hooks-transaction-hash-buf-len": hooksTransactionHashBufLen,
+  "hooks-transaction-slot-limit": hooksTransactionSlotLimit,
+  "hooks-validate-buf-len": hooksValidateBufLen,
+  "hooks-verify-buf-len": hooksVerifyBufLen,
+};
+
+export default docs;

xrpl-hooks-docs/md/hooks-account-buf-len.md

@@ -0,0 +1,5 @@
+# hooks-account-buf-len
+
+Function [hook_account](https://xrpl-hooks.readme.io/v2.0/reference/hook_account) has fixed-size account ID output.
+
+This check warns about too-small size of its output buffer (if it's specified by a constant - variable parameter is ignored).

xrpl-hooks-docs/md/hooks-account-conv-buf-len.md

@@ -0,0 +1,5 @@
+# hooks-account-conv-buf-len
+
+Function [util_raddr](https://xrpl-hooks.readme.io/v2.0/reference/util_raddr) has fixed-size account ID input.
+
+This check warns unless the correct size is passed in the input size parameter (if it's specified by a constant - variable parameter is ignored).

xrpl-hooks-docs/md/hooks-account-conv-pure.md

@@ -0,0 +1,5 @@
+# hooks-account-conv-pure
+
+Hooks identify accounts by the 20 byte account ID, which can be converted to an raddr using the [util_raddr](https://xrpl-hooks.readme.io/v2.0/reference/util_raddr) function. If the account ID never changes, a more efficient way to do this is precompute the raddr from the account ID.
+
+This check warns about calls of `util_raddr` with constant input and proposes to add a tracing statement showing the computed value (so that the user can use it to replace the call).

xrpl-hooks-docs/md/hooks-array-buf-len.md

@@ -0,0 +1,7 @@
+# hooks-array-buf-len
+
+Hook API [sto_subarray](https://xrpl-hooks.readme.io/v2.0/reference/sto_subarray) requires non-empty input buffer and takes a parameter specifying the array index, whose value is limited - the sought object cannot be found if the limit is exceeded.
+
+This check warns about empty input as well as too-large values of the index specified in calls to `sto_subarray` (if they're specified by constants - variable parameters are ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/serialized-objects)

xrpl-hooks-docs/md/hooks-burden-prereq.md

@@ -0,0 +1,3 @@
+# hooks-burden-prereq
+
+Hook API [etxn_burden](https://xrpl-hooks.readme.io/v2.0/reference/etxn_burden) computes transaction burden, based on (i.a.) the number of reserved transactions, so a call to it must be preceded by a call to [etxn_reserve](https://xrpl-hooks.readme.io/v2.0/reference/etxn_reserve).

xrpl-hooks-docs/md/hooks-detail-buf-len.md

@@ -0,0 +1,7 @@
+# hooks-detail-buf-len
+
+Function [etxn_details](https://xrpl-hooks.readme.io/v2.0/reference/etxn_details) has fixed-size sfEmitDetails output.
+
+This check warns about too-small size of its output buffer (if it's specified by a constant - variable parameter is ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/emitted-transactions)

xrpl-hooks-docs/md/hooks-detail-prereq.md

@@ -0,0 +1,5 @@
+# hooks-detail-prereq
+
+Hook API [etxn_details](https://xrpl-hooks.readme.io/v2.0/reference/etxn_details) serializes emit details, based on (i.a.) the number of reserved transactions, so a call to it must be preceded by a call to [etxn_reserve](https://xrpl-hooks.readme.io/v2.0/reference/etxn_reserve).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/emitted-transactions)

xrpl-hooks-docs/md/hooks-emit-buf-len.md

@@ -0,0 +1,7 @@
+# hooks-emit-buf-len
+
+Function [emit](https://xrpl-hooks.readme.io/v2.0/reference/emit) has fixed-size transaction hash output.
+
+This check warns about too-small size of its output buffer (if it's specified by a constant - variable parameter is ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/emitted-transactions)

xrpl-hooks-docs/md/hooks-emit-prereq.md

@@ -0,0 +1,5 @@
+# hooks-emit-prereq
+
+Before emitting a transaction using [emit](https://xrpl-hooks.readme.io/v2.0/reference/emit) Hook API, a hook must set a maximal count of transactions it plans to emit, by calling [etxn_reserve](https://xrpl-hooks.readme.io/v2.0/reference/etxn_reserve).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/emitted-transactions)

xrpl-hooks-docs/md/hooks-entry-point-recursion.md

@@ -0,0 +1,5 @@
+# hooks-entry-point-recursion
+
+Recursive calls are disallowed in the implementation of hook entry points.
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/loops-and-guarding#no-recursion)

xrpl-hooks-docs/md/hooks-entry-points-neg.md

@@ -0,0 +1,5 @@
+# hooks-entry-points-neg
+
+Shows error on function definitions with unexpected (that is, neither `hook` nor `cbak`) names.
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/compiling-hooks#constraints)

xrpl-hooks-docs/md/hooks-entry-points.md

@@ -0,0 +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).
+
+This check shows error on translation units that do not have them.
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/compiling-hooks)

xrpl-hooks-docs/md/hooks-fee-prereq.md

@@ -0,0 +1,5 @@
+# hooks-fee-prereq
+
+Hook API [etxn_fee_base](https://xrpl-hooks.readme.io/v2.0/reference/etxn_fee_base) estimates a transaction fee, based on (i.a.) the number of reserved transactions, so a call to it must be preceded by a call to [etxn_reserve](https://xrpl-hooks.readme.io/v2.0/reference/etxn_reserve).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/hook-fees)

xrpl-hooks-docs/md/hooks-field-add-buf-len.md

@@ -0,0 +1,7 @@
+# hooks-field-add-buf-len
+
+Emplacing a new field into STObject by calling [sto_emplace](https://xrpl-hooks.readme.io/v2.0/reference/sto_emplace) requires enough space to serialize the new STObject into; the API also limits sizes of the old object and field.
+
+This check warns about insufficient output buffer space as well as too-large values of the inputs in calls to `sto_emplace` (if they're specified by constants - variable parameters are ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/serialized-objects)

xrpl-hooks-docs/md/hooks-field-buf-len.md

@@ -0,0 +1,7 @@
+# hooks-field-buf-len
+
+Hook API [sto_subfield](https://xrpl-hooks.readme.io/v2.0/reference/sto_subfield) requires non-empty input buffer.
+
+This check warns about empty input in calls to `sto_subfield` (if it's specified by a constant - variable parameter is ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/serialized-objects)

xrpl-hooks-docs/md/hooks-field-del-buf-len.md

@@ -0,0 +1,7 @@
+# hooks-field-del-buf-len
+
+Erasing a field from STObject by calling [sto_erase](https://xrpl-hooks.readme.io/v2.0/reference/sto_erase) requires enough space to serialize the new STObject into; the API also limits size of the old object.
+
+This check warns about insufficient output buffer space as well as too-large value of the input STObject in calls to `sto_erase` (if they're specified by constants - variable parameters are ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/serialized-objects)

xrpl-hooks-docs/md/hooks-float-arith-pure.md

@@ -0,0 +1,8 @@
+# hooks-float-arith-pure
+
+Hooks can compute floating-point values in XFL format by calling functions [float_multiply](https://xrpl-hooks.readme.io/v2.0/reference/float_multiply), [float_mulratio](https://xrpl-hooks.readme.io/v2.0/reference/float_mulratio), [float_negate](https://xrpl-hooks.readme.io/v2.0/reference/float_negate), [float_sum](https://xrpl-hooks.readme.io/v2.0/reference/float_sum), [float_invert](https://xrpl-hooks.readme.io/v2.0/reference/float_invert) and [float_divide](https://xrpl-hooks.readme.io/v2.0/reference/float_divide) and access their constituent parts by calling [float_exponent](https://xrpl-hooks.readme.io/v2.0/reference/float_exponent), [float_mantissa](https://xrpl-hooks.readme.io/v2.0/reference/float_mantissa) and [float_sign](https://xrpl-hooks.readme.io/v2.0/reference/float_sign). If the inputs of the computation never change, a more efficient way to do this is to precompute it.
+
+This check warns about calls of the aforementioned functions with constant inputs and in simple cases proposes to add a tracing statement showing the computed value (so that the user can use it to replace the call). It also checks that the divisor passed to `float_divide`, `float_mulratio` and `float_invert` is not 0 (if it's specified by a constant - variable parameters are ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/floating-point-numbers-xfl)
+

xrpl-hooks-docs/md/hooks-float-compare-pure.md

@@ -0,0 +1,7 @@
+# hooks-float-compare-pure
+
+Hooks can compare floating-point values in XFL format by calling the [float_compare](https://xrpl-hooks.readme.io/v2.0/reference/float_compare) function. If the inputs of the comparison never change, its result is fixed and the function need not be called.
+
+This check warns about calls of `float_compare` with constant inputs as well as invalid values of the comparison mode parameter (if it's specified by a constant - variable parameter is ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/floating-point-numbers-xfl)

xrpl-hooks-docs/md/hooks-float-int-pure.md

@@ -0,0 +1,7 @@
+# hooks-float-int-pure
+
+Hooks can convert floating-point values in XFL format to integers by calling the [float_int](https://xrpl-hooks.readme.io/v2.0/reference/float_int) function. If the inputs of this function never change, a more efficient way to do this is to precompute the integer value.
+
+This check warns about calls of `float_int` with constant inputs as well as invalid values of the decimal places parameter (if it's specified by a constant - variable parameter is ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/floating-point-numbers-xfl)

xrpl-hooks-docs/md/hooks-float-manip-pure.md

@@ -0,0 +1,7 @@
+# hooks-float-manip-pure
+
+Hooks can directly manipulate floating-point values in XFL format by calling functions [float_exponent_set](https://xrpl-hooks.readme.io/v2.0/reference/float_exponent_set), [float_mantissa_set](https://xrpl-hooks.readme.io/v2.0/reference/float_mantissa_set) and [float_sign_set](https://xrpl-hooks.readme.io/v2.0/reference/float_sign_set). If the inputs of the update never change, a more efficient way to do this is to precompute it.
+
+This check warns about calls of the aforementioned functions with constant inputs and in simple cases proposes to add a tracing statement showing the computed value (so that the user can use it to replace the call). It also checks documented bounds of the second parameter of these functions (if it's specified by a constant - variable parameter is ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/floating-point-numbers-xfl)

xrpl-hooks-docs/md/hooks-float-one-pure.md

@@ -0,0 +1,5 @@
+# hooks-float-one-pure
+
+Hooks can obtain XFL enclosing number 1 by calling the [float_one](https://xrpl-hooks.readme.io/v2.0/reference/float_one) function. Since the number never changes, a more efficient way is to use its precomputed value.
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/floating-point-numbers-xfl)

xrpl-hooks-docs/md/hooks-float-pure.md

@@ -0,0 +1,7 @@
+# hooks-float-pure
+
+Hooks can use floating-point values in XFL format, creating them from mantissa and exponent by calling the [float_set](https://xrpl-hooks.readme.io/v2.0/reference/float_set) function. If the mantissa and exponent never change, a more efficient way to do this is to precompute the floating-point value.
+
+This check warns about calls of `float_set` with constant inputs and proposes to add a tracing statement showing the computed value (so that the user can use it to replace the call). In the special case of 0 mantissa and 0 exponent ("canonical 0"), a replacement value of 0 is proposed directly, with no need to trace it.
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/floating-point-numbers-xfl)

xrpl-hooks-docs/md/hooks-guard-called.md

@@ -0,0 +1,5 @@
+# hooks-guard-called
+
+Every hook needs to import the guard function [_g](https://xrpl-hooks.readme.io/v2.0/docs/loops-and-guarding#the-guard-function) and use it at least once.
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/loops-and-guarding)

xrpl-hooks-docs/md/hooks-guard-in-for.md

@@ -0,0 +1,14 @@
+# hooks-guard-in-for
+
+A guard is a marker that must be placed in your code at the top of each loop. Consider the following for-loop in C:
+
+```c
+  #define GUARD(maxiter) _g(__LINE__, (maxiter)+1)
+
+  for (int i = 0; GUARD(3), i < 3; ++i)
+```
+
+<BR/>
+This is the only way to satisfy the guard rule when using a for-loop in C.
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/loops-and-guarding)

xrpl-hooks-docs/md/hooks-guard-in-while.md

@@ -0,0 +1,14 @@
+# hooks-guard-in-while
+
+Like for loops, while loops must have a guard in their condition:
+
+```c
+
+  #define GUARD(maxiter) _g(__LINE__, (maxiter)+1)
+
+  int i = 0;
+  while (GUARD(3), i < 3)
+```
+
+<BR/>
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/loops-and-guarding)

xrpl-hooks-docs/md/hooks-hash-buf-len.md

@@ -0,0 +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.
+
+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-keylet-buf-len.md

@@ -0,0 +1,7 @@
+# hooks-keylet-buf-len
+
+Computing a ripple keylet by calling [util_keylet](https://xrpl-hooks.readme.io/v2.0/reference/util_keylet) requires valid parameters dependent on the keylet type.
+
+This check does not fully parse these parameters, but warns about invalid keylet type as well as buffer sizes that cannot be valid (if they're specified by constants - variable parameters are ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/slots-and-keylets)

xrpl-hooks-docs/md/hooks-raddr-conv-buf-len.md

@@ -0,0 +1,5 @@
+# hooks-raddr-conv-buf-len
+
+Hook API [util_accid](https://xrpl-hooks.readme.io/v2.0/reference/util_accid) has upper limit on the length of its input (because it expects it to be a raddr) and fixed-size account ID output.
+
+This check warns about invalid sizes of input and output parameters (if they're specified by constants - variable parameters are ignored).