Updated based on feedback

Fix/fix sequence number

.env.example

@@ -1,3 +1,10 @@
 NEXTAUTH_URL=https://example.com
 GITHUB_SECRET=""
-GITHUB_ID=""
+GITHUB_ID=""
+NEXT_PUBLIC_COMPILE_API_ENDPOINT="http://localhost:9000/api/build"
+NEXT_PUBLIC_COMPILE_API_BASE_URL="http://localhost:9000"
+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

@@ -1,6 +1,8 @@
-# XRPL Hooks IDE
+# XRPL Hooks Builder
 
-This is the repository for XRPL Hooks IDE. This project is built with Next.JS
+https://hooks-builder.xrpl.org/
+
+This is the repository for XRPL Hooks Builder. This project is built with Next.JS
 
 ## General
 
@@ -8,7 +10,9 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, run the development server:
+First, copy the `.env.example` to `.env.local` file, someone from the team can provide you your enviroment variables.
+
+Then, run the development server:
 
 ```bash
 npm run dev
@@ -24,6 +28,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:
@@ -32,9 +108,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

@@ -0,0 +1,552 @@
+import toast from "react-hot-toast";
+import { useSnapshot } from "valtio";
+import { ArrowSquareOut, Copy, Trash, Wallet, X } from "phosphor-react";
+import React, { useEffect, useState, FC } from "react";
+import Dinero from "dinero.js";
+
+import Button from "./Button";
+import { addFaucetAccount, importAccount } from "../state/actions";
+import state from "../state";
+import Box from "./Box";
+import { Container, Heading, Stack, Text, Flex } from ".";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  DialogTrigger,
+} from "./Dialog";
+import { css } from "../stitches.config";
+import { Input, Label } from "./Input";
+import truncate from "../utils/truncate";
+
+const labelStyle = css({
+  color: "$mauve10",
+  textTransform: "uppercase",
+  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";
+
+export const AccountDialog = ({
+  activeAccountAddress,
+  setActiveAccountAddress,
+}: {
+  activeAccountAddress: string | null;
+  setActiveAccountAddress: React.Dispatch<React.SetStateAction<string | null>>;
+}) => {
+  const snap = useSnapshot(state);
+  const [showSecret, setShowSecret] = useState(false);
+  const activeAccount = snap.accounts.find(
+    (account) => account.address === activeAccountAddress
+  );
+  return (
+    <Dialog
+      open={Boolean(activeAccountAddress)}
+      onOpenChange={(open) => {
+        setShowSecret(false);
+        !open && setActiveAccountAddress(null);
+      }}
+    >
+      <DialogContent
+        css={{
+          backgroundColor: "$mauve1 !important",
+          border: "1px solid $mauve2",
+          ".dark &": {
+            // backgroundColor: "$black !important",
+          },
+          p: "$3",
+          "&:before": {
+            content: " ",
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            opacity: 0.2,
+            ".dark &": {
+              opacity: 1,
+            },
+            zIndex: 0,
+            pointerEvents: "none",
+            backgroundImage: `url('/pattern-dark.svg'), url('/pattern-dark-2.svg')`,
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "bottom left, top right",
+          },
+        }}
+      >
+        <DialogTitle
+          css={{
+            display: "flex",
+            width: "100%",
+            alignItems: "center",
+            borderBottom: "1px solid $mauve6",
+            pb: "$3",
+            gap: "$3",
+            fontSize: "$md",
+          }}
+        >
+          <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" }}>
+            <Flex css={{ alignItems: "center" }}>
+              <Flex css={{ flexDirection: "column" }}>
+                <Text className={labelStyle()}>Account Address</Text>
+                <Text
+                  css={{
+                    fontFamily: "$monospace",
+                  }}
+                >
+                  {activeAccount?.address}
+                </Text>
+              </Flex>
+              <Flex css={{ marginLeft: "auto", color: "$mauve12" }}>
+                <Button
+                  size="sm"
+                  ghost
+                  css={{ mt: "$3" }}
+                  onClick={() => {
+                    navigator.clipboard.writeText(activeAccount?.address || "");
+                    toast.success("Copied address to clipboard");
+                  }}
+                >
+                  <Copy size="15px" />
+                </Button>
+              </Flex>
+            </Flex>
+            <Flex css={{ alignItems: "center" }}>
+              <Flex css={{ flexDirection: "column" }}>
+                <Text className={labelStyle()}>Secret</Text>
+                <Text
+                  as="div"
+                  css={{
+                    fontFamily: "$monospace",
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                >
+                  {showSecret
+                    ? activeAccount?.secret
+                    : "•".repeat(activeAccount?.secret.length || 16)}{" "}
+                  <Button
+                    css={{
+                      fontFamily: "$monospace",
+                      lineHeight: 2,
+                      mt: "2px",
+                      ml: "$3",
+                    }}
+                    ghost
+                    size="xs"
+                    onClick={() => setShowSecret((curr) => !curr)}
+                  >
+                    {showSecret ? "Hide" : "Show"}
+                  </Button>
+                </Text>
+              </Flex>
+              <Flex css={{ marginLeft: "auto", color: "$mauve12" }}>
+                <Button
+                  size="sm"
+                  ghost
+                  onClick={() => {
+                    navigator.clipboard.writeText(activeAccount?.secret || "");
+                    toast.success("Copied secret to clipboard");
+                  }}
+                  css={{ mt: "$3" }}
+                >
+                  <Copy size="15px" />
+                </Button>
+              </Flex>
+            </Flex>
+            <Flex css={{ alignItems: "center" }}>
+              <Flex css={{ flexDirection: "column" }}>
+                <Text className={labelStyle()}>Balances & Objects</Text>
+                <Text
+                  css={{
+                    fontFamily: "$monospace",
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                >
+                  {Dinero({
+                    amount: Number(activeAccount?.xrp || "0"),
+                    precision: 6,
+                  })
+                    .toUnit()
+                    .toLocaleString(undefined, {
+                      style: "currency",
+                      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://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${activeAccount?.address}`}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  <Button
+                    size="sm"
+                    ghost
+                    css={{ color: "$grass11 !important", mt: "$3" }}
+                  >
+                    <ArrowSquareOut size="15px" />
+                  </Button>
+                </a>
+              </Flex>
+            </Flex>
+            <Flex css={{ alignItems: "center" }}>
+              <Flex css={{ flexDirection: "column" }}>
+                <Text className={labelStyle()}>Installed Hooks</Text>
+                <Text
+                  css={{
+                    fontFamily: "$monospace",
+                  }}
+                >
+                  {activeAccount && activeAccount.hooks.length > 0
+                    ? activeAccount.hooks.map((i) => truncate(i, 12)).join(",")
+                    : "–"}
+                </Text>
+              </Flex>
+              {activeAccount && activeAccount?.hooks?.length > 0 && (
+                <Flex css={{ marginLeft: "auto" }}>
+                  <Button
+                    size="xs"
+                    outline
+                    disabled={activeAccount.isLoading}
+                    css={{ mt: "$3", mr: "$1", ml: "auto" }}
+                    onClick={() => {
+                      deleteHook(activeAccount);
+                    }}
+                  >
+                    Delete Hook <Trash size="15px" />
+                  </Button>
+                </Flex>
+              )}
+            </Flex>
+          </Stack>
+        </DialogDescription>
+        <DialogClose asChild>
+          <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
+            <X size="20px" />
+          </Box>
+        </DialogClose>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+interface AccountProps {
+  card?: boolean;
+  hideDeployBtn?: boolean;
+  showHookStats?: boolean;
+}
+
+const Accounts: FC<AccountProps> = (props) => {
+  const snap = useSnapshot(state);
+  const [activeAccountAddress, setActiveAccountAddress] = useState<
+    string | null
+  >(null);
+  useEffect(() => {
+    const fetchAccInfo = async () => {
+      if (snap.clientStatus === "online") {
+        const requests = snap.accounts.map((acc) =>
+          snap.client?.send({
+            id: `hooks-builder-req-info-${acc.address}`,
+            command: "account_info",
+            account: acc.address,
+          })
+        );
+        const responses = await Promise.all(requests);
+        responses.forEach((res: any) => {
+          const address = res?.account_data?.Account as string;
+          const balance = res?.account_data?.Balance as string;
+          const sequence = res?.account_data?.Sequence as number;
+          const accountToUpdate = state.accounts.find(
+            (acc) => acc.address === address
+          );
+          if (accountToUpdate) {
+            accountToUpdate.xrp = balance;
+            accountToUpdate.sequence = sequence;
+            accountToUpdate.error = null;
+          } else {
+            const oldAccount = state.accounts.find(
+              (acc) => acc.address === res?.account
+            );
+            if (oldAccount) {
+              oldAccount.xrp = "0";
+              oldAccount.error = {
+                code: res?.error,
+                message: res?.error_message,
+              };
+            }
+          }
+        });
+        const objectRequests = snap.accounts.map((acc) => {
+          return snap.client?.send({
+            id: `hooks-builder-req-objects-${acc.address}`,
+            command: "account_objects",
+            account: acc.address,
+          });
+        });
+        const objectResponses = await Promise.all(objectRequests);
+        objectResponses.forEach((res: any) => {
+          const address = res?.account as string;
+          const accountToUpdate = state.accounts.find(
+            (acc) => acc.address === address
+          );
+          if (accountToUpdate) {
+            accountToUpdate.hooks =
+              res.account_objects
+                .find((ac: any) => ac?.LedgerEntryType === "Hook")
+                ?.Hooks?.map((oo: any) => oo.Hook.HookHash) || [];
+          }
+        });
+      }
+    };
+
+    let fetchAccountInfoInterval: NodeJS.Timer;
+    if (snap.clientStatus === "online") {
+      fetchAccInfo();
+      fetchAccountInfoInterval = setInterval(() => fetchAccInfo(), 10000);
+    }
+
+    return () => {
+      if (snap.accounts.length > 0) {
+        if (fetchAccountInfoInterval) {
+          clearInterval(fetchAccountInfoInterval);
+        }
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [snap.accounts.length, snap.clientStatus]);
+  return (
+    <Box
+      as="div"
+      css={{
+        display: "flex",
+        backgroundColor: props.card ? "$deep" : "$mauve1",
+        position: "relative",
+        flex: "1",
+        height: "100%",
+        border: "1px solid $mauve6",
+        borderRadius: props.card ? "$md" : undefined,
+      }}
+    >
+      <Container css={{ p: 0, flexShrink: 1, height: "100%" }}>
+        <Flex
+          css={{
+            py: "$3",
+            borderBottom: props.card ? "1px solid $mauve6" : undefined,
+          }}
+        >
+          <Heading
+            as="h3"
+            css={{
+              fontWeight: 300,
+              m: 0,
+              fontSize: "11px",
+              color: "$mauve12",
+              px: "$3",
+              textTransform: "uppercase",
+              alignItems: "center",
+              display: "inline-flex",
+              gap: "$3",
+            }}
+          >
+            <Wallet size="15px" /> <Text css={{ lineHeight: 1 }}>Accounts</Text>
+          </Heading>
+          <Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
+            <Button ghost size="sm" onClick={() => addFaucetAccount(true)}>
+              Create
+            </Button>
+            <ImportAccountDialog />
+          </Flex>
+        </Flex>
+        <Stack
+          css={{
+            flexDirection: "column",
+            width: "100%",
+            fontSize: "13px",
+            wordWrap: "break-word",
+            fontWeight: "$body",
+            gap: 0,
+            height: "calc(100% - 52px)",
+            flexWrap: "nowrap",
+            overflowY: "auto",
+          }}
+        >
+          {snap.accounts.map((account) => (
+            <Flex
+              column
+              key={account.address + account.name}
+              onClick={() => setActiveAccountAddress(account.address)}
+              css={{
+                px: "$3",
+                py: props.card ? "$3" : "$2",
+                cursor: "pointer",
+                borderBottom: props.card ? "1px solid $mauve6" : undefined,
+                "@hover": {
+                  "&:hover": {
+                    background: "$backgroundAlt",
+                  },
+                },
+              }}
+            >
+              <Flex
+                row
+                css={{
+                  justifyContent: "space-between",
+                }}
+              >
+                <Box>
+                  <Text>{account.name} </Text>
+                  <Text
+                    css={{
+                      color: "$textMuted",
+                      wordBreak: "break-word",
+                    }}
+                  >
+                    {account.address}{" "}
+                    {!account?.error ? (
+                      `(${Dinero({
+                        amount: Number(account?.xrp || "0"),
+                        precision: 6,
+                      })
+                        .toUnit()
+                        .toLocaleString(undefined, {
+                          style: "currency",
+                          currency: "XRP",
+                          currencyDisplay: "name",
+                        })})`
+                    ) : (
+                      <Box css={{ color: "$red11" }}>
+                        (Account not found, request funds to activate account)
+                      </Box>
+                    )}
+                  </Text>
+                </Box>
+                {!props.hideDeployBtn && (
+                  <div
+                    className="hook-deploy-button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                  >
+                    <SetHookDialog accountAddress={account.address} />
+                  </div>
+                )}
+              </Flex>
+              {props.showHookStats && (
+                <Text muted small css={{ mt: "$2" }}>
+                  {account.hooks.length} hook
+                  {account.hooks.length === 1 ? "" : "s"} installed
+                </Text>
+              )}
+            </Flex>
+          ))}
+        </Stack>
+      </Container>
+      <AccountDialog
+        activeAccountAddress={activeAccountAddress}
+        setActiveAccountAddress={setActiveAccountAddress}
+      />
+    </Box>
+  );
+};
+
+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="sm">
+          Import
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogTitle>Import account</DialogTitle>
+        <DialogDescription>
+          <Label>Add account secret</Label>
+          <Input
+            name="secret"
+            type="password"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
+        </DialogDescription>
+
+        <Flex
+          css={{
+            marginTop: 25,
+            justifyContent: "flex-end",
+            gap: "$3",
+          }}
+        >
+          <DialogClose asChild>
+            <Button outline>Cancel</Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button
+              variant="primary"
+              onClick={() => {
+                importAccount(value);
+                setValue("");
+              }}
+            >
+              Import account
+            </Button>
+          </DialogClose>
+        </Flex>
+        <DialogClose asChild>
+          <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
+            <X size="20px" />
+          </Box>
+        </DialogClose>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default Accounts;

components/AlertDialog/index.tsx

@@ -0,0 +1,75 @@
+import { FC, ReactNode } from "react";
+import { proxy, useSnapshot } from "valtio";
+import Button from "../Button";
+import Flex from "../Flex";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from "./primitive";
+
+export interface AlertState {
+  isOpen: boolean;
+  title?: string;
+  body?: ReactNode;
+  cancelText?: string;
+  confirmText?: string;
+  confirmPrefix?: ReactNode;
+  onConfirm?: () => any;
+  onCancel?: () => any;
+}
+
+export const alertState = proxy<AlertState>({
+  isOpen: false,
+});
+
+const Alert: FC = () => {
+  const {
+    title = "Are you sure?",
+    isOpen,
+    body,
+    cancelText,
+    confirmText = "Ok",
+    confirmPrefix,
+    onCancel,
+    onConfirm,
+  } = useSnapshot(alertState);
+  return (
+    <AlertDialog
+      open={isOpen}
+      onOpenChange={value => (alertState.isOpen = value)}
+    >
+      <AlertDialogContent>
+        <AlertDialogTitle>{title}</AlertDialogTitle>
+        <AlertDialogDescription>{body}</AlertDialogDescription>
+        <Flex css={{ justifyContent: "flex-end", gap: "$3" }}>
+          {(cancelText || onCancel) && (
+            <AlertDialogCancel asChild>
+              <Button css={{ minWidth: "$16" }} outline onClick={onCancel}>
+                {cancelText || "Cancel"}
+              </Button>
+            </AlertDialogCancel>
+          )}
+          <AlertDialogAction asChild>
+            <Button
+              css={{ minWidth: "$16" }}
+              variant="primary"
+              onClick={async () => {
+                await onConfirm?.();
+                alertState.isOpen = false;
+              }}
+            >
+              {confirmPrefix}
+              {confirmText}
+            </Button>
+          </AlertDialogAction>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default Alert;

components/AlertDialog/primitive.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { blackA } from "@radix-ui/colors";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { styled, keyframes } from "../../stitches.config";
+
+const overlayShow = keyframes({
+  "0%": { opacity: 0 },
+  "100%": { opacity: 1 },
+});
+
+const contentShow = keyframes({
+  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+});
+
+const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
+  zIndex: 1000,
+  backgroundColor: blackA.blackA9,
+  position: "fixed",
+  inset: 0,
+  "@media (prefers-reduced-motion: no-preference)": {
+    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+  },
+  ".dark &": {
+    backgroundColor: blackA.blackA11,
+  },
+});
+
+const Root: React.FC<AlertDialogPrimitive.AlertDialogProps> = ({
+  children,
+  ...rest
+}) => {
+  return (
+    <AlertDialogPrimitive.Root {...rest}>
+      <StyledOverlay />
+      {children}
+    </AlertDialogPrimitive.Root>
+  );
+};
+
+const StyledContent = styled(AlertDialogPrimitive.Content, {
+  zIndex: 1000,
+  backgroundColor: "$mauve2",
+  color: "$mauve12",
+  borderRadius: "$md",
+  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",
+  padding: 25,
+  "@media (prefers-reduced-motion: no-preference)": {
+    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+  },
+  "&:focus": { outline: "none" },
+  ".dark &": {
+    backgroundColor: "$mauve5",
+    boxShadow:
+      "0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)",
+  },
+});
+
+const StyledTitle = styled(AlertDialogPrimitive.Title, {
+  margin: 0,
+  color: "$mauve12",
+  fontWeight: 500,
+  fontSize: "$lg",
+});
+
+const StyledDescription = styled(AlertDialogPrimitive.Description, {
+  marginBottom: 20,
+  color: "$mauve11",
+  lineHeight: 1.5,
+  fontSize: "$md",
+});
+
+// Exports
+export const AlertDialog = Root;
+export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+export const AlertDialogContent = StyledContent;
+export const AlertDialogTitle = StyledTitle;
+export const AlertDialogDescription = StyledDescription;
+export const AlertDialogAction = AlertDialogPrimitive.Action;
+export const AlertDialogCancel = AlertDialogPrimitive.Cancel;

components/Button.tsx

@@ -1,8 +1,12 @@
+import React from "react";
 import { styled } from "../stitches.config";
+import Flex from "./Flex";
+import Spinner from "./Spinner";
 
-const Button = styled("button", {
+export const StyledButton = styled("button", {
   // Reset
   all: "unset",
+  position: "relative",
   appereance: "none",
   fontFamily: "$body",
   alignItems: "center",
@@ -27,14 +31,21 @@ const Button = styled("button", {
   fontSize: "$2",
   fontWeight: 500,
   fontVariantNumeric: "tabular-nums",
-  backgroundColor: "red",
   cursor: "pointer",
+  width: "max-content",
   "&:disabled": {
-    opacity: 0.8,
+    opacity: 0.6,
     pointerEvents: "none",
+    cursor: "not-allowed",
   },
   variants: {
     size: {
+      xs: {
+        borderRadius: "$sm",
+        height: "$5",
+        px: "$2",
+        fontSize: "$xs",
+      },
       sm: {
         borderRadius: "$sm",
         height: "$7",
@@ -55,53 +66,120 @@ const Button = styled("button", {
       },
     },
     variant: {
+      link: {
+        textDecoration: "underline",
+        fontSize: "inherit",
+        color: "$textMuted",
+        textUnderlineOffset: "2px",
+      },
       default: {
-        backgroundColor: "$slate12",
-        boxShadow: "inset 0 0 0 1px $colors$slate12",
-        color: "$slate1",
+        backgroundColor: "$mauve12",
+        boxShadow: "inset 0 0 0 1px $colors$mauve12",
+        color: "$mauve1",
         "@hover": {
           "&:hover": {
-            backgroundColor: "$slate12",
-            boxShadow: "inset 0 0 0 1px $colors$slate12",
+            backgroundColor: "$mauve12",
+            boxShadow: "inset 0 0 0 1px $colors$mauve12",
           },
         },
         "&:active": {
-          backgroundColor: "$slate10",
-          boxShadow: "inset 0 0 0 1px $colors$slate11",
+          backgroundColor: "$mauve10",
+          boxShadow: "inset 0 0 0 1px $colors$mauve11",
         },
         "&:focus": {
           boxShadow:
-            "inset 0 0 0 1px $colors$slate12, 0 0 0 1px $colors$slate12",
+            "inset 0 0 0 1px $colors$mauve12, inset 0 0 0 2px $colors$mauve12",
         },
         '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
           {
-            backgroundColor: "$slate4",
-            boxShadow: "inset 0 0 0 1px $colors$slate8",
+            backgroundColor: "$mauve4",
+            boxShadow: "inset 0 0 0 1px $colors$mauve8",
           },
       },
       primary: {
-        backgroundColor: `$pink9`,
-        boxShadow: "inset 0 0 0 1px $colors$pink9",
+        backgroundColor: `$accent`,
+        boxShadow: "inset 0 0 0 1px $colors$purple9",
         color: "$white",
         "@hover": {
           "&:hover": {
-            backgroundColor: "$pink10",
-            boxShadow: "inset 0 0 0 1px $colors$pink11",
+            backgroundColor: "$purple10",
+            boxShadow: "inset 0 0 0 1px $colors$purple11",
           },
         },
         "&:active": {
-          backgroundColor: "$pink8",
-          boxShadow: "inset 0 0 0 1px $colors$pink8",
+          backgroundColor: "$purple8",
+          boxShadow: "inset 0 0 0 1px $colors$purple8",
         },
         "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$pink8",
+          boxShadow: "inset 0 0 0 2px $colors$purple12",
         },
         '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
           {
-            backgroundColor: "$slate4",
-            boxShadow: "inset 0 0 0 1px $colors$pink8",
+            backgroundColor: "$mauve4",
+            boxShadow: "inset 0 0 0 1px $colors$purple8",
           },
       },
+      secondary: {
+        backgroundColor: `$purple9`,
+        boxShadow: "inset 0 0 0 1px $colors$purple9",
+        color: "$white",
+        "@hover": {
+          "&:hover": {
+            backgroundColor: "$purple10",
+            boxShadow: "inset 0 0 0 1px $colors$purple11",
+          },
+        },
+        "&:active": {
+          backgroundColor: "$purple8",
+          boxShadow: "inset 0 0 0 1px $colors$purple8",
+        },
+        "&:focus": {
+          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$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",
+      },
+    },
+    isDisabled: {
+      true: {
+        opacity: 0.6,
+        // pointerEvents: "none",
+        cursor: "auto",
+        "&:hover": {
+          boxShadow: "inherit",
+        },
+      },
     },
     outline: {
       true: {
@@ -113,19 +191,24 @@ const Button = styled("button", {
         textTransform: "uppercase",
       },
     },
+    fullWidth: {
+      true: {
+        width: "100%",
+      },
+    },
     ghost: {
       true: {
         boxShadow: "none",
         background: "transparent",
-        color: "$slate12",
+        color: "$mauve12",
         "@hover": {
           "&:hover": {
-            backgroundColor: "$slate6",
+            backgroundColor: "$mauve6",
             boxShadow: "none",
           },
         },
         "&:active": {
-          backgroundColor: "$slate8",
+          backgroundColor: "$mauve8",
           boxShadow: "none",
         },
         "&:focus": {
@@ -133,19 +216,26 @@ const Button = styled("button", {
         },
       },
     },
+    isLoading: {
+      true: {
+        "& .button-content": {
+          visibility: "hidden",
+        },
+        pointerEvents: "none",
+      },
+    },
   },
-
   compoundVariants: [
     {
       outline: true,
       variant: "default",
       css: {
         background: "transparent",
-        color: "$slate12",
-        boxShadow: "inset 0 0 0 1px $colors$slate10",
+        color: "$mauve12",
+        boxShadow: "inset 0 0 0 1px $colors$mauve10",
         "&:hover": {
-          color: "$slate12",
-          background: "$slate5",
+          color: "$mauve12",
+          background: "$mauve5",
         },
       },
     },
@@ -154,10 +244,22 @@ const Button = styled("button", {
       variant: "primary",
       css: {
         background: "transparent",
-        color: "$slate12",
+        color: "$mauve12",
         "&:hover": {
-          color: "$slate12",
-          background: "$slate5",
+          color: "$mauve12",
+          background: "$mauve5",
+        },
+      },
+    },
+    {
+      outline: true,
+      variant: "secondary",
+      css: {
+        background: "transparent",
+        color: "$mauve12",
+        "&:hover": {
+          color: "$mauve12",
+          background: "$mauve5",
         },
       },
     },
@@ -168,4 +270,22 @@ const Button = styled("button", {
   },
 });
 
-export default Button;
+const CustomButton: React.FC<
+  React.ComponentProps<typeof StyledButton> & { as?: string }
+> = React.forwardRef(({ children, as = "button", ...rest }, ref) => (
+  // @ts-expect-error
+  <StyledButton {...rest} ref={ref} as={as}>
+    <Flex
+      as="span"
+      css={{ gap: "$2", alignItems: "center" }}
+      className="button-content"
+    >
+      {children}
+    </Flex>
+    {rest.isLoading && <Spinner css={{ position: "absolute" }} />}
+  </StyledButton>
+));
+
+CustomButton.displayName = "CustomButton";
+
+export default CustomButton;

components/ButtonGroup.tsx

@@ -0,0 +1,29 @@
+import { styled } from "../stitches.config";
+import { StyledButton } from "./Button";
+
+const ButtonGroup = styled("div", {
+  display: "flex",
+  marginLeft: "1px",
+  [`& ${StyledButton}`]: {
+    marginLeft: "-1px",
+    px: "$4",
+    zIndex: 2,
+    position: "relative",
+    "&:hover, &:focus": {
+      zIndex: 200,
+    },
+  },
+  [`& ${StyledButton}:not(:only-of-type):not(:first-child):not(:last-child)`]: {
+    borderRadius: 0,
+  },
+  [`& ${StyledButton}:first-child:not(:only-of-type)`]: {
+    borderBottomRightRadius: 0,
+    borderTopRightRadius: 0,
+  },
+  [`& ${StyledButton}:last-child:not(:only-of-type)`]: {
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0,
+  },
+});
+
+export default ButtonGroup;

components/DebugStream.tsx

@@ -0,0 +1,217 @@
+import { useCallback, useEffect } from "react";
+import { proxy, ref, useSnapshot } from "valtio";
+import { Select } from ".";
+import state, { ILog, transactionsState } from "../state";
+import { extractJSON } from "../utils/json";
+import LogBox from "./LogBox";
+
+interface ISelect<T = string> {
+  label: string;
+  value: T;
+}
+
+export interface IStreamState {
+  selectedAccount: ISelect | null;
+  status: "idle" | "opened" | "closed";
+  statusChangeTimestamp?: number;
+  logs: ILog[];
+  socket?: WebSocket;
+}
+
+export const streamState = proxy<IStreamState>({
+  selectedAccount: null as ISelect | null,
+  status: "idle",
+  logs: [] as ILog[],
+});
+
+const DebugStream = () => {
+  const { selectedAccount, logs, socket } = useSnapshot(streamState);
+  const { activeHeader: activeTxTab } = useSnapshot(transactionsState);
+  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%" }}
+      />
+    </>
+  );
+
+  useEffect(() => {
+    const account = selectedAccount?.value;
+    if (account && (!socket || !socket.url.endsWith(account))) {
+      socket?.close();
+      streamState.socket = ref(
+        new WebSocket(
+          `wss://${process.env.NEXT_PUBLIC_DEBUG_STREAM_URL}/${account}`
+        )
+      );
+    } else if (!account && socket) {
+      socket.close();
+      streamState.socket = undefined;
+    }
+  }, [selectedAccount?.value, socket]);
+
+  const onMount = useCallback(async () => {
+    // deliberately using `proxy` values and not the `useSnapshot` ones to have no dep list
+    const acc = streamState.selectedAccount;
+    const status = streamState.status;
+
+    if (status === "opened" && acc) {
+      // fetch the missing ones
+      try {
+        const url = `https://${process.env.NEXT_PUBLIC_DEBUG_STREAM_URL}/recent/${acc?.value}`;
+
+        // TODO Remove after api sets cors properly
+        const res = await fetch("/api/proxy", {
+          method: "POST",
+          body: JSON.stringify({ url }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!res.ok) return;
+
+        const body = await res.json();
+
+        if (!body?.logs) return;
+
+        const start = streamState.statusChangeTimestamp || 0;
+        streamState.logs = [];
+        pushLog(`Debug stream opened for account ${acc.value}`, {
+          type: "success",
+        });
+
+        const logs = Object.entries(body.logs).filter(([tm]) => +tm >= start);
+
+        logs.forEach(([tm, log]) => pushLog(log));
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
+
+  useEffect(() => {
+    const account = selectedAccount?.value;
+    const socket = streamState.socket;
+    if (!socket) return;
+
+    const onOpen = () => {
+      streamState.logs = [];
+      streamState.status = "opened";
+      streamState.statusChangeTimestamp = Date.now();
+      pushLog(`Debug stream opened for account ${account}`, {
+        type: "success",
+      });
+    };
+    const onError = () => {
+      pushLog("Something went wrong! Check your connection and try again.", {
+        type: "error",
+      });
+    };
+    const onClose = (e: CloseEvent) => {
+      pushLog(`Connection was closed. [code: ${e.code}]`, {
+        type: "error",
+      });
+      streamState.selectedAccount = null;
+      streamState.status = "closed";
+      streamState.statusChangeTimestamp = Date.now();
+    };
+    const onMessage = (event: any) => {
+      pushLog(event.data);
+    };
+
+    socket.addEventListener("open", onOpen);
+    socket.addEventListener("close", onClose);
+    socket.addEventListener("error", onError);
+    socket.addEventListener("message", onMessage);
+
+    return () => {
+      socket.removeEventListener("open", onOpen);
+      socket.removeEventListener("close", onClose);
+      socket.removeEventListener("message", onMessage);
+      socket.removeEventListener("error", onError);
+    };
+  }, [selectedAccount?.value, socket]);
+
+  useEffect(() => {
+    const account = transactionsState.transactions.find(
+      tx => tx.header === activeTxTab
+    )?.state.selectedAccount;
+
+    if (account && account.value !== streamState.selectedAccount?.value)
+      streamState.selectedAccount = account;
+  }, [activeTxTab]);
+
+  const clearLog = () => {
+    streamState.logs = [];
+    streamState.statusChangeTimestamp = Date.now();
+  };
+
+  return (
+    <LogBox
+      enhanced
+      renderNav={renderNav}
+      title="Debug stream"
+      logs={logs}
+      clearLog={clearLog}
+    />
+  );
+};
+
+export default DebugStream;
+
+export const pushLog = (
+  str: any,
+  opts: Partial<Pick<ILog, "type">> = {}
+): ILog | undefined => {
+  if (!str) return;
+  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 timestamp = Date.parse(tm || "") || undefined;
+  const timestring = !timestamp ? tm : new Date(timestamp).toLocaleTimeString();
+
+  const extracted = extractJSON(msg);
+  const message = !extracted
+    ? msg
+    : msg.slice(0, extracted.start) + msg.slice(extracted.end + 1);
+
+  const jsonData = extracted
+    ? JSON.stringify(extracted.result, null, 2)
+    : undefined;
+
+  if (extracted?.result?.id?._Request?.includes("hooks-builder-req")) {
+    return;
+  }
+
+  const { type = "log" } = opts;
+  const log: ILog = {
+    type,
+    message,
+    timestring,
+    jsonData,
+    defaultCollapsed: true,
+  };
+
+  if (log) streamState.logs.push(log);
+  return log;
+};

components/DeployEditor.tsx

@@ -0,0 +1,151 @@
+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 { Button, Text, Link, Flex } from ".";
+
+loader.config({
+  paths: {
+    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
+  },
+});
+
+const FILESIZE_BREAKPOINTS: [number, number] = [2 * 1024, 5 * 1024];
+
+const DeployEditor = () => {
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
+  const snap = useSnapshot(state);
+  const router = useRouter();
+  const { theme } = useTheme();
+
+  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={{
+        flex: 1,
+        display: "flex",
+        position: "relative",
+        flexDirection: "column",
+        backgroundColor: "$mauve2",
+        width: "100%",
+      }}
+    >
+      <EditorNavigation showWat />
+      <Container
+        css={{
+          display: "flex",
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        {!isContent ? (
+          NoContentView
+        ) : !showContent ? (
+          CompiledStatView
+        ) : (
+          <Editor
+            className="hooks-editor"
+            defaultLanguage={"wat"}
+            language={"wat"}
+            path={`file://tmp/c/${snap.files?.[snap.active]?.name}.wat`}
+            value={snap.files?.[snap.active]?.compiledWatContent || ""}
+            beforeMount={(monaco) => {
+              monaco.languages.register({ id: "wat" });
+              monaco.languages.setLanguageConfiguration("wat", wat.config);
+              monaco.languages.setMonarchTokensProvider("wat", wat.tokens);
+              if (!state.editorCtx) {
+                state.editorCtx = ref(monaco.editor);
+                // @ts-expect-error
+                monaco.editor.defineTheme("dark", dark);
+                // @ts-expect-error
+                monaco.editor.defineTheme("light", light);
+              }
+            }}
+            onMount={(editor, monaco) => {
+              editorRef.current = editor;
+              editor.updateOptions({
+                glyphMargin: true,
+                readOnly: true,
+              });
+            }}
+            theme={theme === "dark" ? "dark" : "light"}
+          />
+        )}
+      </Container>
+    </Box>
+  );
+};
+
+export default DeployEditor;

components/DeployFooter.tsx

@@ -0,0 +1,103 @@
+import React, { useRef, useLayoutEffect } from "react";
+import { useSnapshot } from "valtio";
+import { Play, Prohibit } from "phosphor-react";
+import useStayScrolled from "react-stay-scrolled";
+
+import Container from "./Container";
+import Box from "./Box";
+import LogText from "./LogText";
+import { compileCode } from "../state/actions";
+import state from "../state";
+import Button from "./Button";
+import Heading from "./Heading";
+
+const Footer = () => {
+  const snap = useSnapshot(state);
+  const logRef = useRef<HTMLPreElement>(null);
+  const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
+
+  useLayoutEffect(() => {
+    stayScrolled();
+  }, [snap.logs, stayScrolled]);
+
+  return (
+    <Box
+      as="footer"
+      css={{
+        display: "flex",
+        borderTop: "1px solid $mauve6",
+        background: "$mauve1",
+        position: "relative",
+      }}
+    >
+      <Container css={{ py: "$3", flexShrink: 1 }}>
+        <Heading
+          as="h3"
+          css={{ fontWeight: 300, m: 0, fontSize: "11px", color: "$mauve9" }}
+        >
+          DEVELOPMENT LOG
+        </Heading>
+        <Button
+          ghost
+          size="xs"
+          css={{
+            position: "absolute",
+            right: "$3",
+            top: "$2",
+            color: "$mauve10",
+          }}
+          onClick={() => {
+            state.logs = [];
+          }}
+        >
+          <Prohibit size="14px" />
+        </Button>
+        <Box
+          as="pre"
+          ref={logRef}
+          css={{
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "160px",
+            fontSize: "13px",
+            fontWeight: "$body",
+            fontFamily: "$monospace",
+            overflowY: "auto",
+            wordWrap: "break-word",
+            py: 3,
+          }}
+        >
+          {snap.logs?.map((log, index) => (
+            <Box as="span" key={log.type + index}>
+              <LogText capitalize variant={log.type}>
+                {log.type}:{" "}
+              </LogText>
+              <LogText>{log.message}</LogText>
+            </Box>
+          ))}
+        </Box>
+        <Button
+          variant="primary"
+          uppercase
+          disabled={!snap.files.length}
+          isLoading={snap.compiling}
+          onClick={() => compileCode(snap.active)}
+          css={{
+            position: "absolute",
+            bottom: "$4",
+            left: "$4",
+            alignItems: "center",
+            display: "flex",
+            cursor: "pointer",
+          }}
+        >
+          <Play weight="bold" size="16px" />
+          Compile to Wasm
+        </Button>
+      </Container>
+    </Box>
+  );
+};
+
+export default Footer;

components/Dialog.tsx

@@ -1,103 +1,90 @@
 import React from "react";
 import * as Stiches from "@stitches/react";
 import { keyframes } from "@stitches/react";
-import { violet, blackA, mauve, whiteA } from "@radix-ui/colors";
+import { blackA } from "@radix-ui/colors";
 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)" },
-  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+  "0%": { opacity: 0.01 },
+  "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.blackA9,
+    backgroundColor: blackA.blackA11,
   },
 });
 
 const StyledContent = styled(DialogPrimitive.Content, {
   zIndex: 1000,
-  backgroundColor: "$slate2",
-  color: "$slate12",
+  backgroundColor: "$mauve2",
+  color: "$mauve12",
   borderRadius: "$md",
+  position: "relative",
+  mb: "15%",
   boxShadow:
     "0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)",
-  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)`,
   },
   "&:focus": { outline: "none" },
   ".dark &": {
-    backgroundColor: "$slate5",
+    backgroundColor: "$mauve5",
     boxShadow:
-      "0px 10px 38px 0px rgba(22, 23, 24, 0.85), 0px 10px 20px 0px rgba(22, 23, 24, 0.6)",
+      "0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)",
   },
 });
 
 const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => {
   return (
-    <div>
-      <StyledOverlay />
+    <StyledOverlay>
       <StyledContent css={css}>{children}</StyledContent>
-    </div>
+    </StyledOverlay>
   );
 };
 
 const StyledTitle = styled(DialogPrimitive.Title, {
   margin: 0,
   fontWeight: 500,
-  color: "$slate12",
+  color: "$mauve12",
   fontSize: 17,
 });
 
 const StyledDescription = styled(DialogPrimitive.Description, {
-  margin: "10px 0 20px",
-  color: "$slate11",
+  margin: "10px 0 10px",
+  color: "$mauve11",
   fontSize: 15,
   lineHeight: 1.5,
 });
 
 // Exports
-export const Dialog = DialogPrimitive.Root;
+export const Dialog = styled(DialogPrimitive.Root);
 export const DialogTrigger = DialogPrimitive.Trigger;
 export const DialogContent = Content;
 export const DialogTitle = StyledTitle;
 export const DialogDescription = StyledDescription;
 export const DialogClose = DialogPrimitive.Close;
-
-const Input = styled("input", {
-  all: "unset",
-  width: "100%",
-  flex: "1",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: 4,
-  padding: "0 10px",
-  fontSize: 15,
-  lineHeight: 1,
-  color: violet.violet11,
-  boxShadow: `0 0 0 1px ${violet.violet7}`,
-  height: 35,
-
-  "&:focus": { boxShadow: `0 0 0 2px ${violet.violet8}` },
-});
+export const DialogPortal = DialogPrimitive.Portal;

components/DropdownMenu.tsx

@@ -2,7 +2,6 @@ import { keyframes } from "@stitches/react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 import { styled } from "../stitches.config";
-import { blackA, slateDark } from "@radix-ui/colors";
 
 const slideUpAndFade = keyframes({
   "0%": { opacity: 0, transform: "translateY(2px)" },
@@ -26,7 +25,7 @@ const slideLeftAndFade = keyframes({
 
 const StyledContent = styled(DropdownMenuPrimitive.Content, {
   minWidth: 220,
-  backgroundColor: "$slate2",
+  backgroundColor: "$mauve2",
   borderRadius: 6,
   padding: 5,
   boxShadow:
@@ -43,7 +42,7 @@ const StyledContent = styled(DropdownMenuPrimitive.Content, {
     },
   },
   ".dark &": {
-    backgroundColor: "$slate5",
+    backgroundColor: "$mauve5",
     boxShadow:
       "0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)",
   },
@@ -53,7 +52,7 @@ const itemStyles = {
   all: "unset",
   fontSize: 13,
   lineHeight: 1,
-  color: "$slate12",
+  color: "$mauve12",
   borderRadius: 3,
   display: "flex",
   alignItems: "center",
@@ -62,15 +61,17 @@ const itemStyles = {
   position: "relative",
   paddingLeft: "5px",
   userSelect: "none",
+  py: "$0.5",
+  pr: "$2",
   gap: "$2",
 
   "&[data-disabled]": {
-    color: "$slate9",
+    color: "$mauve9",
     pointerEvents: "none",
   },
 
   "&:focus": {
-    backgroundColor: "$pink9",
+    backgroundColor: "$purple9",
     color: "$white",
   },
 };
@@ -84,8 +85,8 @@ const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, {
 });
 const StyledTriggerItem = styled(DropdownMenuPrimitive.TriggerItem, {
   '&[data-state="open"]': {
-    backgroundColor: "$pink9",
-    color: "$pink9",
+    backgroundColor: "$purple9",
+    color: "$purple9",
   },
   ...itemStyles,
 });
@@ -94,12 +95,12 @@ const StyledLabel = styled(DropdownMenuPrimitive.Label, {
   paddingLeft: 25,
   fontSize: 12,
   lineHeight: "25px",
-  color: "$slate11",
+  color: "$mauve11",
 });
 
 const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
   height: 1,
-  backgroundColor: "$slate7",
+  backgroundColor: "$mauve7",
   margin: 5,
 });
 
@@ -113,7 +114,10 @@ const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
 });
 
 const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
-  fill: "$slate2",
+  fill: "$mauve2",
+  ".dark &": {
+    fill: "$mauve5",
+  },
 });
 
 // Exports

components/EditorNavigation.tsx

@@ -1,8 +1,39 @@
-import React, { useRef, useState } from "react";
-import { Plus, Share, DownloadSimple, Gear, X } from "phosphor-react";
-import { useTheme } from "next-themes";
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  Plus,
+  Share,
+  DownloadSimple,
+  Gear,
+  X,
+  GithubLogo,
+  SignOut,
+  ArrowSquareOut,
+  CloudArrowUp,
+  CaretDown,
+  User,
+  FilePlus,
+} from "phosphor-react";
+import Image from "next/image";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuArrow,
+  DropdownMenuSeparator,
+} from "./DropdownMenu";
+import NewWindow from "react-new-window";
+import { signOut, useSession } from "next-auth/react";
+import { useSnapshot } from "valtio";
+import toast from "react-hot-toast";
 
-import { createNewFile, state, updateEditorSettings } from "../state";
+import {
+  createNewFile,
+  syncToGist,
+  updateEditorSettings,
+  downloadAsZip,
+} from "../state/actions";
+import state from "../state";
 import Box from "./Box";
 import Button from "./Button";
 import Container from "./Container";
@@ -16,217 +47,502 @@ import {
 } from "./Dialog";
 import Flex from "./Flex";
 import Stack from "./Stack";
-import { useSnapshot } from "valtio";
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { Input, Label } from "./Input";
+import Text from "./Text";
+import Tooltip from "./Tooltip";
+import { styled } from "../stitches.config";
+import { showAlert } from "../state/actions/showAlert";
 
-const EditorNavigation = () => {
+const ErrorText = styled(Text, {
+  color: "$error",
+  mt: "$1",
+  display: "block",
+});
+
+const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
   const snap = useSnapshot(state);
+  const [editorSettingsOpen, setEditorSettingsOpen] = useState(false);
+  const [isNewfileDialogOpen, setIsNewfileDialogOpen] = useState(false);
+  const [newfileError, setNewfileError] = useState<string | null>(null);
   const [filename, setFilename] = useState("");
-  const { theme } = useTheme();
   const { data: session, status } = useSession();
-  const router = useRouter();
+  const [popup, setPopUp] = useState(false);
   const [editorSettings, setEditorSettings] = useState(snap.editorSettings);
+  useEffect(() => {
+    if (session && session.user && popup) {
+      setPopUp(false);
+    }
+  }, [session, popup]);
+
+  // when filename changes, reset error
+  useEffect(() => {
+    setNewfileError(null);
+  }, [filename, setNewfileError]);
+
+  const showNewGistAlert = () => {
+    showAlert("Are you sure?", {
+      body: (
+        <>
+          This action will create new <strong>public</strong> Github Gist from
+          your current saved files. You can delete gist anytime from your GitHub
+          Gists page.
+        </>
+      ),
+      cancelText: "Cancel",
+      confirmText: "Create new Gist",
+      confirmPrefix: <FilePlus size="15px" />,
+      onConfirm: () => syncToGist(session, true),
+    });
+  };
+
+  const validateFilename = useCallback(
+    (filename: string): { error: string | null } => {
+      // check if filename already exists
+      if (!filename) {
+        return { error: "You need to add filename" };
+      }
+      if (snap.files.find(file => file.name === filename)) {
+        return { error: "Filename already exists." };
+      }
+
+      if (!filename.includes(".") || filename[filename.length - 1] === ".") {
+        return { error: "Filename should include file extension" };
+      }
+
+      // check for illegal characters
+      const ALPHA_NUMERICAL_REGEX = /^[A-Za-z0-9_-]+[.][A-Za-z0-9]{1,4}$/g;
+      if (!filename.match(ALPHA_NUMERICAL_REGEX)) {
+        return {
+          error: `Filename can contain only characters from a-z, A-Z, 0-9, "_" and "-" and it needs to have file extension (e.g. ".c")`,
+        };
+      }
+      return { error: null };
+    },
+    [snap.files]
+  );
+  const handleConfirm = useCallback(() => {
+    // add default extension in case omitted
+    const chk = validateFilename(filename);
+    if (chk && chk.error) {
+      setNewfileError(`Error: ${chk.error}`);
+      return;
+    }
+
+    setIsNewfileDialogOpen(false);
+    createNewFile(filename);
+    setFilename("");
+  }, [filename, setIsNewfileDialogOpen, setFilename, validateFilename]);
+
+  const files = snap.files;
   return (
     <Flex css={{ flexShrink: 0, gap: "$0" }}>
-      <Flex css={{ overflowX: "scroll", py: "$3", flex: 1 }}>
+      <Flex
+        css={{
+          overflowX: "scroll",
+          py: "$3",
+          flex: 1,
+          "&::-webkit-scrollbar": {
+            height: 0,
+            background: "transparent",
+          },
+        }}
+      >
         <Container css={{ flex: 1 }}>
-          <Stack css={{ gap: "$3", flex: 1, flexWrap: "nowrap" }}>
-            {state.loading && "loading"}
-            {snap.files &&
-              snap.files.length > 0 &&
-              snap.files?.map((file, index) => (
-                <Button
-                  size="sm"
-                  outline={snap.active !== index}
-                  onClick={() => (state.active = index)}
-                  key={file.name}
-                  css={{
-                    "&:hover": {
-                      span: {
-                        visibility: "visible",
-                      },
-                    },
-                  }}
-                >
-                  {file.name}
-                  <Box
-                    as="span"
+          <Stack
+            css={{
+              gap: "$3",
+              flex: 1,
+              flexWrap: "nowrap",
+              marginBottom: "-1px",
+            }}
+          >
+            {files &&
+              files.length > 0 &&
+              files.map((file, index) => {
+                if (!file.compiledContent && showWat) {
+                  return null;
+                }
+                return (
+                  <Button
+                    size="sm"
+                    outline={
+                      showWat ? snap.activeWat !== index : snap.active !== index
+                    }
+                    onClick={() => (state.active = index)}
+                    key={file.name + index}
                     css={{
-                      display: "flex",
-                      p: "1px",
-                      borderRadius: "$full",
-                      mr: "-4px",
+                      "&:hover": {
+                        span: {
+                          visibility: "visible",
+                        },
+                      },
                     }}
-                    onClick={() => state.files.splice(index, 1)}
                   >
-                    <X size="13px" />
-                  </Box>
-                </Button>
-              ))}
-
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button
-                  ghost
-                  size="sm"
-                  css={{ alignItems: "center", px: "$2", mr: "$3" }}
-                >
-                  <Plus size="16px" />{" "}
-                  {snap.files.length === 0 && "Add new file"}
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogTitle>Create new file</DialogTitle>
-                <DialogDescription>
-                  <span>
-                    Create empty C file or select one of the existing ones
-                  </span>
-                  <input
-                    value={filename}
-                    onChange={(e) => setFilename(e.target.value)}
-                  />
-                </DialogDescription>
-
-                <Flex
-                  css={{ marginTop: 25, justifyContent: "flex-end", gap: "$3" }}
-                >
-                  <DialogClose asChild>
-                    <Button outline>Cancel</Button>
-                  </DialogClose>
-                  <DialogClose asChild>
-                    <Button
-                      variant="primary"
-                      onClick={() => {
-                        createNewFile(filename);
-                        // reset
-                        setFilename("");
+                    {file.name}
+                    {showWat && ".wat"}
+                    {!showWat && (
+                      <Box
+                        as="span"
+                        css={{
+                          display: "flex",
+                          p: "2px",
+                          borderRadius: "$full",
+                          mr: "-4px",
+                          "&:hover": {
+                            // boxSizing: "0px 0px 1px",
+                            backgroundColor: "$mauve2",
+                            color: "$mauve12",
+                          },
+                        }}
+                        onClick={(ev: React.MouseEvent<HTMLElement>) => {
+                          ev.stopPropagation();
+                          // Remove file from state
+                          state.files.splice(index, 1);
+                          // Change active file state
+                          // If deleted file is behind active tab
+                          // we keep the current state otherwise
+                          // select previous file on the list
+                          state.active =
+                            index > snap.active ? snap.active : snap.active - 1;
+                        }}
+                      >
+                        <X size="9px" weight="bold" />
+                      </Box>
+                    )}
+                  </Button>
+                );
+              })}
+            {!showWat && (
+              <Dialog
+                open={isNewfileDialogOpen}
+                onOpenChange={setIsNewfileDialogOpen}
+              >
+                <DialogTrigger asChild>
+                  <Button
+                    ghost
+                    size="sm"
+                    css={{ alignItems: "center", px: "$2", mr: "$3" }}
+                  >
+                    <Plus size="16px" />{" "}
+                    {snap.files.length === 0 && "Add new file"}
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogTitle>Create new file</DialogTitle>
+                  <DialogDescription>
+                    <Label>Filename</Label>
+                    <Input
+                      value={filename}
+                      onChange={e => setFilename(e.target.value)}
+                      onKeyPress={e => {
+                        if (e.key === "Enter") {
+                          handleConfirm();
+                        }
                       }}
-                    >
+                    />
+                    <ErrorText>{newfileError}</ErrorText>
+                  </DialogDescription>
+
+                  <Flex
+                    css={{
+                      marginTop: 25,
+                      justifyContent: "flex-end",
+                      gap: "$3",
+                    }}
+                  >
+                    <DialogClose asChild>
+                      <Button outline>Cancel</Button>
+                    </DialogClose>
+                    <Button variant="primary" onClick={handleConfirm}>
                       Create file
                     </Button>
+                  </Flex>
+                  <DialogClose asChild>
+                    <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
+                      <X size="20px" />
+                    </Box>
                   </DialogClose>
-                </Flex>
-                <DialogClose asChild>
-                  <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
-                    <X size="20px" />
-                  </Box>
-                </DialogClose>
-              </DialogContent>
-            </Dialog>
+                </DialogContent>
+              </Dialog>
+            )}
           </Stack>
         </Container>
       </Flex>
       <Flex
         css={{
           py: "$3",
-          backgroundColor: "$slate3",
+          backgroundColor: "$mauve2",
           zIndex: 1,
         }}
       >
-        <Container css={{ width: "unset" }}>
+        <Container
+          css={{ width: "unset", display: "flex", alignItems: "center" }}
+        >
+          {status === "authenticated" ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Box
+                  css={{
+                    display: "flex",
+                    borderRadius: "$full",
+                    overflow: "hidden",
+                    width: "$6",
+                    height: "$6",
+                    boxShadow: "0px 0px 0px 1px $colors$mauve11",
+                    position: "relative",
+                    mr: "$3",
+                    "@hover": {
+                      "&:hover": {
+                        cursor: "pointer",
+                        boxShadow: "0px 0px 0px 1px $colors$mauve12",
+                      },
+                    },
+                  }}
+                >
+                  <Image
+                    src={session?.user?.image || ""}
+                    width="30px"
+                    height="30px"
+                    objectFit="cover"
+                    alt="User avatar"
+                  />
+                </Box>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem disabled onClick={() => signOut()}>
+                  <User size="16px" /> {session?.user?.username} (
+                  {session?.user.name})
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() =>
+                    window.open(
+                      `http://gist.github.com/${session?.user.username}`
+                    )
+                  }
+                >
+                  <ArrowSquareOut size="16px" />
+                  Go to your Gist
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/" })}>
+                  <SignOut size="16px" /> Log out
+                </DropdownMenuItem>
+
+                <DropdownMenuArrow offset={10} />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <Button
+              outline
+              size="sm"
+              css={{ mr: "$3" }}
+              onClick={() => setPopUp(true)}
+            >
+              <GithubLogo size="16px" /> Login
+            </Button>
+          )}
+
           <Stack
             css={{
               display: "inline-flex",
               marginLeft: "auto",
               flexShrink: 0,
               gap: "$0",
-              border: "1px solid $slate10",
               borderRadius: "$sm",
+              boxShadow: "inset 0px 0px 0px 1px $colors$mauve10",
               zIndex: 9,
               position: "relative",
-              overflow: "hidden",
               button: {
-                borderRadius: "$0",
+                borderRadius: 0,
                 px: "$2",
                 alignSelf: "flex-start",
+                boxShadow: "none",
+              },
+              "button:not(:first-child):not(:last-child)": {
+                borderRight: 0,
+                borderLeft: 0,
+              },
+              "button:first-child": {
+                borderTopLeftRadius: "$sm",
+                borderBottomLeftRadius: "$sm",
+              },
+              "button:last-child": {
+                borderTopRightRadius: "$sm",
+                borderBottomRightRadius: "$sm",
+                boxShadow: "inset 0px 0px 0px 1px $colors$mauve10",
+                "&:hover": {
+                  boxShadow: "inset 0px 0px 0px 1px $colors$mauve12",
+                },
               },
             }}
           >
-            <Button ghost size="sm" css={{ alignItems: "center" }}>
-              <DownloadSimple size="16px" />
-            </Button>
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button ghost size="sm" css={{ alignItems: "center" }}>
+            <Tooltip content="Download as ZIP">
+              <Button
+                isLoading={snap.zipLoading}
+                onClick={downloadAsZip}
+                outline
+                size="sm"
+                css={{ alignItems: "center" }}
+              >
+                <DownloadSimple size="16px" />
+              </Button>
+            </Tooltip>
+            <Tooltip content="Copy share link to clipboard">
+              <Button
+                outline
+                size="sm"
+                css={{ alignItems: "center" }}
+                onClick={() => {
+                  navigator.clipboard.writeText(
+                    `${window.location.origin}/develop/${snap.gistId}`
+                  );
+                  toast.success("Copied share link to clipboard!");
+                }}
+              >
+                <Share size="16px" />
+              </Button>
+            </Tooltip>
+            <Tooltip
+              content={
+                session && session.user
+                  ? snap.gistOwner === session?.user.username
+                    ? "Sync to Gist"
+                    : "Create as a new Gist"
+                  : "You need to be logged in to sync with Gist"
+              }
+            >
+              <Button
+                outline
+                size="sm"
+                isDisabled={!session || !session.user}
+                isLoading={snap.gistLoading}
+                css={{ alignItems: "center" }}
+                onClick={() => {
+                  if (!session || !session.user) {
+                    return;
+                  }
+                  if (snap.gistOwner === session?.user.username) {
+                    syncToGist(session);
+                  } else {
+                    showNewGistAlert();
+                  }
+                }}
+              >
+                {snap.gistOwner === session?.user.username ? (
+                  <CloudArrowUp size="16px" />
+                ) : (
+                  <FilePlus size="16px" />
+                )}
+              </Button>
+            </Tooltip>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button outline size="sm">
+                  <CaretDown size="16px" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem
+                  disabled={snap.zipLoading}
+                  onClick={downloadAsZip}
+                >
+                  <DownloadSimple size="16px" /> Download as ZIP
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => {
+                    navigator.clipboard.writeText(
+                      `${window.location.origin}/develop/${snap.gistId}`
+                    );
+                    toast.success("Copied share link to clipboard!");
+                  }}
+                >
                   <Share size="16px" />
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogTitle>Share hook</DialogTitle>
-                <DialogDescription>
-                  <span>
-                    We will store your hook code in public GitHub Gist and
-                    generate link to that
-                  </span>
-                </DialogDescription>
-
-                <Flex
-                  css={{ marginTop: 25, justifyContent: "flex-end", gap: "$3" }}
+                  Copy share link to clipboard
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  disabled={
+                    session?.user.username !== snap.gistOwner || !snap.gistId
+                  }
+                  onClick={() => {
+                    syncToGist(session);
+                  }}
                 >
-                  <DialogClose asChild>
-                    <Button outline>Cancel</Button>
-                  </DialogClose>
-                </Flex>
-                <DialogClose asChild>
-                  <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
-                    <X size="20px" />
-                  </Box>
-                </DialogClose>
-              </DialogContent>
-            </Dialog>
-
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button ghost size="sm" css={{ alignItems: "center" }}>
-                  <Gear size="16px" />
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogTitle>Editor settings</DialogTitle>
-                <DialogDescription>
-                  <span>You can edit your editor settings here</span>
-                  <input
-                    value={editorSettings.tabSize}
-                    onChange={(e) =>
-                      setEditorSettings((curr) => ({
-                        ...curr,
-                        tabSize: Number(e.target.value),
-                      }))
-                    }
-                  />
-                </DialogDescription>
-
-                <Flex
-                  css={{ marginTop: 25, justifyContent: "flex-end", gap: "$3" }}
+                  <CloudArrowUp size="16px" /> Push to Gist
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  disabled={status !== "authenticated"}
+                  onClick={() => {
+                    showNewGistAlert();
+                  }}
                 >
-                  <DialogClose asChild>
-                    <Button
-                      outline
-                      onClick={() => updateEditorSettings(editorSettings)}
-                    >
-                      Cancel
-                    </Button>
-                  </DialogClose>
-                  <DialogClose asChild>
-                    <Button
-                      variant="primary"
-                      onClick={() => updateEditorSettings(editorSettings)}
-                    >
-                      Save changes
-                    </Button>
-                  </DialogClose>
-                </Flex>
-                <DialogClose asChild>
-                  <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
-                    <X size="20px" />
-                  </Box>
-                </DialogClose>
-              </DialogContent>
-            </Dialog>
+                  <FilePlus size="16px" /> Create as a new Gist
+                </DropdownMenuItem>
+
+                <DropdownMenuItem onClick={() => setEditorSettingsOpen(true)}>
+                  <Gear size="16px" /> Editor Settings
+                </DropdownMenuItem>
+
+                <DropdownMenuArrow offset={10} />
+              </DropdownMenuContent>
+            </DropdownMenu>
           </Stack>
+
+          {popup && !session ? (
+            <NewWindow center="parent" url="/sign-in" />
+          ) : null}
         </Container>
       </Flex>
+
+      <Dialog open={editorSettingsOpen} onOpenChange={setEditorSettingsOpen}>
+        <DialogTrigger asChild>
+          {/* <Button outline size="sm" css={{ alignItems: "center" }}>
+                  <Gear size="16px" />
+                </Button> */}
+        </DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Editor settings</DialogTitle>
+          <DialogDescription>
+            <Label>Tab size</Label>
+            <Input
+              type="number"
+              min="1"
+              value={editorSettings.tabSize}
+              onChange={e =>
+                setEditorSettings(curr => ({
+                  ...curr,
+                  tabSize: Number(e.target.value),
+                }))
+              }
+            />
+          </DialogDescription>
+
+          <Flex css={{ marginTop: 25, justifyContent: "flex-end", gap: "$3" }}>
+            <DialogClose asChild>
+              <Button
+                outline
+                onClick={() => updateEditorSettings(editorSettings)}
+              >
+                Cancel
+              </Button>
+            </DialogClose>
+            <DialogClose asChild>
+              <Button
+                variant="primary"
+                onClick={() => updateEditorSettings(editorSettings)}
+              >
+                Save changes
+              </Button>
+            </DialogClose>
+          </Flex>
+          <DialogClose asChild>
+            <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
+              <X size="20px" />
+            </Box>
+          </DialogClose>
+        </DialogContent>
+      </Dialog>
     </Flex>
   );
 };

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/Footer.tsx

@@ -1,51 +0,0 @@
-import { useSnapshot } from "valtio";
-import Container from "./Container";
-import Box from "./Box";
-
-import LogText from "./LogText";
-import { state } from "../state";
-
-const Footer = () => {
-  const snap = useSnapshot(state);
-  return (
-    <Box
-      as="footer"
-      css={{
-        display: "flex",
-        borderTop: "1px solid $slate6",
-        background: "$slate1",
-      }}
-    >
-      <Container css={{ py: "$4", flexShrink: 1 }}>
-        <Box
-          as="pre"
-          css={{
-            display: "flex",
-            flexDirection: "column",
-            width: "100%",
-            height: "160px",
-            fontSize: "13px",
-            fontWeight: "$body",
-            fontFamily: "$monospace",
-            overflowY: "scroll",
-            wordWrap: "break-word",
-            py: 3,
-            px: 3,
-            m: 3,
-          }}
-        >
-          {snap.logs.map((log, index) => (
-            <Box key={log.type + index}>
-              <LogText capitalize variant={log.type}>
-                {log.type}:{" "}
-              </LogText>
-              <LogText>{log.message}</LogText>
-            </Box>
-          ))}
-        </Box>
-      </Container>
-    </Box>
-  );
-};
-
-export default Footer;

components/Heading.tsx

@@ -4,7 +4,13 @@ const Heading = styled("span", {
   fontFamily: "$heading",
   lineHeight: "$heading",
   fontWeight: "$heading",
-  textTransform: "uppercase",
+  variants: {
+    uppercase: {
+      true: {
+        textTransform: "uppercase",
+      },
+    },
+  },
 });
 
 export default Heading;

components/HooksEditor.tsx

@@ -1,33 +1,124 @@
 import React, { useEffect, useRef } from "react";
 import { useSnapshot, ref } from "valtio";
-import Editor from "@monaco-editor/react";
+import Editor, { loader } from "@monaco-editor/react";
 import type monaco from "monaco-editor";
-import { Play } from "phosphor-react";
+import { ArrowBendLeftUp } from "phosphor-react";
 import { useTheme } from "next-themes";
+import { useRouter } from "next/router";
 
 import Box from "./Box";
-import Button from "./Button";
+import Container from "./Container";
 import dark from "../theme/editor/amy.json";
 import light from "../theme/editor/xcode_default.json";
-import { compileCode, saveFile, state } from "../state";
+import { saveFile } from "../state/actions";
+import { apiHeaderFiles } from "../state/constants";
+import state from "../state";
 
 import EditorNavigation from "./EditorNavigation";
-import Spinner from "./Spinner";
+import Text from "./Text";
+import { MonacoServices } from "@codingame/monaco-languageclient";
+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 = 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-")
+    );
+
+  // 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 (snap.editorCtx) {
-  //     snap.editorCtx.getModels().forEach((model) => {
-  //       // console.log(model.id,);
-  //       snap.editorCtx?.createModel(model.getValue(), "c", model.uri);
-  //     });
-  //   }
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, []);
-  console.log("reinit");
+
+  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={{
@@ -36,61 +127,152 @@ const HooksEditor = () => {
         display: "flex",
         position: "relative",
         flexDirection: "column",
-        backgroundColor: "$slate3",
+        backgroundColor: "$mauve2",
         width: "100%",
       }}
     >
       <EditorNavigation />
-      <Editor
-        keepCurrentModel
-        // defaultLanguage={snap.files?.[snap.active]?.language}
-        path={snap.files?.[snap.active]?.name}
-        // defaultValue={snap.files?.[snap.active]?.content}
-        beforeMount={(monaco) => {
-          if (!state.editorCtx) {
-            state.editorCtx = ref(monaco.editor);
-            // @ts-expect-error
-            monaco.editor.defineTheme("dark", dark);
-            // @ts-expect-error
-            monaco.editor.defineTheme("light", light);
-          }
-        }}
-        onMount={(editor, monaco) => {
-          editorRef.current = editor;
-          // hook editor to global state
-          editor.updateOptions({
-            minimap: {
-              enabled: false,
-            },
-            ...snap.editorSettings,
-          });
-          editor.addCommand(
-            monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
-            () => {
-              saveFile(editor.getValue());
+      {snap.files.length > 0 && router.isReady ? (
+        <Editor
+          className="hooks-editor"
+          keepCurrentModel
+          defaultLanguage={snap.files?.[snap.active]?.language}
+          language={snap.files?.[snap.active]?.language}
+          path={`file:///work/c/${snap.files?.[snap.active]?.name}`}
+          defaultValue={snap.files?.[snap.active]?.content}
+          beforeMount={(monaco) => {
+            if (!snap.editorCtx) {
+              snap.files.forEach((file) =>
+                monaco.editor.createModel(
+                  file.content,
+                  file.language,
+                  monaco.Uri.parse(`file:///work/c/${file.name}`)
+                )
+              );
             }
-          );
-        }}
-        theme={theme === "dark" ? "dark" : "light"}
-      />
-      <Button
-        variant="primary"
-        uppercase
-        onClick={() => compileCode(snap.active)}
-        disabled={snap.compiling}
-        css={{
-          position: "absolute",
-          bottom: "$4",
-          left: "$4",
-          alignItems: "center",
-          display: "flex",
-          cursor: "pointer",
-        }}
-      >
-        <Play weight="bold" size="16px" />
-        Compile to Wasm
-        {snap.compiling && <Spinner />}
-      </Button>
+
+            // create the web socket
+            if (!subscriptionRef.current) {
+              monaco.languages.register({
+                id: "c",
+                extensions: [".c", ".h"],
+                aliases: ["C", "c", "H", "h"],
+                mimetypes: ["text/plain"],
+              });
+              MonacoServices.install(monaco);
+              const webSocket = createWebSocket(
+                process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ""
+              );
+              subscriptionRef.current = webSocket;
+              // listen when the web socket is opened
+              listen({
+                webSocket: webSocket as WebSocket,
+                onConnection: (connection) => {
+                  // create and start the language client
+                  const languageClient = createLanguageClient(connection);
+                  const disposable = languageClient.start();
+                  connection.onClose(() => {
+                    try {
+                      // disposable.stop();
+                      disposable.dispose();
+                    } catch (err) {
+                      console.log("err", err);
+                    }
+                  });
+                },
+              });
+            }
+
+            // // hook editor to global state
+            // editor.updateOptions({
+            //   minimap: {
+            //     enabled: false,
+            //   },
+            //   ...snap.editorSettings,
+            // });
+            if (!state.editorCtx) {
+              state.editorCtx = ref(monaco.editor);
+              // @ts-expect-error
+              monaco.editor.defineTheme("dark", dark);
+              // @ts-expect-error
+              monaco.editor.defineTheme("light", light);
+            }
+          }}
+          onMount={(editor, monaco) => {
+            editorRef.current = editor;
+            monacoRef.current = monaco;
+            editor.updateOptions({
+              glyphMargin: true,
+              lightbulb: {
+                enabled: true,
+              },
+            });
+            editor.addCommand(
+              monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
+              () => {
+                saveFile();
+              }
+            );
+            // When the markers (errors/warnings from clangd language server) change
+            // Lets improve the markers by adding extra content to them from related
+            // md files
+            monaco.editor.onDidChangeMarkers(() => {
+              if (monacoRef.current) {
+                setMarkers(monacoRef.current);
+              }
+            });
+
+            // Hacky way to hide Peek menu
+            editor.onContextMenu((e) => {
+              const host =
+                document.querySelector<HTMLElement>(".shadow-root-host");
+
+              const contextMenuItems =
+                host?.shadowRoot?.querySelectorAll("li.action-item");
+              contextMenuItems?.forEach((k) => {
+                // If menu item contains "Peek" lets hide it
+                if (k.querySelector(".action-label")?.textContent === "Peek") {
+                  // @ts-expect-error
+                  k["style"].display = "none";
+                }
+              });
+            });
+
+            validateWritability(editor);
+          }}
+          theme={theme === "dark" ? "dark" : "light"}
+        />
+      ) : (
+        <Container>
+          {!snap.loading && router.isReady && (
+            <Box
+              css={{
+                flexDirection: "row",
+                width: "$spaces$wide",
+                gap: "$3",
+                display: "inline-flex",
+              }}
+            >
+              <Box css={{ display: "inline-flex", pl: "35px" }}>
+                <ArrowBendLeftUp size={30} />
+              </Box>
+              <Box
+                css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}
+              >
+                <Text
+                  css={{
+                    fontSize: "14px",
+                    maxWidth: "220px",
+                    fontFamily: "$monospace",
+                  }}
+                >
+                  Click the link above to create your file
+                </Text>
+              </Box>
+            </Box>
+          )}
+        </Container>
+      )}
     </Box>
   );
 };

components/Input.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import { styled } from "../stitches.config";
+import * as LabelPrim from '@radix-ui/react-label';
+
+export const Input = styled("input", {
+  // Reset
+  appearance: "none",
+  borderWidth: "0",
+  boxSizing: "border-box",
+  fontFamily: "inherit",
+  outline: "none",
+  width: "100%",
+  flex: "1",
+  backgroundColor: "$mauve4",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "$sm",
+  px: "$2",
+  fontSize: "$md",
+  lineHeight: 1,
+  color: "$mauve12",
+  boxShadow: `0 0 0 1px $colors$mauve8`,
+  height: 35,
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  "&::before": {
+    boxSizing: "border-box",
+  },
+  "&::after": {
+    boxSizing: "border-box",
+  },
+  fontVariantNumeric: "tabular-nums",
+
+  "&:-webkit-autofill": {
+    boxShadow: "inset 0 0 0 1px $colors$blue6, inset 0 0 0 100px $colors$blue3",
+  },
+
+  "&:-webkit-autofill::first-line": {
+    fontFamily: "$untitled",
+    color: "$mauve12",
+  },
+
+  "&:focus": {
+    boxShadow: `0 0 0 1px $colors$mauve10`,
+    "&:-webkit-autofill": {
+      boxShadow: `0 0 0 1px $colors$mauve10`,
+    },
+  },
+  "&::placeholder": {
+    color: "$mauve9",
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    backgroundColor: "$mauve2",
+    color: "$mauve8",
+    cursor: "not-allowed",
+    "&::placeholder": {
+      color: "$mauve7",
+    },
+  },
+  "&:read-only": {
+    backgroundColor: "$mauve2",
+    color: "$text",
+    opacity: 0.8,
+    "&:focus": {
+      boxShadow: "inset 0px 0px 0px 1px $colors$mauve7",
+    },
+  },
+
+  variants: {
+    size: {
+      sm: {
+        height: "$5",
+        fontSize: "$1",
+        lineHeight: "$sizes$4",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$1",
+        },
+      },
+      md: {
+        height: "$8",
+        fontSize: "$1",
+        lineHeight: "$sizes$5",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$1",
+        },
+      },
+      lg: {
+        height: "$12",
+        fontSize: "$2",
+        lineHeight: "$sizes$6",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$3",
+        },
+      },
+    },
+    variant: {
+      ghost: {
+        boxShadow: "none",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            boxShadow: "inset 0 0 0 1px $colors$mauve7",
+          },
+        },
+        "&:focus": {
+          backgroundColor: "$loContrast",
+          boxShadow: `0 0 0 1px $colors$mauve10`,
+        },
+        "&:disabled": {
+          backgroundColor: "transparent",
+        },
+        "&:read-only": {
+          backgroundColor: "transparent",
+        },
+      },
+      deep: {
+        backgroundColor: "$deep",
+        boxShadow: "none",
+      },
+    },
+    state: {
+      invalid: {
+        boxShadow: "inset 0 0 0 1px $colors$crimson7",
+        "&:focus": {
+          boxShadow:
+            "inset 0px 0px 0px 1px $colors$crimson8, 0px 0px 0px 1px $colors$crimson8",
+        },
+      },
+      valid: {
+        boxShadow: "inset 0 0 0 1px $colors$grass7",
+        "&:focus": {
+          boxShadow:
+            "inset 0px 0px 0px 1px $colors$grass8, 0px 0px 0px 1px $colors$grass8",
+        },
+      },
+    },
+    cursor: {
+      default: {
+        cursor: "default",
+        "&:focus": {
+          cursor: "text",
+        },
+      },
+      text: {
+        cursor: "text",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+// 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;
+
+
+const LabelRoot = (props: LabelPrim.LabelProps) => <LabelPrim.Root {...props} />
+
+export const Label = styled(LabelRoot, {
+  display: 'inline-block',
+  mb: '$1'
+})

components/Link.tsx

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,232 @@
+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 LogText from "./LogText";
+import state, { ILog } from "../state";
+import { Pre, Link, Heading, Button, Text, Flex, Box } from ".";
+import regexifyString from "regexify-string";
+import { useSnapshot } from "valtio";
+import { AccountDialog } from "./Accounts";
+
+interface ILogBox {
+  title: string;
+  clearLog?: () => void;
+  logs: ILog[];
+  renderNav?: () => ReactNode;
+  enhanced?: boolean;
+}
+
+const LogBox: FC<ILogBox> = ({
+  title,
+  clearLog,
+  logs,
+  children,
+  renderNav,
+  enhanced,
+}) => {
+  const logRef = useRef<HTMLPreElement>(null);
+  const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
+
+  useLayoutEffect(() => {
+    stayScrolled();
+  }, [stayScrolled, logs]);
+
+  return (
+    <Flex
+      as="div"
+      css={{
+        display: "flex",
+        borderTop: "1px solid $mauve6",
+        background: "$mauve1",
+        position: "relative",
+        flex: 1,
+        height: "100%",
+      }}
+    >
+      <Container
+        css={{
+          px: 0,
+          height: "100%",
+        }}
+      >
+        <Flex
+          fluid
+          css={{
+            height: "48px",
+            alignItems: "center",
+            fontSize: "$sm",
+            fontWeight: 300,
+          }}
+        >
+          <Heading
+            as="h3"
+            css={{
+              fontWeight: 300,
+              m: 0,
+              fontSize: "11px",
+              color: "$mauve12",
+              px: "$3",
+              textTransform: "uppercase",
+              alignItems: "center",
+              display: "inline-flex",
+              gap: "$3",
+            }}
+          >
+            <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}>
+                <Prohibit size="14px" />
+              </Button>
+            )}
+          </Flex>
+        </Flex>
+
+        <Box
+          as="pre"
+          ref={logRef}
+          css={{
+            margin: 0,
+            // display: "inline-block",
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "calc(100% - 48px)", // 100% minus the logbox header height
+            overflowY: "auto",
+            fontSize: "13px",
+            fontWeight: "$body",
+            fontFamily: "$monospace",
+            px: "$3",
+            pb: "$2",
+            whiteSpace: "normal",
+          }}
+        >
+          {logs?.map((log, index) => (
+            <Box
+              as="span"
+              key={log.type + index}
+              css={{
+                "@hover": {
+                  "&:hover": {
+                    backgroundColor: enhanced ? "$backgroundAlt" : undefined,
+                  },
+                },
+                p: enhanced ? "$1" : undefined,
+                my: enhanced ? "$1" : undefined,
+              }}
+            >
+              <Log {...log} />
+            </Box>
+          ))}
+          {children}
+        </Box>
+      </Container>
+    </Flex>
+  );
+};
+
+export const Log: FC<ILog> = ({
+  type,
+  timestring,
+  message: _message,
+  link,
+  linkText,
+  defaultCollapsed,
+  jsonData: _jsonData,
+}) => {
+  const [expanded, setExpanded] = useState(!defaultCollapsed);
+  const { accounts } = useSnapshot(state);
+  const [dialogAccount, setDialogAccount] = useState<string | null>(null);
+
+  const enrichAccounts = useCallback(
+    (str?: string): ReactNode => {
+      if (!str || !accounts.length) return null;
+
+      const pattern = `(${accounts.map((acc) => acc.address).join("|")})`;
+      const res = regexifyString({
+        pattern: new RegExp(pattern, "gim"),
+        decorator: (match, idx) => {
+          const name = accounts.find((acc) => acc.address === match)?.name;
+          return (
+            <Link
+              key={match + idx}
+              as="a"
+              onClick={() => setDialogAccount(match)}
+              title={match}
+              highlighted
+            >
+              {name || match}
+            </Link>
+          );
+        },
+        input: str,
+      });
+
+      return <>{res}</>;
+    },
+    [accounts]
+  );
+
+  let message: ReactNode;
+  
+  if (typeof _message === 'string') {
+    _message = _message.trim().replace(/\n /gi, "\n");
+    message = enrichAccounts(_message)
+  }
+  else {
+    message = _message
+  }
+
+  const jsonData = enrichAccounts(_jsonData);
+
+  return (
+    <>
+      <AccountDialog
+        setActiveAccountAddress={setDialogAccount}
+        activeAccountAddress={dialogAccount}
+      />
+      <LogText variant={type}>
+        {timestring && (
+          <Text muted monospace>
+            {timestring}{" "}
+          </Text>
+        )}
+        <Pre>{message} </Pre>
+        {link && (
+          <NextLink href={link} shallow passHref>
+            <Link as="a">{linkText}</Link>
+          </NextLink>
+        )}
+        {jsonData && (
+          <Link onClick={() => setExpanded(!expanded)} as="a">
+            {expanded ? "Collapse" : "Expand"}
+          </Link>
+        )}
+        {expanded && jsonData && <Pre block>{jsonData}</Pre>}
+      </LogText>
+      <br />
+    </>
+  );
+};
+
+export default LogBox;

components/LogText.tsx

@@ -4,16 +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: "$success",
       },
     },
     capitalize: {

components/Logo.tsx

@@ -1,10 +1,8 @@
-import { useTheme } from "next-themes";
-
 import { styled } from "../stitches.config";
 
 const SVG = styled("svg", {
-  "& #path-one, & #path-two": {
-    fill: "$text",
+  "& #path": {
+    fill: "$accent",
   },
 });
 function Logo({
@@ -16,21 +14,18 @@ function Logo({
 }) {
   return (
     <SVG
-      width={width || "1em"}
-      height={height || "1em"}
-      viewBox="0 0 28 22"
+      width={width || "1.1em"}
+      height={height || "1.1em"}
+      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

@@ -1,157 +1,460 @@
 import React from "react";
 import Link from "next/link";
-import {
-  Gear,
-  GithubLogo,
-  SignOut,
-  User,
-  ArrowSquareOut,
-} from "phosphor-react";
+
 import { useSnapshot } from "valtio";
-import Image from "next/image";
-import { useSession, signIn, signOut } from "next-auth/react";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuArrow,
-  DropdownMenuSeparator,
-} from "./DropdownMenu";
+import { useRouter } from "next/router";
+import { FolderOpen, X, ArrowUpRight, BookOpen } from "phosphor-react";
 
 import Stack from "./Stack";
 import Logo from "./Logo";
 import Button from "./Button";
+import Flex from "./Flex";
 import Container from "./Container";
 import Box from "./Box";
-import Flex from "./Flex";
 import ThemeChanger from "./ThemeChanger";
-import { useRouter } from "next/router";
+import state from "../state";
+import Heading from "./Heading";
+import Text from "./Text";
+import Spinner from "./Spinner";
+import truncate from "../utils/truncate";
+import ButtonGroup from "./ButtonGroup";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "./Dialog";
+import PanelBox from "./PanelBox";
+import { templateFileIds } from "../state/constants";
+import { styled } from "../stitches.config";
+
+import Starter from "../components/icons/Starter";
+import Firewall from "../components/icons/Firewall";
+import Notary from "../components/icons/Notary";
+import Carbon from "../components/icons/Carbon";
+import Peggy from "../components/icons/Peggy";
+
+const ImageWrapper = styled(Flex, {
+  position: "relative",
+  mt: "$2",
+  mb: "$10",
+  svg: {
+    // fill: "red",
+    ".angle": {
+      fill: "$text",
+    },
+    ":not(.angle)": {
+      stroke: "$text",
+    },
+  },
+});
 
 const Navigation = () => {
-  const { data: session, status } = useSession();
   const router = useRouter();
+  const snap = useSnapshot(state);
+  const slug = router.query?.slug;
+  const gistId = Array.isArray(slug) ? slug[0] : null;
+
   return (
     <Box
       as="nav"
       css={{
         display: "flex",
-        height: "60px",
-        borderBottom: "1px solid $slate6",
+        backgroundColor: "$mauve1",
+        borderBottom: "1px solid $mauve6",
         position: "relative",
         zIndex: 2003,
+        height: "60px",
       }}
     >
       <Container
         css={{
           display: "flex",
           alignItems: "center",
-          py: "$2",
         }}
       >
-        <Link href="/" passHref>
-          <Box
-            as="a"
-            css={{ display: "flex", alignItems: "center", color: "$textColor" }}
-          >
-            <Logo width="30px" height="30px" />
-          </Box>
-        </Link>
-        <Stack css={{ ml: "$4", gap: "$3" }}>
-          <Link href="/develop" passHref shallow>
-            <Button
+        <Flex
+          css={{
+            flex: 1,
+            alignItems: "center",
+            borderRight: "1px solid $colors$mauve6",
+            py: "$3",
+            pr: "$4",
+          }}
+        >
+          <Link href={gistId ? `/develop/${gistId}` : "/develop"} passHref>
+            <Box
               as="a"
-              outline={!router.pathname.includes("/develop")}
-              uppercase
-            >
-              Develop
-            </Button>
-          </Link>
-          <Link href="/deploy" passHref shallow>
-            <Button
-              as="a"
-              outline={!router.pathname.includes("/deploy")}
-              uppercase
-            >
-              Deploy
-            </Button>
-          </Link>
-          <Link href="/test" passHref shallow>
-            <Button
-              as="a"
-              outline={!router.pathname.includes("/test")}
-              uppercase
-            >
-              Test
-            </Button>
-          </Link>
-        </Stack>
-        <Stack css={{ color: "text", ml: "auto" }}>
-          <ThemeChanger />
-          {status === "authenticated" && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Box
-                  css={{
-                    borderRadius: "$full",
-                    overflow: "hidden",
-                    width: "30px",
-                    height: "30px",
-                    position: "relative",
-                  }}
-                >
-                  <Image
-                    src={session?.user?.image || ""}
-                    width="30px"
-                    height="30px"
-                    objectFit="cover"
-                    alt="User avatar"
-                  />
-                </Box>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem disabled onClick={() => signOut()}>
-                  <User size="16px" /> {session?.user?.username} (
-                  {session?.user.name})
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() =>
-                    window.open(
-                      `http://gist.github.com/${session?.user.username}`
-                    )
-                  }
-                >
-                  <ArrowSquareOut size="16px" />
-                  Go to your Gist
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <Gear size="16px" /> Settings
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => signOut()}>
-                  <SignOut size="16px" /> Log out
-                </DropdownMenuItem>
-                <DropdownMenuArrow offset={10} />
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-          {status === "unauthenticated" && (
-            <Button outline onClick={() => signIn("github")}>
-              <GithubLogo size="16px" /> Github Login
-            </Button>
-          )}
-          {status === "loading" && "loading"}
-          {/* <Box
               css={{
-                border: "1px solid",
-                borderRadius: "3px",
-                borderColor: "text",
-                p: 1,
+                display: "flex",
+                alignItems: "center",
+                color: "$textColor",
               }}
             >
-              <BookOpen size="20px" />
-            </Box> */}
-        </Stack>
+              <Logo width="32px" height="32px" />
+            </Box>
+          </Link>
+          <Flex
+            css={{
+              ml: "$5",
+              flexDirection: "column",
+              gap: "1px",
+            }}
+          >
+            {snap.loading ? (
+              <Spinner />
+            ) : (
+              <>
+                <Heading css={{ lineHeight: 1 }}>
+                  {snap.files?.[0]?.name || "XRPL Hooks"}
+                </Heading>
+                <Text
+                  css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}
+                >
+                  {snap.files.length > 0 ? "Gist: " : "Builder"}
+                  {snap.files.length > 0 && (
+                    <Link
+                      href={`https://gist.github.com/${snap.gistOwner || ""}/${
+                        snap.gistId || ""
+                      }`}
+                      passHref
+                    >
+                      <Text
+                        as="a"
+                        target="_blank"
+                        rel="noreferrer noopener"
+                        css={{ color: "$mauve12" }}
+                      >
+                        {`${snap.gistOwner || "-"}/${truncate(
+                          snap.gistId || ""
+                        )}`}
+                      </Text>
+                    </Link>
+                  )}
+                </Text>
+              </>
+            )}
+          </Flex>
+          {router.isReady && (
+            <ButtonGroup css={{ marginLeft: "auto" }}>
+              <Dialog
+                open={snap.mainModalOpen}
+                onOpenChange={(open) => (state.mainModalOpen = open)}
+              >
+                <DialogTrigger asChild>
+                  <Button outline>
+                    <FolderOpen size="15px" />
+                  </Button>
+                </DialogTrigger>
+                <DialogContent
+                  css={{
+                    display: "flex",
+                    maxWidth: "1080px",
+                    width: "80vw",
+                    maxHeight: "80%",
+                    backgroundColor: "$mauve1 !important",
+                    overflowY: "auto",
+                    background: "black",
+                    p: 0,
+                  }}
+                >
+                  <Flex
+                    css={{
+                      flexDirection: "column",
+                      height: "100%",
+                      "@md": {
+                        flexDirection: "row",
+                        height: "100%",
+                      },
+                    }}
+                  >
+                    <Flex
+                      css={{
+                        borderBottom: "1px solid $colors$mauve5",
+                        width: "100%",
+                        minWidth: "240px",
+                        flexDirection: "column",
+                        p: "$7",
+                        backgroundColor: "$mauve2",
+                        "@md": {
+                          width: "30%",
+                          maxWidth: "300px",
+                          borderBottom: "0px",
+                          borderRight: "1px solid $colors$mauve5",
+                        },
+                      }}
+                    >
+                      <DialogTitle
+                        css={{
+                          textTransform: "uppercase",
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: "$3",
+                          fontSize: "$xl",
+                          lineHeight: "$one",
+                          fontWeight: "$bold",
+                        }}
+                      >
+                        <Logo width="48px" height="48px" /> XRPL Hooks Builder
+                      </DialogTitle>
+                      <DialogDescription as="div">
+                        <Text
+                          css={{
+                            display: "inline-flex",
+                            color: "inherit",
+                            my: "$5",
+                            mb: "$7",
+                          }}
+                        >
+                          Hooks add smart contract functionality to the XRP
+                          Ledger.
+                        </Text>
+                        <Flex
+                          css={{ flexDirection: "column", gap: "$2", mt: "$2" }}
+                        >
+                          <Text
+                            css={{
+                              display: "inline-flex",
+                              alignItems: "center",
+                              gap: "$3",
+                              color: "$purple11",
+                              "&:hover": {
+                                color: "$purple12",
+                              },
+                              "&:focus": {
+                                outline: 0,
+                              },
+                            }}
+                            as="a"
+                            rel="noreferrer noopener"
+                            target="_blank"
+                            href="https://github.com/XRPL-Labs/xrpld-hooks"
+                          >
+                            <ArrowUpRight size="15px" /> Hooks Github
+                          </Text>
+
+                          <Text
+                            css={{
+                              display: "inline-flex",
+                              alignItems: "center",
+                              gap: "$3",
+                              color: "$purple11",
+                              "&:hover": {
+                                color: "$purple12",
+                              },
+                              "&:focus": {
+                                outline: 0,
+                              },
+                            }}
+                            as="a"
+                            rel="noreferrer noopener"
+                            target="_blank"
+                            href="https://xrpl-hooks.readme.io/v2.0/docs"
+                          >
+                            <ArrowUpRight size="15px" /> Hooks documentation
+                          </Text>
+                          <Text
+                            css={{
+                              display: "inline-flex",
+                              alignItems: "center",
+                              gap: "$3",
+                              color: "$purple11",
+                              "&:hover": {
+                                color: "$purple12",
+                              },
+                              "&:focus": {
+                                outline: 0,
+                              },
+                            }}
+                            as="a"
+                            rel="noreferrer noopener"
+                            target="_blank"
+                            href="https://xrpl.org/docs.html"
+                          >
+                            <ArrowUpRight size="15px" /> XRPL documentation
+                          </Text>
+                        </Flex>
+                      </DialogDescription>
+                    </Flex>
+
+                    <Flex
+                      css={{
+                        display: "grid",
+                        gridTemplateColumns: "1fr",
+                        gridTemplateRows: "max-content",
+                        flex: 1,
+                        p: "$7",
+                        pb: "$16",
+                        gap: "$3",
+                        alignItems: "normal",
+                        flexWrap: "wrap",
+                        backgroundColor: "$mauve1",
+                        "@md": {
+                          gridTemplateColumns: "1fr 1fr",
+                          gridTemplateRows: "max-content",
+                        },
+                        "@lg": {
+                          gridTemplateColumns: "1fr 1fr 1fr",
+                          gridTemplateRows: "max-content",
+                        },
+                      }}
+                    >
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.starter}`}
+                      >
+                        <ImageWrapper>
+                          <Starter />
+                        </ImageWrapper>
+                        <Heading>Starter</Heading>
+
+                        <Text>
+                          Just a basic starter with essential imports, just
+                          accepts any transaction coming through
+                        </Text>
+                      </PanelBox>
+
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.firewall}`}
+                        css={{ alignItems: "flex-start" }}
+                      >
+                        <ImageWrapper>
+                          <Firewall />
+                        </ImageWrapper>
+                        <Heading>Firewall</Heading>
+                        <Text>
+                          This Hook essentially checks a blacklist of accounts
+                        </Text>
+                      </PanelBox>
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.notary}`}
+                      >
+                        <ImageWrapper>
+                          <Notary />
+                        </ImageWrapper>
+                        <Heading>Notary</Heading>
+                        <Text>
+                          Collecting signatures for multi-sign transactions
+                        </Text>
+                      </PanelBox>
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.carbon}`}
+                      >
+                        <ImageWrapper>
+                          <Carbon />
+                        </ImageWrapper>
+                        <Heading>Carbon</Heading>
+                        <Text>Send a percentage of sum to an address</Text>
+                      </PanelBox>
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.peggy}`}
+                      >
+                        <ImageWrapper>
+                          <Peggy />
+                        </ImageWrapper>
+                        <Heading>Peggy</Heading>
+                        <Text>An oracle based stable coin hook</Text>
+                      </PanelBox>
+                    </Flex>
+                  </Flex>
+                  <DialogClose asChild>
+                    <Box
+                      css={{
+                        position: "absolute",
+                        top: "$1",
+                        right: "$1",
+                        cursor: "pointer",
+                        background: "$mauve1",
+                        display: "flex",
+                        borderRadius: "$full",
+                        p: "$1",
+                      }}
+                    >
+                      <X size="20px" />
+                    </Box>
+                  </DialogClose>
+                </DialogContent>
+              </Dialog>
+              <ThemeChanger />
+            </ButtonGroup>
+          )}
+        </Flex>
+        <Flex
+          css={{
+            flexWrap: "nowrap",
+            marginLeft: "$4",
+            overflowX: "scroll",
+            "&::-webkit-scrollbar": {
+              height: 0,
+              background: "transparent",
+            },
+          }}
+        >
+          <Stack
+            css={{
+              ml: "$4",
+              gap: "$3",
+              flexWrap: "nowrap",
+              alignItems: "center",
+              marginLeft: "auto",
+            }}
+          >
+            <ButtonGroup>
+              <Link
+                href={gistId ? `/develop/${gistId}` : "/develop"}
+                passHref
+                shallow
+              >
+                <Button
+                  as="a"
+                  outline={!router.pathname.includes("/develop")}
+                  uppercase
+                >
+                  Develop
+                </Button>
+              </Link>
+              <Link
+                href={gistId ? `/deploy/${gistId}` : "/deploy"}
+                passHref
+                shallow
+              >
+                <Button
+                  as="a"
+                  outline={!router.pathname.includes("/deploy")}
+                  uppercase
+                >
+                  Deploy
+                </Button>
+              </Link>
+              <Link
+                href={gistId ? `/test/${gistId}` : "/test"}
+                passHref
+                shallow
+              >
+                <Button
+                  as="a"
+                  outline={!router.pathname.includes("/test")}
+                  uppercase
+                >
+                  Test
+                </Button>
+              </Link>
+            </ButtonGroup>
+            <Link href="https://xrpl-hooks.readme.io/v2.0" passHref>
+              <a target="_blank" rel="noreferrer noopener">
+                <Button outline>
+                  <BookOpen size="15px" />
+                </Button>
+              </a>
+            </Link>
+          </Stack>
+        </Flex>
       </Container>
     </Box>
   );

components/PanelBox.tsx

@@ -0,0 +1,30 @@
+import { styled } from "../stitches.config";
+import Heading from "./Heading";
+import Text from "./Text";
+
+const PanelBox = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  border: "1px solid $colors$mauve6",
+  backgroundColor: "$mauve2",
+  padding: "$3",
+  borderRadius: "$sm",
+  fontWeight: "lighter",
+  height: "auto",
+  cursor: "pointer",
+  flex: "1 1 0px",
+  "&:hover": {
+    border: "1px solid $colors$mauve9",
+  },
+  [`& ${Heading}`]: {
+    fontWeight: "lighter",
+    mb: "$2",
+  },
+  [`& ${Text}`]: {
+    fontWeight: "lighter",
+    color: "$mauve10",
+    fontSize: "$sm",
+  },
+});
+
+export default PanelBox;

components/Popover.tsx

@@ -0,0 +1,109 @@
+import React, { ReactNode } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { styled, keyframes } from "../stitches.config";
+
+const slideUpAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+const slideRightAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" },
+});
+
+const slideDownAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+const slideLeftAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" },
+});
+const StyledContent = styled(PopoverPrimitive.Content, {
+  borderRadius: 4,
+  padding: "$3 $3",
+  fontSize: 12,
+  lineHeight: 1,
+  color: "$text",
+  backgroundColor: "$background",
+  boxShadow:
+    "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
+  "@media (prefers-reduced-motion: no-preference)": {
+    animationDuration: "400ms",
+    animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    willChange: "transform, opacity",
+    '&[data-state="open"]': {
+      '&[data-side="top"]': { animationName: slideDownAndFade },
+      '&[data-side="right"]': { animationName: slideLeftAndFade },
+      '&[data-side="bottom"]': { animationName: slideUpAndFade },
+      '&[data-side="left"]': { animationName: slideRightAndFade },
+    },
+  },
+  ".dark &": {
+    backgroundColor: "$mauve5",
+    boxShadow:
+      "0px 5px 38px -2px rgba(22, 23, 24, 1), 0px 10px 20px 0px rgba(22, 23, 24, 1)",
+  },
+});
+
+const StyledArrow = styled(PopoverPrimitive.Arrow, {
+  fill: "$colors$mauve2",
+  ".dark &": {
+    fill: "$mauve5",
+  },
+});
+
+const StyledClose = styled(PopoverPrimitive.Close, {
+  all: "unset",
+  fontFamily: "inherit",
+  borderRadius: "100%",
+  height: 25,
+  width: 25,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "$text",
+  position: "absolute",
+  top: 5,
+  right: 5,
+});
+
+// Exports
+export const PopoverRoot = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverContent = StyledContent;
+export const PopoverArrow = StyledArrow;
+export const PopoverClose = StyledClose;
+
+interface IPopover {
+  content: string | ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const Popover: React.FC<
+  IPopover & React.ComponentProps<typeof PopoverContent>
+> = ({
+  children,
+  content,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  ...rest
+}) => (
+  <PopoverRoot
+    open={open}
+    defaultOpen={defaultOpen}
+    onOpenChange={onOpenChange}
+  >
+    <PopoverTrigger asChild>{children}</PopoverTrigger>
+    <PopoverContent sideOffset={5} {...rest}>
+      {content} <PopoverArrow offset={5} className="arrow" />
+    </PopoverContent>
+  </PopoverRoot>
+);
+
+export default Popover;

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,127 @@
+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,
+            minHeight: 0,
+            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,
+            },
+          };
+        },
+      }}
+      {...props}
+    />
+  );
+});
+
+export default styled(Select, {});

components/SetHookDialog.tsx

@@ -0,0 +1,400 @@
+import React, { useCallback, useEffect, 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, Label } from "./Input";
+import {
+  Controller,
+  SubmitHandler,
+  useFieldArray,
+  useForm,
+} from "react-hook-form";
+
+import { TTS, tts } from "../utils/hookOnCalculator";
+import { deployHook } from "../state/actions";
+import { useSnapshot } from "valtio";
+import state from "../state";
+import toast from "react-hot-toast";
+import { prepareDeployHookTx, sha256 } from "../state/actions/deployHook";
+import estimateFee from "../utils/estimateFee";
+
+const transactionOptions = Object.keys(tts).map((key) => ({
+  label: key,
+  value: key as keyof TTS,
+}));
+
+export type SetHookData = {
+  Invoke: {
+    value: keyof TTS;
+    label: string;
+  }[];
+  Fee: string;
+  HookNamespace: string;
+  HookParameters: {
+    HookParameter: {
+      HookParameterName: string;
+      HookParameterValue: string;
+    };
+  }[];
+  // HookGrants: {
+  //   HookGrant: {
+  //     Authorize: string;
+  //     HookHash: string;
+  //   };
+  // }[];
+};
+
+export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
+  ({ accountAddress }) => {
+    const snap = useSnapshot(state);
+    const account = snap.accounts.find((acc) => acc.address === accountAddress);
+
+    const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
+    const {
+      register,
+      handleSubmit,
+      control,
+      watch,
+      setValue,
+      getValues,
+      formState: { errors },
+    } = useForm<SetHookData>({
+      defaultValues: {
+        HookNamespace:
+          snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
+        Invoke: transactionOptions.filter((to) => to.label === "ttPAYMENT"),
+      },
+    });
+    const { fields, append, remove } = useFieldArray({
+      control,
+      name: "HookParameters", // unique name for your Field Array
+    });
+    const [formInitialized, setFormInitialized] = useState(false);
+    const [estimateLoading, setEstimateLoading] = useState(false);
+
+    // Update value if activeWat changes
+    useEffect(() => {
+      setValue(
+        "HookNamespace",
+        snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
+      );
+      setFormInitialized(true);
+    }, [snap.activeWat, snap.files, setValue]);
+    // const {
+    //   fields: grantFields,
+    //   append: grantAppend,
+    //   remove: grantRemove,
+    // } = useFieldArray({
+    //   control,
+    //   name: "HookGrants", // unique name for your Field Array
+    // });
+    const [hashedNamespace, setHashedNamespace] = useState("");
+    const namespace = watch(
+      "HookNamespace",
+      snap.files?.[snap.active]?.name?.split(".")?.[0] || ""
+    );
+    const calculateHashedValue = useCallback(async () => {
+      const hashedVal = await sha256(namespace);
+      setHashedNamespace(hashedVal.toUpperCase());
+    }, [namespace]);
+    useEffect(() => {
+      calculateHashedValue();
+    }, [namespace, calculateHashedValue]);
+
+    // Calcucate initial fee estimate when modal opens
+    useEffect(() => {
+      if (formInitialized && account) {
+        (async () => {
+          const formValues = getValues();
+          const tx = await prepareDeployHookTx(account, formValues);
+          if (!tx) {
+            return;
+          }
+          const res = await estimateFee(tx, account);
+          if (res && res.base_fee) {
+            setValue("Fee", res.base_fee);
+          }
+        })();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [formInitialized]);
+
+    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>Hook Namespace Seed</Label>
+                  <Input
+                    {...register("HookNamespace", { required: true })}
+                    autoComplete={"off"}
+                    defaultValue={
+                      snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
+                    }
+                  />
+                  {errors.HookNamespace?.type === "required" && (
+                    <Box css={{ display: "inline", color: "$red11" }}>
+                      Namespace is required
+                    </Box>
+                  )}
+                  <Box css={{ mt: "$3" }}>
+                    <Label>Hook Namespace (sha256)</Label>
+                    <Input readOnly value={hashedNamespace} />
+                  </Box>
+                </Box>
+
+                <Box css={{ width: "100%" }}>
+                  <Label style={{ marginBottom: "10px", display: "block" }}>
+                    Hook parameters
+                  </Label>
+                  <Stack>
+                    {fields.map((field, index) => (
+                      <Stack key={field.id}>
+                        <Input
+                          // important to include key with field's id
+                          placeholder="Parameter name"
+                          {...register(
+                            `HookParameters.${index}.HookParameter.HookParameterName`
+                          )}
+                        />
+                        <Input
+                          placeholder="Value (hex-quoted)"
+                          {...register(
+                            `HookParameters.${index}.HookParameter.HookParameterValue`
+                          )}
+                        />
+                        <Button onClick={() => remove(index)} variant="destroy">
+                          <Trash weight="regular" size="16px" />
+                        </Button>
+                      </Stack>
+                    ))}
+                    <Button
+                      outline
+                      fullWidth
+                      type="button"
+                      onClick={() =>
+                        append({
+                          HookParameter: {
+                            HookParameterName: "",
+                            HookParameterValue: "",
+                          },
+                        })
+                      }
+                    >
+                      <Plus size="16px" />
+                      Add Hook Parameter
+                    </Button>
+                  </Stack>
+                </Box>
+                <Box css={{ width: "100%", position: "relative" }}>
+                  <Label>Fee</Label>
+                  <Box css={{ display: "flex", alignItems: "center" }}>
+                    <Input
+                      type="number"
+                      {...register("Fee", { required: true })}
+                      autoComplete={"off"}
+                      defaultValue={10000}
+                      css={{
+                        "-moz-appearance": "textfield",
+                        "&::-webkit-outer-spin-button": {
+                          "-webkit-appearance": "none",
+                          margin: 0,
+                        },
+                        "&::-webkit-inner-spin-button ": {
+                          "-webkit-appearance": "none",
+                          margin: 0,
+                        },
+                      }}
+                    />
+                    <Button
+                      size="xs"
+                      variant="primary"
+                      outline
+                      isLoading={estimateLoading}
+                      css={{
+                        position: "absolute",
+                        right: "$2",
+                        fontSize: "$xs",
+                        cursor: "pointer",
+                        alignContent: "center",
+                        display: "flex",
+                      }}
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        setEstimateLoading(true);
+                        const formValues = getValues();
+                        try {
+                          const tx = await prepareDeployHookTx(
+                            account,
+                            formValues
+                          );
+                          if (tx) {
+                            const res = await estimateFee(tx, account);
+
+                            if (res && res.base_fee) {
+                              setValue("Fee", res.base_fee);
+                            }
+                          }
+                        } catch (err) {}
+
+                        setEstimateLoading(false);
+                      }}
+                    >
+                      Suggest
+                    </Button>
+                  </Box>
+                  {errors.Fee?.type === "required" && (
+                    <Box css={{ display: "inline", color: "$red11" }}>
+                      Fee is required
+                    </Box>
+                  )}
+                </Box>
+                {/* <Box css={{ width: "100%" }}>
+                <label style={{ marginBottom: "10px", display: "block" }}>
+                  Hook Grants
+                </label>
+                <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>
+    );
+  }
+);
+
+SetHookDialog.displayName = "SetHookDialog";
+
+export default SetHookDialog;

components/Spinner.tsx

@@ -3,11 +3,12 @@ import { styled, keyframes } from "../stitches.config";
 
 const rotate = keyframes({
   "0%": { transform: "rotate(0deg)" },
-  "100%": { transform: "rotate(360deg)" },
+  "100%": { transform: "rotate(-360deg)" },
 });
 
 const Spinner = styled(SpinnerIcon, {
-  animation: `${rotate} 150ms cubic-bezier(0.16, 1, 0.3, 1) infinite`,
+  animation: `${rotate} 150ms linear infinite`,
+  fontSize: "16px",
 });
 
 export default Spinner;

components/Stack.tsx

@@ -1,8 +1,5 @@
-import { Children } from "react";
-
 import Box from "./Box";
 import { styled } from "../stitches.config";
-import type * as Stitches from "@stitches/react";
 
 const StackComponent = styled(Box, {
   display: "flex",

components/Switch.tsx

@@ -0,0 +1,32 @@
+import { styled } from "../stitches.config";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+const StyledSwitch = styled(SwitchPrimitive.Root, {
+  all: "unset",
+  width: 42,
+  height: 25,
+  backgroundColor: "$mauve9",
+  borderRadius: "9999px",
+  position: "relative",
+  boxShadow: `0 2px 10px $colors$mauve2`,
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  "&:focus": { boxShadow: `0 0 0 2px $colors$mauveA2` },
+  '&[data-state="checked"]': { backgroundColor: "$green11" },
+});
+
+const StyledThumb = styled(SwitchPrimitive.Thumb, {
+  display: "block",
+  width: 21,
+  height: 21,
+  backgroundColor: "white",
+  borderRadius: "9999px",
+  boxShadow: `0 2px 2px $colors$mauveA6`,
+  transition: "transform 100ms",
+  transform: "translateX(2px)",
+  willChange: "transform",
+  '&[data-state="checked"]': { transform: "translateX(19px)" },
+});
+
+// Exports
+export const Switch = StyledSwitch;
+export const SwitchThumb = StyledThumb;

components/Tabs.tsx

@@ -0,0 +1,277 @@
+import React, {
+  useEffect,
+  useState,
+  Fragment,
+  isValidElement,
+  useCallback,
+} from "react";
+import type { ReactNode, ReactElement } from "react";
+import { Box, Button, Flex, Input, Label, 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 messages 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;
+  onChangeActive?: (index: number, header?: string) => any;
+}
+
+export const Tab = (props: TabProps) => null;
+
+export const Tabs = ({
+  children,
+  activeIndex,
+  activeHeader,
+  headless,
+  keepAllAlive = false,
+  onCreateNewTab,
+  onCloseTab,
+  onChangeActive,
+  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);
+      if (idx !== -1) setActive(idx);
+      else setActive(0);
+    }
+  }, [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 handleActiveChange = useCallback(
+    (idx: number, header?: string) => {
+      setActive(idx);
+      onChangeActive?.(idx, header);
+    },
+    [onChangeActive]
+  );
+
+  const handleCreateTab = useCallback(() => {
+    // add default extension in case omitted
+    let _tabname = tabname.includes(".") ? tabname : tabname + defaultExtension;
+    if (forceDefaultExtension && !_tabname.endsWith(defaultExtension)) {
+      _tabname = _tabname + defaultExtension;
+    }
+
+    const chk = validateTabname(_tabname);
+    if (chk.error) {
+      setNewtabError(`Error: ${chk.error}`);
+      return;
+    }
+
+    setIsNewtabDialogOpen(false);
+    setTabname("");
+
+    onCreateNewTab?.(_tabname);
+
+    // switch to new tab?
+    handleActiveChange(tabs.length, _tabname);
+  }, [
+    tabname,
+    defaultExtension,
+    forceDefaultExtension,
+    validateTabname,
+    onCreateNewTab,
+    handleActiveChange,
+    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: "$2",
+            width: "100%",
+            overflow: "auto",
+          }}
+        >
+          {tabs.map((tab, idx) => (
+            <Button
+              key={tab.header}
+              role="tab"
+              tabIndex={idx}
+              onClick={() => handleActiveChange(idx, tab.header)}
+              onKeyPress={() => handleActiveChange(idx, tab.header)}
+              outline={active !== idx}
+              size="sm"
+              css={{
+                "&:hover": {
+                  span: {
+                    visibility: "visible",
+                  },
+                },
+              }}
+            >
+              {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/ThemeChanger.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useTheme } from "next-themes";
 import { Sun, Moon } from "phosphor-react";
 
-import Box from "./Box";
+import Button from "./Button";
 
 const ThemeChanger = () => {
   const { theme, setTheme } = useTheme();
@@ -12,7 +12,8 @@ const ThemeChanger = () => {
   if (!mounted) return null;
 
   return (
-    <Box
+    <Button
+      outline
       onClick={() => {
         setTheme(theme && theme === "light" ? "dark" : "light");
       }}
@@ -25,12 +26,8 @@ const ThemeChanger = () => {
         color: "$muted",
       }}
     >
-      {theme === "dark" ? (
-        <Sun weight="bold" size="16px" />
-      ) : (
-        <Moon weight="bold" size="16px" />
-      )}
-    </Box>
+      {theme === "dark" ? <Sun size="15px" /> : <Moon size="15px" />}
+    </Button>
   );
 };
 

components/Tooltip.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { styled, keyframes } from "../stitches.config";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+const slideUpAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+const slideRightAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" },
+});
+
+const slideDownAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+const slideLeftAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" },
+});
+
+const StyledContent = styled(TooltipPrimitive.Content, {
+  borderRadius: 4,
+  padding: "$2 $3",
+  fontSize: 12,
+  lineHeight: 1,
+  color: "$text",
+  backgroundColor: "$background",
+  boxShadow:
+    "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  "@media (prefers-reduced-motion: no-preference)": {
+    animationDuration: "400ms",
+    animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    animationFillMode: "forwards",
+    willChange: "transform, opacity",
+    '&[data-state="delayed-open"]': {
+      '&[data-side="top"]': { animationName: slideDownAndFade },
+      '&[data-side="right"]': { animationName: slideLeftAndFade },
+      '&[data-side="bottom"]': { animationName: slideUpAndFade },
+      '&[data-side="left"]': { animationName: slideRightAndFade },
+    },
+  },
+  ".dark &": {
+    boxShadow:
+      "0px 0px 10px 2px rgba(0,0,0,.45), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  },
+  ".light &": {
+    boxShadow:
+      "0px 0px 10px 2px rgba(0,0,0,.25), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  },
+});
+
+const StyledArrow = styled(TooltipPrimitive.Arrow, {
+  fill: "$background",
+});
+
+interface ITooltip {
+  content: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const Tooltip: React.FC<
+  React.ComponentProps<typeof StyledContent> & ITooltip
+> = ({
+  children,
+  content,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  ...rest
+}) => {
+  return (
+    <TooltipPrimitive.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <StyledContent side="bottom" align="center" {...rest}>
+        <div dangerouslySetInnerHTML={{ __html: content }} />
+        <StyledArrow offset={5} width={11} height={5} />
+      </StyledContent>
+    </TooltipPrimitive.Root>
+  );
+};
+
+export default Tooltip;

components/Transaction/index.tsx

@@ -0,0 +1,184 @@
+import { Play } from "phosphor-react";
+import { FC, useCallback, useEffect, useMemo } from "react";
+import { useSnapshot } from "valtio";
+import state from "../../state";
+import {
+  modifyTransaction,
+  prepareState,
+  prepareTransaction,
+  TransactionState,
+} from "../../state/transactions";
+import { sendTransaction } from "../../state/actions";
+import Box from "../Box";
+import Button from "../Button";
+import Flex from "../Flex";
+import { TxJson } from "./json";
+import { TxUI } from "./ui";
+
+export interface TransactionProps {
+  header: string;
+  state: TransactionState;
+}
+
+const Transaction: FC<TransactionProps> = ({
+  header,
+  state: txState,
+  ...props
+}) => {
+  const { accounts, editorSettings } = useSnapshot(state);
+  const {
+    selectedAccount,
+    selectedTransaction,
+    txIsDisabled,
+    txIsLoading,
+    viewType,
+    editorSavedValue,
+    editorValue,
+  } = txState;
+
+  const setState = useCallback(
+    (pTx?: Partial<TransactionState>) => {
+      return modifyTransaction(header, pTx);
+    },
+    [header]
+  );
+
+  const prepareOptions = useCallback(
+    (state: TransactionState = txState) => {
+      const {
+        selectedTransaction,
+        selectedDestAccount,
+        selectedAccount,
+        txFields,
+      } = state;
+
+      const TransactionType = selectedTransaction?.value || null;
+      const Destination =
+        selectedDestAccount?.value ||
+        ("Destination" in txFields ? null : undefined);
+      const Account = selectedAccount?.value || null;
+
+      return prepareTransaction({
+        ...txFields,
+        TransactionType,
+        Destination,
+        Account,
+      });
+    },
+    [txState]
+  );
+
+  useEffect(() => {
+    const transactionType = selectedTransaction?.value;
+    const account = selectedAccount?.value;
+    if (!account || !transactionType || txIsLoading) {
+      setState({ txIsDisabled: true });
+    } else {
+      setState({ txIsDisabled: false });
+    }
+  }, [selectedAccount?.value, selectedTransaction?.value, setState, txIsLoading]);
+
+  const submitTest = useCallback(async () => {
+    let st: TransactionState | undefined;
+    if (viewType === "json") {
+      // save the editor state first
+      const pst = prepareState(editorValue || '', txState);
+      if (!pst) return;
+
+      st = setState(pst);
+    }
+
+    const account = accounts.find(
+      acc => acc.address === selectedAccount?.value
+    );
+    if (txIsDisabled) return;
+
+    setState({ txIsLoading: true });
+    const logPrefix = header ? `${header.split(".")[0]}: ` : undefined;
+    try {
+      if (!account) {
+        throw Error("Account must be selected from imported accounts!");
+      }
+      const options = prepareOptions(st);
+
+      if (options.Destination === null) {
+        throw Error("Destination account cannot be null")
+      }
+
+      await sendTransaction(account, options, { logPrefix });
+    } catch (error) {
+      console.error(error);
+      if (error instanceof Error) {
+        state.transactionLogs.push({
+          type: "error",
+          message: `${logPrefix}${error.message}`,
+        });
+      }
+    }
+    setState({ txIsLoading: false });
+  }, [viewType, accounts, txIsDisabled, setState, header, editorValue, txState, selectedAccount?.value, prepareOptions]);
+
+  const resetState = useCallback(() => {
+    modifyTransaction(header, { viewType }, { replaceState: true });
+  }, [header, viewType]);
+
+  const jsonValue = useMemo(
+    () =>
+      editorSavedValue ||
+      JSON.stringify(prepareOptions?.() || {}, null, editorSettings.tabSize),
+    [editorSavedValue, editorSettings.tabSize, prepareOptions]
+  );
+
+  return (
+    <Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
+      {viewType === "json" ? (
+        <TxJson
+          value={jsonValue}
+          header={header}
+          state={txState}
+          setState={setState}
+        />
+      ) : (
+        <TxUI state={txState} setState={setState} />
+      )}
+      <Flex
+        row
+        css={{
+          justifyContent: "space-between",
+          position: "absolute",
+          left: 0,
+          bottom: 0,
+          width: "100%",
+          mb: "$1",
+        }}
+      >
+        <Button
+          onClick={() => {
+            if (viewType === "ui") {
+              setState({ editorSavedValue: null, viewType: "json" });
+            } else setState({ viewType: "ui" });
+          }}
+          outline
+        >
+          {viewType === "ui" ? "EDIT AS JSON" : "EXIT JSON MODE"}
+        </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>
+  );
+};
+
+export default Transaction;

components/Transaction/json.tsx

@@ -0,0 +1,205 @@
+import Editor, { loader, useMonaco } from "@monaco-editor/react";
+import { FC, useCallback, useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+
+import dark from "../../theme/editor/amy.json";
+import light from "../../theme/editor/xcode_default.json";
+import { useSnapshot } from "valtio";
+import state, {
+  prepareState,
+  transactionsData,
+  TransactionState,
+} from "../../state";
+import Text from "../Text";
+import Flex from "../Flex";
+import { Link } from "..";
+import { showAlert } from "../../state/actions/showAlert";
+import { parseJSON } from "../../utils/json";
+import { extractSchemaProps } from "../../utils/schema";
+import amountSchema from "../../content/amount-schema.json";
+
+loader.config({
+  paths: {
+    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
+  },
+});
+
+interface JsonProps {
+  value?: string;
+  header?: string;
+  setState: (pTx?: Partial<TransactionState> | undefined) => void;
+  state: TransactionState;
+}
+
+export const TxJson: FC<JsonProps> = ({
+  value = "",
+  state: txState,
+  header,
+  setState,
+}) => {
+  const { editorSettings, accounts } = useSnapshot(state);
+  const { editorValue = value, selectedTransaction } = txState;
+  const { theme } = useTheme();
+  const [hasUnsaved, setHasUnsaved] = useState(false);
+
+  useEffect(() => {
+    setState({ editorValue: value });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  useEffect(() => {
+    if (editorValue === value) setHasUnsaved(false);
+    else setHasUnsaved(true);
+  }, [editorValue, value]);
+
+  const saveState = (value: string, txState: TransactionState) => {
+    const tx = prepareState(value, txState);
+    if (tx) setState(tx);
+  };
+
+  const discardChanges = () => {
+    showAlert("Confirm", {
+      body: "Are you sure to discard these changes?",
+      confirmText: "Yes",
+      onConfirm: () => setState({ editorValue: value }),
+    });
+  };
+
+  const onExit = (value: string) => {
+    const options = parseJSON(value);
+    if (options) {
+      saveState(value, txState);
+      return;
+    }
+    showAlert("Error!", {
+      body: `Malformed Transaction in ${header}, would you like to discard these changes?`,
+      confirmText: "Discard",
+      onConfirm: () => setState({ editorValue: value }),
+      onCancel: () => setState({ viewType: "json", editorSavedValue: value }),
+    });
+  };
+
+  const path = `file:///${header}`;
+  const monaco = useMonaco();
+
+  const getSchemas = useCallback((): any[] => {
+    const tt = selectedTransaction?.value;
+    const txObj = transactionsData.find(td => td.TransactionType === tt);
+
+    let genericSchemaProps: any;
+    if (txObj) {
+      genericSchemaProps = extractSchemaProps(txObj);
+    } else {
+      genericSchemaProps = transactionsData.reduce(
+        (cumm, td) => ({
+          ...cumm,
+          ...extractSchemaProps(td),
+        }),
+        {}
+      );
+    }
+
+    return [
+      {
+        uri: "file:///main-schema.json", // id of the first schema
+        fileMatch: ["**.json"], // associate with our model
+        schema: {
+          title: header,
+          type: "object",
+          required: ["TransactionType", "Account"],
+          properties: {
+            ...genericSchemaProps,
+            TransactionType: {
+              title: "Transaction Type",
+              enum: transactionsData.map(td => td.TransactionType),
+            },
+            Account: {
+              $ref: "file:///account-schema.json",
+            },
+            Destination: {
+              anyOf: [
+                {
+                  $ref: "file:///account-schema.json",
+                },
+                {
+                  type: "string",
+                  title: "Destination Account",
+                },
+              ],
+            },
+            Amount: {
+              $ref: "file:///amount-schema.json",
+            },
+          },
+        },
+      },
+      {
+        uri: "file:///account-schema.json",
+        schema: {
+          type: "string",
+          title: "Account type",
+          enum: accounts.map(acc => acc.address),
+        },
+      },
+      {
+        ...amountSchema,
+      },
+    ];
+  }, [accounts, header, selectedTransaction?.value]);
+
+  useEffect(() => {
+    if (!monaco) return;
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      schemas: getSchemas(),
+    });
+  }, [getSchemas, monaco]);
+
+  return (
+    <Flex
+      fluid
+      column
+      css={{ height: "calc(100% - 45px)", position: "relative" }}
+    >
+      <Editor
+        className="hooks-editor"
+        language={"json"}
+        path={path}
+        height="100%"
+        beforeMount={monaco => {
+          monaco.editor.defineTheme("dark", dark as any);
+          monaco.editor.defineTheme("light", light as any);
+        }}
+        value={editorValue}
+        onChange={val => setState({ editorValue: val })}
+        onMount={(editor, monaco) => {
+          editor.updateOptions({
+            minimap: { enabled: false },
+            glyphMargin: true,
+            tabSize: editorSettings.tabSize,
+            dragAndDrop: true,
+            fontSize: 14,
+          });
+
+          // register onExit cb
+          const model = editor.getModel();
+          model?.onWillDispose(() => onExit(model.getValue()));
+
+          // set json defaults
+          monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            schemas: getSchemas(),
+          });
+        }}
+        theme={theme === "dark" ? "dark" : "light"}
+      />
+      {hasUnsaved && (
+        <Text muted small css={{ position: "absolute", bottom: 0, right: 0 }}>
+          This file has unsaved changes.{" "}
+          <Link onClick={() => saveState(editorValue, txState)}>save</Link>{" "}
+          <Link onClick={discardChanges}>discard</Link>
+        </Text>
+      )}
+    </Flex>
+  );
+};

components/Transaction/ui.tsx

@@ -0,0 +1,213 @@
+import { FC } from "react";
+import Container from "../Container";
+import Flex from "../Flex";
+import Input from "../Input";
+import Select from "../Select";
+import Text from "../Text";
+import {
+  SelectOption,
+  TransactionState,
+  transactionsData,
+  TxFields,
+} from "../../state/transactions";
+import { useSnapshot } from "valtio";
+import state from "../../state";
+import { streamState } from "../DebugStream";
+
+interface UIProps {
+  setState: (pTx?: Partial<TransactionState> | undefined) => void;
+  state: TransactionState;
+}
+
+export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
+  const { accounts } = useSnapshot(state);
+  const {
+    selectedAccount,
+    selectedDestAccount,
+    selectedTransaction,
+    txFields,
+  } = txState;
+
+  const transactionsOptions = transactionsData.map(tx => ({
+    value: tx.TransactionType,
+    label: tx.TransactionType,
+  }));
+
+  const accountOptions: SelectOption[] = accounts.map(acc => ({
+    label: acc.name,
+    value: acc.address,
+  }));
+
+  const destAccountOptions: SelectOption[] = accounts
+    .map(acc => ({
+      label: acc.name,
+      value: acc.address,
+    }))
+    .filter(acc => acc.value !== selectedAccount?.value);
+
+  const resetOptions = (tt: string) => {
+    const txFields: TxFields | undefined = transactionsData.find(
+      tx => tx.TransactionType === tt
+    );
+
+    if (!txFields) return setState({ txFields: {} });
+
+    const _txFields = Object.keys(txFields)
+      .filter(key => !["TransactionType", "Account", "Sequence"].includes(key))
+      .reduce<TxFields>(
+        (tf, key) => ((tf[key as keyof TxFields] = (txFields as any)[key]), tf),
+        {}
+      );
+
+    if (!_txFields.Destination) setState({ selectedDestAccount: null });
+    setState({ txFields: _txFields });
+  };
+
+  const handleSetAccount = (acc: SelectOption) => {
+    setState({ selectedAccount: acc });
+    streamState.selectedAccount = acc;
+  };
+
+  const handleChangeTxType = (tt: SelectOption) => {
+    setState({ selectedTransaction: tt });
+    resetOptions(tt.value);
+  };
+
+  const specialFields = ["TransactionType", "Account", "Destination"];
+
+  const otherFields = Object.keys(txFields).filter(
+    k => !specialFields.includes(k)
+  ) as [keyof TxFields];
+
+  return (
+    <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: any) => handleChangeTxType(tt)}
+          />
+        </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: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
+          />
+        </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: any) => setState({ selectedDestAccount: acc })}
+            />
+          </Flex>
+        )}
+        {otherFields.map(field => {
+          let _value = txFields[field];
+
+          let value: string | undefined;
+          if (typeof _value === "object") {
+            if (_value.$type === "json" && typeof _value.$value === "object") {
+              value = JSON.stringify(_value.$value);
+            } else {
+              value = _value.$value.toString();
+            }
+          } else {
+            value = _value?.toString();
+          }
+
+          let isXrp = typeof _value === "object" && _value.$type === "xrp";
+          return (
+            <Flex
+              key={field}
+              row
+              fluid
+              css={{
+                justifyContent: "flex-end",
+                alignItems: "center",
+                mb: "$3",
+                pr: "1px",
+              }}
+            >
+              <Text muted css={{ mr: "$3" }}>
+                {field + (isXrp ? " (XRP)" : "")}:{" "}
+              </Text>
+              <Input
+                value={value}
+                onChange={e => {
+                  setState({
+                    txFields: {
+                      ...txFields,
+                      [field]:
+                        typeof _value === "object"
+                          ? { ..._value, $value: e.target.value }
+                          : e.target.value,
+                    },
+                  });
+                }}
+                css={{ width: "70%", flex: "inherit" }}
+              />
+            </Flex>
+          );
+        })}
+      </Flex>
+    </Container>
+  );
+};

components/icons/Carbon.tsx

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

components/icons/Firewall.tsx

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

components/icons/Notary.tsx

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

components/icons/Peggy.tsx

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

components/icons/Starter.tsx

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

components/index.tsx

@@ -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, Label } from "./Input";
+export { default as Select } from "./Select";
+export * from "./Tabs";
+export * from "./AlertDialog/primitive";
+export { default as Box } from "./Box";
+export { default as Button } from "./Button";
+export { default as Pre } from "./Pre";
+export { default as ButtonGroup } from "./ButtonGroup";
+export { default as DeployFooter } from "./DeployFooter";
+export * from "./Dialog";
+export * from "./DropdownMenu";

content/amount-schema.json

@@ -0,0 +1,50 @@
+{
+  "uri": "file:///amount-schema.json",
+  "title": "Amount",
+  "description": "Specify xrp in drops and tokens as objects.",
+  "schema": {
+    "anyOf": [
+      {
+        "type": [
+          "number",
+          "string"
+        ],
+        "exclusiveMinimum": 0,
+        "maximum": "100000000000000000"
+      },
+      {
+        "type": "object",
+        "properties": {
+          "currency": {
+            "description": "Arbitrary currency code for the token. Cannot be XRP."
+          },
+          "value": {
+            "type": [
+              "string",
+              "number"
+            ],
+            "description": "Quoted decimal representation of the amount of the token."
+          },
+          "issuer": {
+            "type": "string",
+            "description": "Generally, the account that issues this token. In special cases, this can refer to the account that holds the token instead."
+          }
+        }
+      }
+    ],
+    "defaultSnippets": [
+      {
+        "label": "Xrp",
+        "body": "1000000"
+      },
+      {
+        "label": "Token",
+        "body": {
+          "currency": "${1:13.1}",
+          "value": "${2:FOO}",
+          "description": "${3:rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpns}"
+        }
+      }
+    ]
+  }
+}

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": "xrp"
+    },
+    "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": "xrp"
+    },
+    "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": "xrp"
+    },
+    "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": "xrp"
+    }
+  },
+  {
+    "TransactionType": "Payment",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Destination": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "Amount": {
+      "$value": "100",
+      "$type": "xrp"
+    },
+    "Fee": "12",
+    "Flags": 2147483648,
+    "Sequence": 2
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "PaymentChannelCreate",
+    "Amount": {
+      "$value": "100",
+      "$type": "xrp"
+    },
+    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
+    "SettleDelay": 86400,
+    "PublicKey": "32D2471DB72B27E3310F355BB33E339BF26F8392D5A93D3BC0FC3B566612DA0F0A",
+    "CancelAfter": 533171558,
+    "DestinationTag": 23480,
+    "SourceTag": 11747
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "PaymentChannelFund",
+    "Channel": "C1AE6DDDEEC05CF2978C0BAD6FE302948E9533691DC749DCDD3B9E5992CA6198",
+    "Amount": {
+      "$value": "200",
+      "$type": "xrp"
+    },
+    "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": "xrp"
+    },
+    "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

@@ -2,6 +2,19 @@
 module.exports = {
   reactStrictMode: true,
   images: {
-    domains: ['avatars.githubusercontent.com'],
+    domains: ["avatars.githubusercontent.com"],
   },
-}
+  webpack(config, { isServer }) {
+    config.resolve.alias["vscode"] = require.resolve(
+      "@codingame/monaco-languageclient/lib/vscode-compatibility"
+    );
+    if (!isServer) {
+      config.resolve.fallback.fs = false;
+    }
+    config.module.rules.push({
+      test: /\.md$/,
+      use: "raw-loader",
+    });
+    return config;
+  },
+};

package.json

@@ -6,33 +6,72 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "postinstall": "patch-package"
   },
   "dependencies": {
-    "@mattjennings/react-modal": "^1.0.3",
-    "@monaco-editor/react": "^4.3.1",
+    "@codingame/monaco-jsonrpc": "^0.3.1",
+    "@codingame/monaco-languageclient": "^0.17.0",
+    "@monaco-editor/react": "^4.4.1",
     "@octokit/core": "^3.5.1",
     "@radix-ui/colors": "^0.1.7",
+    "@radix-ui/react-alert-dialog": "^0.1.1",
     "@radix-ui/react-dialog": "^0.1.1",
     "@radix-ui/react-dropdown-menu": "^0.1.1",
-    "@stitches/react": "^1.2.5",
-    "@theme-ui/color": "^0.11.3",
-    "@theme-ui/match-media": "^0.11.3",
-    "monaco-editor": "^0.29.1",
+    "@radix-ui/react-id": "^0.1.1",
+    "@radix-ui/react-label": "^0.1.5",
+    "@radix-ui/react-popover": "^0.1.6",
+    "@radix-ui/react-switch": "^0.1.5",
+    "@radix-ui/react-tooltip": "^0.1.7",
+    "@stitches/react": "^1.2.6-0",
+    "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.33.0",
     "next": "^12.0.4",
     "next-auth": "^4.0.0-beta.5",
-    "next-themes": "^0.0.15",
+    "next-themes": "^0.1.1",
+    "normalize-url": "^7.0.2",
     "octokit": "^1.7.0",
+    "pako": "^2.0.4",
+    "patch-package": "^6.4.7",
     "phosphor-react": "^1.3.1",
+    "postinstall-postinstall": "^2.1.0",
+    "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",
-    "valtio": "^1.2.5"
+    "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.3.2",
+    "xrpl-client": "^1.9.4"
   },
   "devDependencies": {
+    "@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

@@ -1,30 +1,150 @@
+import { useEffect } from "react";
 import "../styles/globals.css";
 import type { AppProps } from "next/app";
+import Head from "next/head";
 import { SessionProvider } from "next-auth/react";
 import { ThemeProvider } from "next-themes";
 import { Toaster } from "react-hot-toast";
+import { useRouter } from "next/router";
+import { IdProvider } from "@radix-ui/react-id";
 
-import { darkTheme } from "../stitches.config";
+import { darkTheme, css } from "../stitches.config";
 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";
+import Alert from "../components/AlertDialog";
+
+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") &&
+        !snap.files.length &&
+        !snap.mainModalShowed
+      ) {
+        state.mainModalOpen = true;
+        state.mainModalShowed = true;
+      }
+    }
+  }, [
+    gistId,
+    router.isReady,
+    router.pathname,
+    snap.files,
+    snap.mainModalShowed,
+  ]);
+
   return (
     <>
-      <SessionProvider session={session}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="dark"
-          enableSystem={false}
-          value={{
-            light: "light",
-            dark: darkTheme.className,
-          }}
-        >
-          <Navigation />
-          <Component {...pageProps} />
-          <Toaster />
-        </ThemeProvider>
-      </SessionProvider>
+      <Head>
+        <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 Builder</title>
+        <meta property="og:title" content="XRPL Hooks Builder" />
+        <meta name="twitter:title" content="XRPL Hooks Builder" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@XRPLF" />
+        <meta
+          name="description"
+          content="Hooks Builder, add smart contract functionality to the XRP Ledger."
+        />
+        <meta
+          property="og:description"
+          content="Hooks Builder, add smart contract functionality to the XRP Ledger."
+        />
+        <meta
+          name="twitter:description"
+          content="Hooks Builder, add smart contract functionality to the XRP Ledger."
+        />
+        <meta property="og:image" content={`${origin}${shareImg}`} />
+        <meta property="og:image:width" content="1200" />
+        <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 Builder" />
+        <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}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem={false}
+            value={{
+              light: "light",
+              dark: darkTheme.className,
+            }}
+          >
+            <Navigation />
+            <Component {...pageProps} />
+            <Toaster
+              toastOptions={{
+                className: css({
+                  backgroundColor: "$mauve1",
+                  color: "$mauve10",
+                  fontSize: "$sm",
+                  zIndex: 9999,
+                  ".dark &": {
+                    backgroundColor: "$mauve4",
+                    color: "$mauve12",
+                  },
+                })(),
+              }}
+            />
+            <Alert />
+          </ThemeProvider>
+        </SessionProvider>
+      </IdProvider>
     </>
   );
 }

pages/_document.tsx

@@ -16,11 +16,14 @@ class MyDocument extends Document {
   }
   render() {
     globalStyles();
+
     return (
       <Html>
         <Head>
-          <meta name="description" content="Playground for XRPL Hooks" />
-          <link rel="icon" href="/favicon.ico" />
+          <style
+            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

@@ -1,12 +1,12 @@
 import type { NextRequest, NextFetchEvent } from 'next/server';
 import { NextResponse as Response } from 'next/server';
-import { getToken } from "next-auth/jwt"
 
 export default function middleware(req: NextRequest, ev: NextFetchEvent) {
 
   if (req.nextUrl.pathname === "/") {
-    console.log('kissa', ev);
-    return Response.redirect("/develop");
+    const url = req.nextUrl.clone();
+    url.pathname = '/develop';
+    return Response.redirect(url);
 
   }
 }

pages/api/auth/[...nextauth].ts

@@ -1,5 +1,4 @@
 import NextAuth from "next-auth"
-import GithubProvider from "next-auth/providers/github"
 
 export default NextAuth({
   // Configure one or more authentication providers
@@ -42,7 +41,6 @@ export default NextAuth({
     },
     async session({ session, token }) {
       session.accessToken = token.accessToken as string;
-      const user = { ...session.user, username: token.username };
       session['user']['username'] = token.username as string;
       return session
     }

pages/api/faucet.ts

@@ -0,0 +1,43 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+interface ErrorResponse {
+  error: string
+}
+
+export interface Faucet {
+  address: string;
+  secret: string;
+  xrp: number;
+  hash: string;
+  code: string;
+}
+
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Faucet | ErrorResponse>
+) {
+  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://${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)
+    }
+    return res.status(200).json(json);
+  } catch (err) {
+    console.log(err)
+    return res.status(500).json({ error: 'Server error' })
+  }
+  return res.status(500).json({ error: 'Not able to create faucet, try again' })
+}

pages/api/proxy.ts

@@ -0,0 +1,18 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse
+) {
+    try {
+        const { url, opts } = req.body
+        const r = await fetch(url, opts);
+        if (!r.ok) throw (r.statusText)
+
+        const data = await r.json()
+        return res.json(data)
+    } catch (error) {
+        console.warn(error)
+        return res.status(500).json({ message: "Something went wrong!" })
+    }
+}

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

@@ -0,0 +1,63 @@
+import dynamic from "next/dynamic";
+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,
+});
+
+const Accounts = dynamic(() => import("../../components/Accounts"), {
+  ssr: false,
+});
+
+const LogBox = dynamic(() => import("../../components/LogBox"), {
+  ssr: false,
+});
+
+const Deploy = () => {
+  const { deployLogs } = useSnapshot(state);
+  return (
+    <Split
+      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>
+      <Split
+        direction="horizontal"
+        sizes={getSplit("deployHorizontal") || [50, 50]}
+        minSize={[320, 160]}
+        gutterSize={4}
+        gutterAlign="center"
+        style={{
+          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>
+  );
+};
+
+export default Deploy;

pages/deploy/index.tsx

@@ -1,12 +0,0 @@
-import { useSnapshot } from "valtio";
-import Container from "../../components/Container";
-import { state } from "../../state";
-
-const Deploy = () => {
-  const snap = useSnapshot(state);
-  return (
-    <Container>This will be the deploy page {JSON.stringify(snap)}</Container>
-  );
-};
-
-export default Deploy;

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

@@ -0,0 +1,271 @@
+import { Label } from "@radix-ui/react-label";
+import { Switch, SwitchThumb } from "../../components/Switch";
+import type { NextPage } from "next";
+import dynamic from "next/dynamic";
+import { Gear, Play } from "phosphor-react";
+import Hotkeys from "react-hot-keys";
+import Split from "react-split";
+import { useSnapshot } from "valtio";
+import { ButtonGroup, Flex } from "../../components";
+import Box from "../../components/Box";
+import Button from "../../components/Button";
+import Popover from "../../components/Popover";
+import state from "../../state";
+import { compileCode } from "../../state/actions";
+import { getSplit, saveSplit } from "../../state/actions/persistSplits";
+import { styled } from "../../stitches.config";
+
+const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
+  ssr: false,
+});
+
+const LogBox = dynamic(() => import("../../components/LogBox"), {
+  ssr: false,
+});
+
+const OptimizationText = () => (
+  <span>
+    Specify which optimization level to use for compiling. For example -O0 means
+    “no optimization”: this level compiles the fastest and generates the most
+    debuggable code. -O2 means moderate level of optimization which enables most
+    optimizations. Read more about the options from{" "}
+    <a
+      className="link"
+      rel="noopener noreferrer"
+      target="_blank"
+      href="https://clang.llvm.org/docs/CommandGuide/clang.html#cmdoption-o0"
+    >
+      clang documentation
+    </a>
+    .
+  </span>
+);
+
+const StyledOptimizationText = styled(OptimizationText, {
+  color: "$mauve12 !important",
+  fontSize: "200px",
+  "span a.link": {
+    color: "red",
+  },
+});
+
+const CompilerSettings = () => {
+  const snap = useSnapshot(state);
+  return (
+    <Flex css={{ minWidth: 200, flexDirection: "column", gap: "$5" }}>
+      <Box>
+        <Label
+          style={{
+            flexDirection: "row",
+            display: "flex",
+          }}
+        >
+          Optimization level{" "}
+          <Popover
+            css={{
+              maxWidth: "240px",
+              lineHeight: "1.3",
+              a: {
+                color: "$purple11",
+              },
+              ".dark &": {
+                backgroundColor: "$black !important",
+
+                ".arrow": {
+                  fill: "$colors$black",
+                },
+              },
+            }}
+            content={<StyledOptimizationText />}
+          >
+            <Flex
+              css={{
+                position: "relative",
+                top: "-1px",
+                ml: "$1",
+                backgroundColor: "$mauve8",
+                borderRadius: "$full",
+                cursor: "pointer",
+                width: "16px",
+                height: "16px",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              ?
+            </Flex>
+          </Popover>
+        </Label>
+        <ButtonGroup css={{ mt: "$2", fontFamily: "$monospace" }}>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-O0"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O0")}
+          >
+            -O0
+          </Button>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-O1"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O1")}
+          >
+            -O1
+          </Button>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-O2"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O2")}
+          >
+            -O2
+          </Button>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-O3"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O3")}
+          >
+            -O3
+          </Button>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-O4"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O4")}
+          >
+            -O4
+          </Button>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-Os"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-Os")}
+          >
+            -Os
+          </Button>
+        </ButtonGroup>
+      </Box>
+      <Box css={{ flexDirection: "column" }}>
+        <Label
+          style={{
+            flexDirection: "row",
+            display: "flex",
+          }}
+        >
+          Clean WASM (experimental){" "}
+          <Popover
+            css={{
+              maxWidth: "240px",
+              lineHeight: "1.3",
+              a: {
+                color: "$purple11",
+              },
+              ".dark &": {
+                backgroundColor: "$black !important",
+
+                ".arrow": {
+                  fill: "$colors$black",
+                },
+              },
+            }}
+            content="Cleaner removes unwanted compiler-provided exports and functions from a wasm binary to make it (more) suitable for being used as a Hook"
+          >
+            <Flex
+              css={{
+                position: "relative",
+                top: "-1px",
+                mx: "$1",
+                backgroundColor: "$mauve8",
+                borderRadius: "$full",
+                cursor: "pointer",
+                width: "16px",
+                height: "16px",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              ?
+            </Flex>
+          </Popover>
+        </Label>
+        <Switch
+          css={{ mt: "$2" }}
+          checked={snap.compileOptions.strip}
+          onCheckedChange={(checked) => {
+            state.compileOptions.strip = checked;
+          }}
+        >
+          <SwitchThumb />
+        </Switch>
+      </Box>
+    </Flex>
+  );
+};
+
+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() ===
+          "c" && (
+          <Hotkeys
+            keyName="command+b,ctrl+b"
+            onKeyDown={() =>
+              !snap.compiling && snap.files.length && compileCode(snap.active)
+            }
+          >
+            <Flex
+              css={{
+                position: "absolute",
+                bottom: "$4",
+                left: "$4",
+                alignItems: "center",
+                display: "flex",
+                cursor: "pointer",
+                gap: "$2",
+              }}
+            >
+              <Button
+                variant="primary"
+                uppercase
+                disabled={!snap.files.length}
+                isLoading={snap.compiling}
+                onClick={() => compileCode(snap.active)}
+              >
+                <Play weight="bold" size="16px" />
+                Compile to Wasm
+              </Button>
+              <Popover content={<CompilerSettings />}>
+                <Button variant="primary" css={{ px: "10px" }}>
+                  <Gear size="16px" />
+                </Button>
+              </Popover>
+            </Flex>
+          </Hotkeys>
+        )}
+      </main>
+      <Box
+        css={{
+          display: "flex",
+          background: "$mauve1",
+          position: "relative",
+        }}
+      >
+        <LogBox
+          title="Development Log"
+          clearLog={() => (state.logs = [])}
+          logs={snap.logs}
+        />
+      </Box>
+    </Split>
+  );
+};
+
+export default Home;

pages/develop/index.tsx

@@ -1,39 +0,0 @@
-import type { NextPage } from "next";
-import Head from "next/head";
-import dynamic from "next/dynamic";
-
-import Footer from "../../components/Footer";
-
-const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
-  ssr: false,
-});
-
-const Home: NextPage = () => {
-  return (
-    <>
-      <Head>
-        <title>XRPL Hooks Playground</title>
-      </Head>
-      <main style={{ display: "flex", flex: 1 }}>
-        <HooksEditor />
-      </main>
-
-      <Footer />
-    </>
-  );
-};
-
-export default Home;
-
-// export const getStaticPaths: GetStaticPaths = async () => {
-//   // ...
-//   return { paths: [], fallback: "blocking" };
-// };
-
-// export const getStaticProps: GetStaticProps = async (context) => {
-//   // ...
-//   return {
-//     props: {},
-//     revalidate: 60,
-//   };
-// };

pages/index.tsx

@@ -0,0 +1,5 @@
+const Home = () => {
+  return <p>homepage</p>;
+};
+
+export default Home;

pages/sign-in.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+import { signIn, useSession } from "next-auth/react";
+
+import Box from "../components/Box";
+import Spinner from "../components/Spinner";
+
+const SignInPage = () => {
+  const { data: session, status } = useSession();
+
+  useEffect(() => {
+    if (status !== "loading" && !session)
+      void signIn("github", { redirect: false });
+    if (status !== "loading" && session) window.close();
+  }, [session, status]);
+
+  return (
+    <Box
+      css={{
+        display: "flex",
+        backgroundColor: "$mauve1",
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 9999,
+        textAlign: "center",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "$2",
+      }}
+    >
+      Logging in <Spinner />
+    </Box>
+  );
+};
+
+export default SignInPage;

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

@@ -0,0 +1,124 @@
+import dynamic from "next/dynamic";
+import Split from "react-split";
+import { useSnapshot } from "valtio";
+import { Box, Container, Flex, Tab, Tabs } from "../../components";
+import Transaction from "../../components/Transaction";
+import state from "../../state";
+import { getSplit, saveSplit } from "../../state/actions/persistSplits";
+import { transactionsState, modifyTransaction } from "../../state";
+
+const DebugStream = dynamic(() => import("../../components/DebugStream"), {
+  ssr: false,
+});
+
+const LogBox = dynamic(() => import("../../components/LogBox"), {
+  ssr: false,
+});
+const Accounts = dynamic(() => import("../../components/Accounts"), {
+  ssr: false,
+});
+
+const Test = () => {
+  const { transactionLogs } = useSnapshot(state);
+  const { transactions, activeHeader } = useSnapshot(transactionsState);
+
+  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
+                activeHeader={activeHeader}
+                // TODO make header a required field
+                onChangeActive={(idx, header) => {
+                  if (header) transactionsState.activeHeader = header;
+                }}
+                keepAllAlive
+                forceDefaultExtension
+                defaultExtension=".json"
+                onCreateNewTab={header => modifyTransaction(header, {})}
+                onCloseTab={(idx, header) =>
+                  header && modifyTransaction(header, undefined)
+                }
+              >
+                {transactions.map(({ header, state }) => (
+                  <Tab key={header} header={header}>
+                    <Transaction
+                      state={state}
+                      header={header}
+                    />
+                  </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;

pages/test/index.tsx

@@ -1,7 +0,0 @@
-import Container from "../../components/Container";
-
-const Test = () => {
-  return <Container>This will be the test page</Container>;
-};
-
-export default Test;

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

@@ -1,150 +0,0 @@
-import { proxy, subscribe } from 'valtio';
-import { devtools } from 'valtio/utils';
-import { Octokit } from '@octokit/core';
-import type monaco from 'monaco-editor';
-import toast from 'react-hot-toast';
-
-const octokit = new Octokit();
-
-interface File {
-  name: string,
-  language: string,
-  content: string
-}
-
-interface IState {
-  files: File[],
-  active: number;
-  loading: boolean;
-  compiling: boolean;
-  logs: {
-    type: 'error' | 'warning' | 'log',
-    message: string;
-  }[];
-  editorCtx?: typeof monaco.editor;
-  editorSettings: {
-    tabSize: number;
-  }
-}
-
-let localStorageState: null | string = null;
-let initialState = {
-  files: [],
-  active: 0,
-  loading: false,
-  compiling: false,
-  logs: [],
-  editorCtx: undefined,
-  editorSettings: {
-    tabSize: 2
-  }
-}
-
-if (typeof window !== 'undefined') {
-  try {
-    localStorageState = localStorage.getItem('hooksIdeState');
-  } catch (err) {
-    console.log(`localStorage state broken`);
-    localStorage.removeItem('hooksIdeState');
-  }
-}
-if (localStorageState) {
-  initialState = JSON.parse(localStorageState);
-}
-
-// Initialize state
-export const state = proxy<IState>(initialState);
-
-// Fetch content from Githug Gists
-export const fetchFiles = (gistId: string) => {
-  if (gistId) {
-    state.logs.push({ type: 'log', message: `Fetching Gist with id: ${gistId}` });
-    octokit.request("GET /gists/{gist_id}", { gist_id: gistId }).then(res => {
-      if (res.data.files && Object.keys(res.data.files).length > 0) {
-        const files = Object.keys(res.data.files).map(filename => ({
-          name: res.data.files?.[filename]?.filename || 'noname.c',
-          language: res.data.files?.[filename]?.language?.toLowerCase() || '',
-          content: res.data.files?.[filename]?.content || ''
-        }))
-        state.loading = false;
-        if (files.length > 0) {
-          state.logs.push({ type: 'log', message: 'Fetched successfully ✅' })
-          state.files = files;
-          return
-        }
-        return
-      }
-
-    }).catch(err => {
-      state.loading = false;
-      state.logs.push({ type: 'error', message: `Couldn't find Gist with id: ${gistId}` })
-      return
-    })
-    return
-  }
-  state.loading = false;
-  // return state.files = initFiles
-}
-
-export const updateEditorSettings = (editorSettings: IState['editorSettings']) => {
-  state.editorCtx?.getModels().forEach(model => {
-    console.log(model.uri)
-    model.updateOptions({
-      ...editorSettings
-    })
-  });
-  return state.editorSettings = editorSettings;
-}
-
-export const saveFile = (value: string) => {
-  toast.success('Saved successfully', { position: 'bottom-center' })
-}
-
-export const createNewFile = (name: string) => {
-  state.files.push({ name, language: 'c', content: "" })
-  state.active = state.files.length - 1;
-}
-
-export const compileCode = async (activeId: number) => {
-  if (!process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT) {
-    throw Error('Missing env!')
-  };
-  if (state.compiling) {
-    return;
-  }
-  state.compiling = true;
-  try {
-    const res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        "output": "wasm",
-        "compress": true,
-        "files": [
-          {
-            "type": "c",
-            "name": state.files[activeId].name,
-            "options": "-g -O3",
-            "src": state.files[activeId].content
-          }
-        ]
-      })
-    });
-    const json = await res.json();
-    state.compiling = false;
-    toast.success('Compiled successfully!');
-    console.log(json)
-  } catch {
-    state.logs.push({ type: 'error', message: 'Error occured while compiling!' })
-    state.compiling = false;
-  }
-}
-
-const unsub = devtools(state, 'Files State');
-
-subscribe(state, () => {
-  const { editorCtx, ...storedState } = state;
-  localStorage.setItem('hooksIdeState', JSON.stringify(storedState))
-});

state/actions/addFaucetAccount.ts

@@ -0,0 +1,96 @@
+
+import toast from "react-hot-toast";
+import state, { FaucetAccountRes } from '../index';
+
+export const names = [
+  "Alice",
+  "Bob",
+  "Carol",
+  "Carlos",
+  "Charlie",
+  "Dan",
+  "Dave",
+  "David",
+  "Faythe",
+  "Frank",
+  "Grace",
+  "Heidi",
+  "Judy",
+  "Olive",
+  "Peggy",
+  "Walter",
+];
+
+/* This function adds faucet account to application global state.
+ * It calls the /api/faucet endpoint which in send a HTTP POST to
+ * https://hooks-testnet.xrpl-labs.com/newcreds and it returns
+ * new account with 10 000 XRP. Hooks Testnet /newcreds endpoint
+ * is protected with CORS so that's why we did our own endpoint
+ */
+export const addFaucetAccount = async (showToast: boolean = false) => {
+  // Lets limit the number of faucet accounts to 5 for now
+  if (state.accounts.length > 5) {
+    return toast.error("You can only have maximum 6 accounts");
+  }
+  if (typeof window !== 'undefined') {
+
+
+    const toastId = showToast ? toast.loading("Creating account") : "";
+    const res = await fetch(`${window.location.origin}/api/faucet`, {
+      method: "POST",
+    });
+    const json: FaucetAccountRes | { error: string } = await res.json();
+    if ("error" in json) {
+      if (showToast) {
+        return toast.error(json.error, { id: toastId });
+      } else {
+        return;
+      }
+    } else {
+      if (showToast) {
+        toast.success("New account created", { id: toastId });
+      }
+      const currNames = state.accounts.map(acc => acc.name);
+      state.accounts.push({
+        name: names.filter(name => !currNames.includes(name))[0],
+        xrp: (json.xrp || 0 * 1000000).toString(),
+        address: json.address,
+        secret: json.secret,
+        sequence: 1,
+        hooks: [],
+        isLoading: false,
+        version: '2'
+      });
+    }
+  }
+};
+
+// fetch initial faucets
+(async function fetchFaucets() {
+  if (typeof window !== 'undefined') {
+    if (state.accounts.length === 0) {
+      await addFaucetAccount();
+      // setTimeout(() => {
+      //   addFaucetAccount();
+      // }, 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

@@ -0,0 +1,93 @@
+import toast from "react-hot-toast";
+import Router from 'next/router';
+
+import state from "../index";
+import { saveFile } from "./saveFile";
+import { decodeBinary } from "../../utils/decodeBinary";
+import { ref } from "valtio";
+
+/* compileCode sends the code of the active file to compile endpoint
+ * If all goes well you will get base64 encoded wasm file back with
+ * some extra logging information if we can provide it. This function 
+ * also decodes the returned wasm and creates human readable WAT file
+ * out of it and store both in global state.
+ */
+export const compileCode = async (activeId: number) => {
+  // Save the file to global state
+  saveFile(false);
+  if (!process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT) {
+    throw Error("Missing env!");
+  }
+  // Bail out if we're already compiling
+  if (state.compiling) {
+    // if compiling is ongoing return
+    return;
+  }
+  // Set loading state to true
+  state.compiling = true;
+  state.logs = []
+  try {
+    const res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        output: "wasm",
+        compress: true,
+        strip: state.compileOptions.strip,
+        files: [
+          {
+            type: "c",
+            options: state.compileOptions.optimizationLevel || '-O0',
+            name: state.files[activeId].name,
+            src: state.files[activeId].content,
+          },
+        ],
+      }),
+    });
+    const json = await res.json();
+    state.compiling = false;
+    if (!json.success) {
+      state.logs.push({ type: "error", message: json.message });
+      if (json.tasks && json.tasks.length > 0) {
+        json.tasks.forEach((task: any) => {
+          if (!task.success) {
+            state.logs.push({ type: "error", message: task?.console });
+          }
+        });
+      }
+      return toast.error(`Couldn't compile!`, { position: "bottom-center" });
+    }
+    state.logs.push({
+      type: "success",
+      message: `File ${state.files?.[activeId]?.name} compiled successfully. Ready to deploy.`,
+      link: Router.asPath.replace("develop", "deploy"),
+      linkText: "Go to deploy",
+    });
+    // Decode base64 encoded wasm that is coming back from the endpoint
+    const bufferData = await decodeBinary(json.output);
+    state.files[state.active].compiledContent = ref(bufferData);
+    state.files[state.active].lastCompiled = new Date();
+    // Import wabt from and create human readable version of wasm file and
+    // put it into state
+    import("wabt").then((wabt) => {
+      const ww = wabt.default();
+      const myModule = ww.readWasm(new Uint8Array(bufferData), {
+        readDebugNames: true,
+      });
+      myModule.applyNames();
+
+      const wast = myModule.toText({ foldExprs: false, inlineExport: false });
+      state.files[state.active].compiledWatContent = wast;
+      toast.success("Compiled successfully!", { position: "bottom-center" });
+    });
+  } catch (err) {
+    console.log(err);
+    state.logs.push({
+      type: "error",
+      message: "Error occured while compiling!",
+    });
+    state.compiling = false;
+  }
+};

state/actions/createNewFile.ts

@@ -0,0 +1,17 @@
+import state, { IFile } from '../index';
+
+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 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.tsx

@@ -0,0 +1,282 @@
+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";
+import { Link } from "../../components";
+import { ref } from "valtio";
+import estimateFee from "../../utils/estimateFee";
+
+export const sha256 = async (string: string) => {
+  const utf8 = new TextEncoder().encode(string);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", utf8);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray
+    .map((bytes) => bytes.toString(16).padStart(2, "0"))
+    .join("");
+  return hashHex;
+};
+
+function toHex(str: string) {
+  var result = "";
+  for (var i = 0; i < str.length; i++) {
+    result += str.charCodeAt(i).toString(16);
+  }
+  return result.toUpperCase();
+}
+
+function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
+  if (!arrayBuffer) {
+    return "";
+  }
+  if (
+    typeof arrayBuffer !== "object" ||
+    arrayBuffer === null ||
+    typeof arrayBuffer.byteLength !== "number"
+  ) {
+    throw new TypeError("Expected input to be an ArrayBuffer");
+  }
+
+  var view = new Uint8Array(arrayBuffer);
+  var result = "";
+  var value;
+
+  for (var i = 0; i < view.length; i++) {
+    value = view[i].toString(16);
+    result += value.length === 1 ? "0" + value : value;
+  }
+
+  return result;
+}
+
+export const prepareDeployHookTx = async (
+  account: IAccount & { name?: string },
+  data: SetHookData
+) => {
+  if (
+    !state.files ||
+    state.files.length === 0 ||
+    !state.files?.[state.active]?.compiledContent
+  ) {
+    return;
+  }
+
+  if (!state.files?.[state.active]?.compiledContent) {
+    return;
+  }
+  if (!state.client) {
+    return;
+  }
+  const HookNamespace = (await sha256(data.HookNamespace)).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
+  )?.map((aa) => ({
+    HookParameter: {
+      HookParameterName: toHex(aa.HookParameter.HookParameterName || ""),
+      HookParameterValue: aa.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",
+      Sequence: account.sequence,
+      Fee: data.Fee,
+      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,
+            }),
+          },
+        },
+      ],
+    };
+    return tx;
+  }
+};
+
+/* deployHook function turns the wasm binary into
+ * hex string, signs the transaction and deploys it to
+ * Hooks testnet.
+ */
+export const deployHook = async (
+  account: IAccount & { name?: string },
+  data: SetHookData
+) => {
+  if (typeof window !== "undefined") {
+    const tx = await prepareDeployHookTx(account, data);
+    if (!tx) {
+      return;
+    }
+    if (!state.client) {
+      return;
+    }
+    const keypair = derive.familySeed(account.secret);
+
+    const { signedTransaction } = sign(tx, keypair);
+    const currentAccount = state.accounts.find(
+      (acc) => acc.address === account.address
+    );
+    if (currentAccount) {
+      currentAccount.isLoading = true;
+    }
+    let submitRes;
+
+    try {
+      submitRes = await state.client?.send({
+        command: "submit",
+        tx_blob: signedTransaction,
+      });
+
+      if (submitRes.engine_result === "tesSUCCESS") {
+        state.deployLogs.push({
+          type: "success",
+          message: "Hook deployed successfully ✅",
+        });
+        state.deployLogs.push({
+          type: "success",
+          message: ref(
+            <>
+              [{submitRes.engine_result}] {submitRes.engine_result_message}{" "}
+              Validated ledger index:{" "}
+              <Link
+                as="a"
+                href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${submitRes.validated_ledger_index}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {submitRes.validated_ledger_index}
+              </Link>
+            </>
+          ),
+          // message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`,
+        });
+      } else {
+        state.deployLogs.push({
+          type: "error",
+          message: `[${submitRes.engine_result || submitRes.error}] ${
+            submitRes.engine_result_message || submitRes.error_exception
+          }`,
+        });
+      }
+    } catch (err) {
+      console.log(err);
+      state.deployLogs.push({
+        type: "error",
+        message: "Error occured while deploying",
+      });
+    }
+    if (currentAccount) {
+      currentAccount.isLoading = false;
+    }
+    return submitRes;
+  }
+};
+
+export const deleteHook = async (account: IAccount & { name?: string }) => {
+  if (!state.client) {
+    return;
+  }
+  const currentAccount = state.accounts.find(
+    (acc) => acc.address === account.address
+  );
+  if (currentAccount?.isLoading || !currentAccount?.hooks.length) {
+    return;
+  }
+  if (typeof window !== "undefined") {
+    const tx = {
+      Account: account.address,
+      TransactionType: "SetHook",
+      Sequence: account.sequence,
+      Fee: "100000",
+      Hooks: [
+        {
+          Hook: {
+            CreateCode: "",
+            Flags: 1,
+          },
+        },
+      ],
+    };
+
+    const keypair = derive.familySeed(account.secret);
+    try {
+      // Update tx Fee value with network estimation
+      const res = await estimateFee(tx, account);
+      tx["Fee"] = res?.base_fee ? res?.base_fee : "1000";
+    } catch (err) {
+      // use default value what you defined earlier
+      console.log(err);
+    }
+    const { signedTransaction } = sign(tx, keypair);
+
+    if (currentAccount) {
+      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}`,
+        });
+        currentAccount.hooks = [];
+      } 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/downloadAsZip.ts

@@ -0,0 +1,19 @@
+import { createZip } from '../../utils/zip';
+import { guessZipFileName } from '../../utils/helpers';
+import state from '..'
+import toast from 'react-hot-toast';
+
+export const downloadAsZip = async () => {
+    try {
+        state.zipLoading = true
+        // TODO do something about file/gist loading state
+        const files = state.files.map(({ name, content }) => ({ name, content }));
+        const zipped = await createZip(files);
+        const zipFileName = guessZipFileName(files);
+        zipped.saveFile(zipFileName);
+    } catch (error) {
+        toast.error('Error occured while creating zip file, try again later')
+    } finally {
+        state.zipLoading = false
+    }
+};

state/actions/fetchFiles.ts

@@ -0,0 +1,92 @@
+import { Octokit } from "@octokit/core";
+import Router from "next/router";
+import state from '../index';
+import { templateFileIds } from '../constants';
+
+const octokit = new Octokit();
+
+/* Fetches Gist files from Githug Gists based on
+ * gistId and stores the content in global state
+ */
+export const fetchFiles = (gistId: string) => {
+  state.loading = true;
+  if (gistId && !state.files.length) {
+    state.logs.push({
+      type: "log",
+      message: `Fetching Gist with id: ${gistId}`,
+    });
+
+    octokit
+      .request("GET /gists/{gist_id}", { gist_id: gistId })
+      .then(async res => {
+        if (!Object.values(templateFileIds).includes(gistId)) {
+          return res
+        }
+        // in case of templates, fetch header file(s) and append to res
+        let resHeaderJson;
+        try {
+          const resHeader = await fetch(`${process.env.NEXT_PUBLIC_COMPILE_API_BASE_URL}/api/header-files`);
+          if (resHeader.ok) {
+            resHeaderJson = await resHeader.json();
+            const files = {
+              ...res.data.files,
+              'hookapi.h': res.data.files?.['hookapi.h'] || { filename: 'hookapi.h', content: resHeaderJson.hookapi, language: 'C' },
+              'hookmacro.h': res.data.files?.['hookmacro.h'] || { filename: 'hookmacro.h', content: resHeaderJson.hookmacro, language: 'C' },
+              'sfcodes.h': res.data.files?.['sfcodes.h'] || { filename: 'sfcodes.h', content: resHeaderJson.sfcodes, language: 'C' },
+            };
+            res.data.files = files;
+          }
+        } catch (err) {
+          console.log(err)
+        }
+
+
+
+        return res;
+        // If you want to load templates from GIST instad, uncomment the code below and comment the code above.
+        // return octokit.request("GET /gists/{gist_id}", { gist_id: templateFileIds.headers }).then(({ data: { files: headerFiles } }) => {
+        //   const files = { ...res.data.files, ...headerFiles }
+        //   console.log(headerFiles)
+        //   res.data.files = files
+        //   return res
+        // })
+      })
+      .then((res) => {
+        if (res.data.files && Object.keys(res.data.files).length > 0) {
+          const files = Object.keys(res.data.files).map((filename) => ({
+            name: res.data.files?.[filename]?.filename || "untitled.c",
+            language: res.data.files?.[filename]?.language?.toLowerCase() || "",
+            content: res.data.files?.[filename]?.content || "",
+          }));
+          state.loading = false;
+          if (files.length > 0) {
+            state.logs.push({
+              type: "success",
+              message: "Fetched successfully ✅",
+            });
+            state.files = files;
+            state.gistId = gistId;
+            state.gistName = Object.keys(res.data.files)?.[0] || "untitled";
+            state.gistOwner = res.data.owner?.login;
+            return;
+          } else {
+            // Open main modal if now files
+            state.mainModalOpen = true;
+          }
+          return Router.push({ pathname: "/develop" });
+        }
+        state.loading = false;
+      })
+      .catch((err) => {
+        // console.error(err)
+        state.loading = false;
+        state.logs.push({
+          type: "error",
+          message: `Couldn't find Gist with id: ${gistId}`,
+        });
+        return;
+      });
+    return;
+  }
+  state.loading = false;
+};

state/actions/importAccount.ts

@@ -0,0 +1,40 @@
+import toast from "react-hot-toast";
+import { derive, XRPL_Account } from "xrpl-accountlib";
+
+import state from '../index';
+import { names } from './addFaucetAccount';
+
+// Adds test account to global state with secret key
+export const importAccount = (secret: string) => {
+  if (!secret) {
+    return toast.error("You need to add secret!");
+  }
+  if (state.accounts.find((acc) => acc.secret === secret)) {
+    return toast.error("Account already added!");
+  }
+  let account: XRPL_Account | null = null;
+  try {
+    account = derive.familySeed(secret);
+  } catch (err: any) {
+    if (err?.message) {
+      toast.error(err.message)
+    } else {
+      toast.error('Error occured while importing account')
+    }
+    return;
+  }
+  if (!account || !account.secret.familySeed) {
+    return toast.error(`Couldn't create account!`);
+  }
+  state.accounts.push({
+    name: names[state.accounts.length],
+    address: account.address || "",
+    secret: account.secret.familySeed || "",
+    xrp: "0",
+    sequence: 1,
+    hooks: [],
+    isLoading: false,
+    version: '2'
+  });
+  return toast.success("Account imported successfully!");
+};

state/actions/index.ts

@@ -0,0 +1,25 @@
+import { addFaucetAccount } from "./addFaucetAccount";
+import { compileCode } from "./compileCode";
+import { createNewFile } from "./createNewFile";
+import { deployHook } from "./deployHook";
+import { fetchFiles } from "./fetchFiles";
+import { importAccount } from "./importAccount";
+import { saveFile } from "./saveFile";
+import { syncToGist } from "./syncToGist";
+import { updateEditorSettings } from "./updateEditorSettings";
+import { downloadAsZip } from "./downloadAsZip";
+import { sendTransaction } from "./sendTransaction";
+
+export {
+  addFaucetAccount,
+  compileCode,
+  createNewFile,
+  deployHook,
+  fetchFiles,
+  importAccount,
+  saveFile,
+  syncToGist,
+  updateEditorSettings,
+  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

@@ -0,0 +1,27 @@
+import toast from "react-hot-toast";
+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.endsWith(sought);
+  });
+  if (state.files.length > 0) {
+    state.files[state.active].content = currentModel?.getValue() || "";
+  }
+  if (showToast) {
+    toast.success("Saved successfully", { position: "bottom-center" });
+  }
+};
+
+export const saveAllFiles = () => {
+  const editorModels = state.editorCtx?.getModels();
+  state.files.forEach(file => {
+    const currentModel = editorModels?.find(model => model.uri.path.endsWith('/' + file.name))
+    if (currentModel) {
+      file.content = currentModel?.getValue() || '';
+    }
+  })
+}

state/actions/sendTransaction.ts

@@ -0,0 +1,58 @@
+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 { 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}`,
+            });
+        }
+        const currAcc = state.accounts.find(acc => acc.address === account.address);
+        if (currAcc && response.account_sequence_next) {
+            currAcc.sequence = response.account_sequence_next;
+        }
+    } catch (err) {
+        console.error(err);
+        state.transactionLogs.push({
+            type: "error",
+            message: err instanceof Error ? `${logPrefix}Error: ${err.message}` : `${logPrefix}Something went wrong, try again later`,
+        });
+    }
+};

state/actions/showAlert.ts

@@ -0,0 +1,23 @@
+import { ref } from 'valtio';
+import { AlertState, alertState } from "../../components/AlertDialog";
+
+export const showAlert = (title: string, opts: Omit<Partial<AlertState>, 'title' | 'isOpen'> = {}) => {
+    const { body: _body, confirmPrefix: _confirmPrefix, ...rest } = opts
+    const body = (_body && typeof _body === 'object') ? ref(_body) : _body
+    const confirmPrefix = (_confirmPrefix && typeof _confirmPrefix === 'object') ? ref(_confirmPrefix) : _confirmPrefix
+
+    const nwState: AlertState = {
+        isOpen: true,
+        title,
+        body,
+        confirmPrefix,
+        cancelText: undefined,
+        confirmText: undefined,
+        onCancel: undefined,
+        onConfirm: undefined,
+        ...rest,
+    }
+    Object.entries(nwState).forEach(([key, value]) => {
+        (alertState as any)[key] = value
+    })
+}

state/actions/syncToGist.ts

@@ -0,0 +1,104 @@
+import type { Session } from "next-auth";
+import toast from "react-hot-toast";
+import { Octokit } from "@octokit/core";
+import Router from "next/router";
+
+import state from '../index';
+import { saveAllFiles } from "./saveFile";
+
+const octokit = new Octokit();
+
+// Syncs the current files from the state to GitHub Gists.
+export const syncToGist = async (
+  session?: Session | null,
+  createNewGist?: boolean
+) => {
+  saveAllFiles();
+  let files: Record<string, { filename: string; content: string }> = {};
+  state.gistLoading = true;
+
+  if (!session || !session.user) {
+    state.gistLoading = false;
+    return toast.error("You need to be logged in!");
+  }
+  const toastId = toast.loading("Pushing to Gist");
+  if (!state.files || !state.files.length) {
+    state.gistLoading = false;
+    return toast.error(`You need to create some files we can push to gist`, {
+      id: toastId,
+    });
+  }
+  if (
+    state.gistId &&
+    session?.user.username === state.gistOwner &&
+    !createNewGist
+  ) {
+    // You can only remove files from Gist by updating file with empty contents
+    // So we need to fetch existing files and compare those to local state
+    // and then send empty content if we don't have matching files anymore
+    // on local state
+    const currentFilesRes = await octokit.request("GET /gists/{gist_id}", {
+      gist_id: state.gistId,
+    });
+    if (currentFilesRes.data.files) {
+      Object.keys(currentFilesRes?.data?.files).forEach((filename) => {
+        files[`${filename}`] = { filename, content: "" };
+      });
+    }
+    state.files.forEach((file) => {
+      files[`${file.name}`] = { filename: file.name, content: file.content };
+    });
+    // Update existing Gist
+    octokit
+      .request("PATCH /gists/{gist_id}", {
+        gist_id: state.gistId,
+        files,
+        headers: {
+          authorization: `token ${session?.accessToken || ""}`,
+        },
+      })
+      .then((res) => {
+        state.gistLoading = false;
+        return toast.success("Updated to gist successfully!", { id: toastId });
+      })
+      .catch((err) => {
+        console.log(err);
+        state.gistLoading = false;
+        return toast.error(`Could not update Gist, try again later!`, {
+          id: toastId,
+        });
+      });
+  } else {
+    // Not Gist of the current user or it isn't Gist yet
+    state.files.forEach((file) => {
+      files[`${file.name}`] = { filename: file.name, content: file.content };
+    });
+    octokit
+      .request("POST /gists", {
+        files,
+        public: true,
+        headers: {
+          authorization: `token ${session?.accessToken || ""}`,
+        },
+      })
+      .then((res) => {
+        state.gistLoading = false;
+        state.gistOwner = res.data.owner?.login;
+        state.gistId = res.data.id;
+        state.gistName = Array.isArray(res.data.files)
+          ? Object.keys(res.data?.files)?.[0]
+          : "Untitled";
+        Router.push({ pathname: `/develop/${res.data.id}` });
+        return toast.success("Created new gist successfully!", { id: toastId });
+      })
+      .catch((err) => {
+        console.log(err);
+        state.gistLoading = false;
+        return toast.error(`Could not create Gist, try again later!`, {
+          id: toastId,
+        });
+      });
+  }
+};
+
+export default syncToGist;

state/actions/updateEditorSettings.ts

@@ -0,0 +1,14 @@
+import state, { IState } from '../index';
+
+// Updates editor settings and stores them
+// in global state
+export const updateEditorSettings = (
+  editorSettings: IState["editorSettings"]
+) => {
+  state.editorCtx?.getModels().forEach((model) => {
+    model.updateOptions({
+      ...editorSettings,
+    });
+  });
+  return (state.editorSettings = editorSettings);
+};

state/constants/index.ts

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

state/constants/templates.ts

@@ -0,0 +1,20 @@
+// 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': '55f639bce59a49c58c45e663776b5138'
+}
+
+export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'hookmacro.h']

state/index.ts

@@ -0,0 +1,176 @@
+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;
+  language: string;
+  content: string;
+  compiledContent?: ArrayBuffer | null;
+  compiledWatContent?: string | null;
+  lastCompiled?: Date
+}
+
+export interface FaucetAccountRes {
+  address: string;
+  secret: string;
+  xrp: number;
+  hash: string;
+  code: string;
+}
+
+export interface IAccount {
+  name: string;
+  address: string;
+  secret: string;
+  xrp: string;
+  sequence: number;
+  hooks: string[];
+  isLoading: boolean;
+  version?: string;
+  error?: {
+    message: string;
+    code: string;
+  } | null;
+}
+
+export interface ILog {
+  type: "error" | "warning" | "log" | "success";
+  message: string | JSX.Element;
+  key?: string;
+  jsonData?: any,
+  timestring?: string;
+  link?: string;
+  linkText?: string;
+  defaultCollapsed?: boolean
+}
+
+export interface IState {
+  files: IFile[];
+  gistId?: string | null;
+  gistOwner?: string | null;
+  gistName?: string | null;
+  active: number;
+  activeWat: number;
+  loading: boolean;
+  gistLoading: boolean;
+  zipLoading: boolean;
+  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[];
+  compileOptions: {
+    optimizationLevel: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os';
+    strip: boolean
+  }
+}
+
+// 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,
+  gistName: undefined,
+  gistLoading: false,
+  zipLoading: false,
+  editorSettings: {
+    tabSize: 2,
+  },
+  splits: {},
+  client: null,
+  clientStatus: "offline" as "offline",
+  mainModalOpen: false,
+  mainModalShowed: false,
+  accounts: [],
+  compileOptions: {
+    optimizationLevel: '-O0',
+    strip: true
+  }
+};
+
+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 {
+    localStorageAccounts = localStorage.getItem("hooksIdeAccounts");
+  } catch (err) {
+    console.log(`localStorage state broken`);
+    localStorage.removeItem("hooksIdeAccounts");
+  }
+  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
+const state = proxy<IState>({
+  ...initialState,
+  accounts: initialAccounts.length > 0 ? initialAccounts : [],
+  logs: [],
+});
+// Initialize socket connection
+const client = new XrplClient(`wss://${process.env.NEXT_PUBLIC_TESTNET_URL}`);
+
+client.on("online", () => {
+  state.client = ref(client);
+  state.clientStatus = "online";
+});
+
+client.on("offline", () => {
+  state.clientStatus = "offline";
+});
+
+if (process.env.NODE_ENV !== "production") {
+  devtools(state, "Files State");
+}
+
+if (typeof window !== "undefined") {
+  subscribe(state, () => {
+    const { accounts, active } = state;
+    const accountsNoLoading = accounts.map(acc => ({ ...acc, isLoading: false }))
+    localStorage.setItem("hooksIdeAccounts", JSON.stringify(accountsNoLoading));
+    if (!state.files[active]?.compiledWatContent) {
+      state.activeWat = 0;
+    } else {
+      state.activeWat = active;
+    }
+  });
+}
+export default state
+
+export * from './transactions'