minor changes

Merge branch 'main' into test-page
Test page UI layout
2022-01-31 18:55:15 +05:30 · 2022-01-05 16:32:30 +05:30 · 2022-01-05 16:32:07 +05:30 · 2022-01-04 15:32:10 +05:30 · 2021-12-23 09:08:38 +02:00 · 2021-12-22 16:14:35 +02:00
21 changed files with 848 additions and 314 deletions
--- a/README.md
+++ b/README.md
@@ -26,6 +26,75 @@ 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.
+
+## Global state management
+
+Global state management is handled with library called Valtio (https://github.com/pmndrs/valtio). Initial state can be found from `./state/index.ts` file. All the actions which updates the state is found under `./state/actions/` folder.
+
+## Special notes
+
+Since we are dealing with greenfield tech and one of the dependencies (ripple-binary-codec) doesn't yet support signing `SetHook` transactions we had to monkey patch the library with patch-package (https://www.npmjs.com/package/patch-package). We modified the definitions.json file of the ripple-binary-codec library and then ran `yarn patch-package ripple-binary-codec` which created `patches/ripple-binary-codec+1.2.0.patch` file to this project. This file contains the modifications to `ripple-binary-codec` library. package.json contains postinstall hook which runs patch-package, and it will add the patch on the file mentioned earlier. This happens automatically after running patch package.
+
 ## Learn More

 To learn more about Next.js, take a look at the following resources:
@@ -34,9 +103,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.
--- a/components/Accounts.tsx
+++ b/components/Accounts.tsx
@@ -1,18 +1,14 @@
 import toast from "react-hot-toast";
 import { useSnapshot } from "valtio";
 import { ArrowSquareOut, Copy, Wallet, X } from "phosphor-react";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, FC } from "react";
 import Dinero from "dinero.js";

 import Button from "./Button";
 import { addFaucetAccount, deployHook, importAccount } from "../state/actions";
 import state from "../state";
 import Box from "./Box";
-import Container from "./Container";
-import Heading from "./Heading";
-import Stack from "./Stack";
-import Text from "./Text";
-import Flex from "./Flex";
+import { Container, Heading, Stack, Text, Flex } from ".";
 import {
  Dialog,
  DialogContent,
@@ -40,13 +36,11 @@ const AccountDialog = ({
 }) => {
  const snap = useSnapshot(state);
  const [showSecret, setShowSecret] = useState(false);
-  const activeAccount = snap.accounts.find(
-    (account) => account.address === activeAccountAddress
-  );
+  const activeAccount = snap.accounts.find(account => account.address === activeAccountAddress);
  return (
    <Dialog
      open={Boolean(activeAccountAddress)}
-      onOpenChange={(open) => {
+      onOpenChange={open => {
        setShowSecret(false);
        !open && setActiveAccountAddress(null);
      }}
@@ -141,7 +135,7 @@ const AccountDialog = ({
                    }}
                    ghost
                    size="xs"
-                    onClick={() => setShowSecret((curr) => !curr)}
+                    onClick={() => setShowSecret(curr => !curr)}
                  >
                    {showSecret ? "Hide" : "Show"}
                  </Button>
@@ -187,11 +181,7 @@ const AccountDialog = ({
                  target="_blank"
                  rel="noreferrer noopener"
                >
-                  <Button
-                    size="sm"
-                    ghost
-                    css={{ color: "$green11 !important", mt: "$3" }}
-                  >
+                  <Button size="sm" ghost css={{ color: "$green11 !important", mt: "$3" }}>
                    <ArrowSquareOut size="15px" />
                  </Button>
                </a>
@@ -207,10 +197,8 @@ const AccountDialog = ({
                >
                  {activeAccount && activeAccount?.hooks?.length > 0
                    ? activeAccount?.hooks
-                        .map((i) => {
-                          return `${i?.substring(0, 6)}...${i?.substring(
-                            i.length - 4
-                          )}`;
+                        .map(i => {
+                          return `${i?.substring(0, 6)}...${i?.substring(i.length - 4)}`;
                        })
                        .join(", ")
                    : "–"}
@@ -229,15 +217,19 @@ const AccountDialog = ({
  );
 };

-const Accounts = () => {
+interface AccountProps {
+  card?: boolean;
+  hideDeployBtn?: boolean;
+  showHookStats?: boolean;
+}
+
+const Accounts: FC<AccountProps> = props => {
  const snap = useSnapshot(state);
-  const [activeAccountAddress, setActiveAccountAddress] = useState<
-    string | null
-  >(null);
+  const [activeAccountAddress, setActiveAccountAddress] = useState<string | null>(null);
  useEffect(() => {
    const fetchAccInfo = async () => {
      if (snap.clientStatus === "online") {
-        const requests = snap.accounts.map((acc) =>
+        const requests = snap.accounts.map(acc =>
          snap.client?.send({
            id: acc.address,
            command: "account_info",
@@ -249,15 +241,13 @@ const Accounts = () => {
          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
-          );
+          const accountToUpdate = state.accounts.find(acc => acc.address === address);
          if (accountToUpdate) {
            accountToUpdate.xrp = balance;
            accountToUpdate.sequence = sequence;
          }
        });
-        const objectRequests = snap.accounts.map((acc) => {
+        const objectRequests = snap.accounts.map(acc => {
          return snap.client?.send({
            id: `${acc.address}-hooks`,
            command: "account_objects",
@@ -267,9 +257,7 @@ const Accounts = () => {
        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
-          );
+          const accountToUpdate = state.accounts.find(acc => acc.address === address);
          if (accountToUpdate) {
            accountToUpdate.hooks = res.account_objects
              .filter((ac: any) => ac?.LedgerEntryType === "Hook")
@@ -299,16 +287,20 @@ const Accounts = () => {
      as="div"
      css={{
        display: "flex",
-        borderTop: "1px solid $mauve6",
-        background: "$mauve1",
+        backgroundColor: props.card ? "$deep" : "$mauve1",
        position: "relative",
-        width: "50%",
+        width: "100%",
+        height: "100%",
        flexShrink: 0,
+        borderTop: "1px solid $mauve6",
        borderRight: "1px solid $mauve6",
+        borderLeft: "1px solid $mauve6",
+        borderBottom: "1px solid $mauve6",
+        borderRadius: props.card ? "$md" : undefined,
      }}
    >
-      <Container css={{ px: 0, flexShrink: 1 }}>
-        <Flex css={{ py: "$3" }}>
+      <Container css={{ p: 0, flexShrink: 1, height: "100%" }}>
+        <Flex css={{ py: "$3", borderBottom: props.card ? "1px solid $mauve6" : undefined }}>
          <Heading
            as="h3"
            css={{
@@ -326,79 +318,94 @@ const Accounts = () => {
            <Wallet size="15px" /> <Text css={{ lineHeight: 1 }}>Accounts</Text>
          </Heading>
          <Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
-            <Button ghost size="xs" onClick={() => addFaucetAccount(true)}>
+            <Button ghost size="sm" onClick={() => addFaucetAccount(true)}>
              Create
            </Button>
            <ImportAccountDialog />
          </Flex>
        </Flex>
-        <Box
-          as="div"
+        <Stack
          css={{
-            display: "flex",
            flexDirection: "column",
            width: "100%",
-            height: "160px",
            fontSize: "13px",
+            wordWrap: "break-word",
            fontWeight: "$body",
            fontFamily: "$monospace",
+            gap: 0,
+            height: "calc(100% - 52px)",
+            flexWrap: "nowrap",
            overflowY: "auto",
-            wordWrap: "break-word",
          }}
        >
-          <Stack css={{ flexDirection: "column", gap: 0 }}>
-            {snap.accounts.map((account) => (
-              <Flex
-                key={account.address + account.name}
-                onClick={() => setActiveAccountAddress(account.address)}
-                css={{
-                  gap: "$3",
-                  p: "$2 $3",
-                  justifyContent: "center",
-                  cursor: "pointer",
-                  "@hover": {
-                    "&:hover": {
-                      background: "$mauve3",
-                    },
+          {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: "$mauve3",
                  },
+                },
+              }}
+            >
+              <Flex
+                row
+                css={{
+                  justifyContent: "space-between",
                }}
              >
-                <Text>{account.name} </Text>
-                <Text css={{ color: "$mauve9" }}>
-                  {account.address} (
-                  {Dinero({
-                    amount: Number(account?.xrp || "0"),
-                    precision: 6,
-                  })
-                    .toUnit()
-                    .toLocaleString(undefined, {
-                      style: "currency",
-                      currency: "XRP",
-                      currencyDisplay: "name",
-                    })}
-                  )
-                </Text>
-                <Button
-                  css={{ ml: "auto" }}
-                  size="xs"
-                  uppercase
-                  isLoading={account.isLoading}
-                  disabled={
-                    account.isLoading ||
-                    !snap.files.filter((file) => file.compiledWatContent).length
-                  }
-                  variant="secondary"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    deployHook(account);
-                  }}
-                >
-                  Deploy
-                </Button>
+                <Box>
+                  <Text>{account.name} </Text>
+                  <Text css={{ color: "$mauve9" }}>
+                    {account.address} (
+                    {Dinero({
+                      amount: Number(account?.xrp || "0"),
+                      precision: 6,
+                    })
+                      .toUnit()
+                      .toLocaleString(undefined, {
+                        style: "currency",
+                        currency: "XRP",
+                        currencyDisplay: "name",
+                      })}
+                    )
+                  </Text>
+                </Box>
+                {!props.hideDeployBtn && (
+                  <Button
+                    css={{ ml: "auto" }}
+                    size="xs"
+                    uppercase
+                    isLoading={account.isLoading}
+                    disabled={
+                      account.isLoading ||
+                      !snap.files.filter(file => file.compiledWatContent).length
+                    }
+                    variant="secondary"
+                    onClick={e => {
+                      e.stopPropagation();
+                      deployHook(account);
+                    }}
+                  >
+                    Deploy
+                  </Button>
+                )}
              </Flex>
-            ))}
-          </Stack>
-        </Box>
+              {props.showHookStats && (
+                <Text muted small css={{ mt: "$2" }}>
+                  X hooks installed
+                </Text>
+              )}
+            </Flex>
+          ))}
+        </Stack>
      </Container>
      <AccountDialog
        activeAccountAddress={activeAccountAddress}
@@ -413,7 +420,7 @@ const ImportAccountDialog = () => {
  return (
    <Dialog>
      <DialogTrigger asChild>
-        <Button ghost size="xs">
+        <Button ghost size="sm">
          Import
        </Button>
      </DialogTrigger>
@@ -425,7 +432,7 @@ const ImportAccountDialog = () => {
            name="secret"
            type="password"
            value={value}
-            onChange={(e) => setValue(e.target.value)}
+            onChange={e => setValue(e.target.value)}
          />
        </DialogDescription>

--- a/components/Flex.tsx
+++ b/components/Flex.tsx
@@ -3,6 +3,23 @@ import Box from "./Box";

 const Flex = styled(Box, {
  display: "flex",
+  variants: {
+    row: {
+      true: {
+        flexDirection: "row",
+      },
+    },
+    column: {
+      true: {
+        flexDirection: "column",
+      },
+    },
+    fluid: {
+      true: {
+        width: '100%'
+      }
+    }
+  },
 });

 export default Flex;
--- a/components/HooksEditor.tsx
+++ b/components/HooksEditor.tsx
@@ -11,6 +11,7 @@ import Container from "./Container";
 import dark from "../theme/editor/amy.json";
 import light from "../theme/editor/xcode_default.json";
 import { saveFile } from "../state/actions";
+import { apiHeaderFiles } from "../state/constants";
 import state from "../state";

 import EditorNavigation from "./EditorNavigation";
@@ -26,12 +27,26 @@ loader.config({
  },
 });

+const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
+  const currPath = editor.getModel()?.uri.path;
+  if (apiHeaderFiles.find(h => currPath?.endsWith(h))) {
+    editor.updateOptions({ readOnly: true });
+  } else {
+    editor.updateOptions({ readOnly: false });
+  }
+};
+
 const HooksEditor = () => {
  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
  const subscriptionRef = useRef<ReconnectingWebSocket | null>(null);
  const snap = useSnapshot(state);
  const router = useRouter();
  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (editorRef.current) validateWritability(editorRef.current);
+  }, [snap.active]);
+
  useEffect(() => {
    return () => {
      subscriptionRef?.current?.close();
@@ -56,15 +71,15 @@ const HooksEditor = () => {
          keepCurrentModel
          defaultLanguage={snap.files?.[snap.active]?.language}
          language={snap.files?.[snap.active]?.language}
-          path={`file:///work/c/${snap.files?.[snap.active]?.name}`}
+          path={`file://work/c/${snap.files?.[snap.active]?.name}`}
          defaultValue={snap.files?.[snap.active]?.content}
-          beforeMount={(monaco) => {
+          beforeMount={monaco => {
            if (!snap.editorCtx) {
-              snap.files.forEach((file) =>
+              snap.files.forEach(file =>
                monaco.editor.createModel(
                  file.content,
                  file.language,
-                  monaco.Uri.parse(`file:///work/c/${file.name}`)
+                  monaco.Uri.parse(`file://work/c/${file.name}`)
                )
              );
            }
@@ -85,7 +100,7 @@ const HooksEditor = () => {
              // listen when the web socket is opened
              listen({
                webSocket: webSocket as WebSocket,
-                onConnection: (connection) => {
+                onConnection: connection => {
                  // create and start the language client
                  const languageClient = createLanguageClient(connection);
                  const disposable = languageClient.start();
@@ -124,12 +139,10 @@ const HooksEditor = () => {
                enabled: true,
              },
            });
-            editor.addCommand(
-              monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
-              () => {
-                saveFile();
-              }
-            );
+            editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+              saveFile();
+            });
+            validateWritability(editor)
          }}
          theme={theme === "dark" ? "dark" : "light"}
        />
@@ -147,9 +160,7 @@ const HooksEditor = () => {
              <Box css={{ display: "inline-flex", pl: "35px" }}>
                <ArrowBendLeftUp size={30} />
              </Box>
-              <Box
-                css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}
-              >
+              <Box css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}>
                <Text
                  css={{
                    fontSize: "14px",
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -110,20 +110,22 @@ export const Input = styled("input", {
          backgroundColor: "transparent",
        },
      },
+      deep: {
+        backgroundColor: "$deep",
+        boxShadow: "none",
+      },
    },
    state: {
      invalid: {
        boxShadow: "inset 0 0 0 1px $colors$red7",
        "&:focus": {
-          boxShadow:
-            "inset 0px 0px 0px 1px $colors$red8, 0px 0px 0px 1px $colors$red8",
+          boxShadow: "inset 0px 0px 0px 1px $colors$red8, 0px 0px 0px 1px $colors$red8",
        },
      },
      valid: {
        boxShadow: "inset 0 0 0 1px $colors$green7",
        "&:focus": {
-          boxShadow:
-            "inset 0px 0px 0px 1px $colors$green8, 0px 0px 0px 1px $colors$green8",
+          boxShadow: "inset 0px 0px 0px 1px $colors$green8, 0px 0px 0px 1px $colors$green8",
        },
      },
    },
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -27,6 +27,7 @@ import {
  DialogTrigger,
 } from "./Dialog";
 import PanelBox from "./PanelBox";
+import { templateFileIds } from '../state/constants';

 const Navigation = () => {
  const router = useRouter();
@@ -82,12 +83,8 @@ const Navigation = () => {
              <Spinner />
            ) : (
              <>
-                <Heading css={{ lineHeight: 1 }}>
-                  {snap.files?.[0]?.name || "XRPL Hooks"}
-                </Heading>
-                <Text
-                  css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}
-                >
+                <Heading css={{ lineHeight: 1 }}>{snap.files?.[0]?.name || "XRPL Hooks"}</Heading>
+                <Text css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}>
                  {snap.files.length > 0 ? "Gist: " : "Playground"}
                  <Text css={{ color: "$mauve12" }}>
                    {snap.files.length > 0 &&
@@ -99,10 +96,7 @@ const Navigation = () => {
          </Flex>
          {router.isReady && (
            <ButtonGroup css={{ marginLeft: "auto" }}>
-              <Dialog
-                open={snap.mainModalOpen}
-                onOpenChange={(open) => (state.mainModalOpen = open)}
-              >
+              <Dialog open={snap.mainModalOpen} onOpenChange={open => (state.mainModalOpen = open)}>
                <DialogTrigger asChild>
                  <Button outline>
                    <FolderOpen size="15px" />
@@ -163,12 +157,9 @@ const Navigation = () => {
                            mb: "$7",
                          }}
                        >
-                          Hooks add smart contract functionality to the XRP
-                          Ledger.
+                          Hooks add smart contract functionality to the XRP Ledger.
                        </Text>
-                        <Flex
-                          css={{ flexDirection: "column", gap: "$2", mt: "$2" }}
-                        >
+                        <Flex css={{ flexDirection: "column", gap: "$2", mt: "$2" }}>
                          <Text
                            css={{
                              display: "inline-flex",
@@ -253,43 +244,29 @@ const Navigation = () => {
                        },
                      }}
                    >
-                      <PanelBox
-                        as="a"
-                        href="/develop/be088224fb37c0075e84491da0e602c1"
-                      >
+                      <PanelBox as="a" href={`/develop/${templateFileIds.starter}`}>
                        <Heading>Starter</Heading>
-                        <Text>
-                          Just an empty starter with essential imports
-                        </Text>
+                        <Text>Just an empty starter with essential imports</Text>
                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href="/develop/be088224fb37c0075e84491da0e602c1"
-                      >
+                      <PanelBox as="a" href={`/develop/${templateFileIds.starter}`}>
                        <Heading>Firewall</Heading>
-                        <Text>
-                          This Hook essentially checks a blacklist of accounts
-                        </Text>
+                        <Text>This Hook essentially checks a blacklist of accounts</Text>
                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href="/develop/be088224fb37c0075e84491da0e602c1"
-                      >
+                      <PanelBox as="a" href={`/develop/${templateFileIds.accept}`}>
                        <Heading>Accept</Heading>
-                        <Text>
-                          This hook just accepts any transaction coming through
-                          it
-                        </Text>
+                        <Text>This hook just accepts any transaction coming through it</Text>
                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href="/develop/be088224fb37c0075e84491da0e602c1"
-                      >
-                        <Heading>Accept</Heading>
-                        <Text>
-                          This hook just accepts any transaction coming through
-                          it
-                        </Text>
+                      <PanelBox as="a" href={`/develop/${templateFileIds.notary}`}>
+                        <Heading>Notary</Heading>
+                        <Text>Collecting signatures for multi-sign transactions</Text>
+                      </PanelBox>
+                      <PanelBox as="a" href={`/develop/${templateFileIds.carbon}`}>
+                        <Heading>Carbon</Heading>
+                        <Text>Send a percentage of sum to an address</Text>
+                      </PanelBox>
+                      <PanelBox as="a" href={`/develop/${templateFileIds.peggy}`}>
+                        <Heading>Peggy</Heading>
+                        <Text>An oracle based stabe coin hook</Text>
                      </PanelBox>
                    </Flex>
                  </Flex>
@@ -336,42 +313,18 @@ const Navigation = () => {
            }}
          >
            <ButtonGroup>
-              <Link
-                href={gistId ? `/develop/${gistId}` : "/develop"}
-                passHref
-                shallow
-              >
-                <Button
-                  as="a"
-                  outline={!router.pathname.includes("/develop")}
-                  uppercase
-                >
+              <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
-                >
+              <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
-                >
+              <Link href={gistId ? `/test/${gistId}` : "/test"} passHref shallow>
+                <Button as="a" outline={!router.pathname.includes("/test")} uppercase>
                  Test
                </Button>
              </Link>
--- a/components/Select.tsx
+++ b/components/Select.tsx
@@ -0,0 +1,55 @@
+import { FC } from "react";
+import { mauve, mauveDark } 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 });
+
+const Select: FC<Props> = props => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const colors: any = {
+    // primary: pink.pink9,
+    primary: isDark ? mauveDark.mauve4 : mauve.mauve4,
+    secondary: isDark ? mauveDark.mauve8 : mauve.mauve8,
+    background: isDark ? "rgb(10, 10, 10)" : "rgb(245, 245, 245)",
+    searchText: isDark ? mauveDark.mauve12 : mauve.mauve12,
+    placeholder: isDark ? mauveDark.mauve11 : mauve.mauve11,
+  };
+  colors.outline = colors.background;
+  colors.selected = colors.secondary;
+  return (
+    <SelectInput
+      theme={theme => ({
+        ...theme,
+        spacing: {
+          ...theme.spacing,
+          controlHeight: 30
+        },
+        colors: {
+          primary: colors.selected,
+          primary25: colors.primary,
+          primary50: colors.primary,
+          primary75: colors.primary,
+          danger: colors.primary,
+          dangerLight: colors.primary,
+          neutral0: colors.background,
+          neutral5: colors.primary,
+          neutral10: colors.primary,
+          neutral20: colors.outline,
+          neutral30: colors.primary,
+          neutral40: colors.primary,
+          neutral50: colors.placeholder,
+          neutral60: colors.primary,
+          neutral70: colors.primary,
+          neutral80: colors.searchText,
+          neutral90: colors.primary,
+        },
+      })}
+      {...props}
+    />
+  );
+};
+
+export default styled(Select, {});
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import type { ReactNode, ReactElement } from "react";
+import { Button, Stack } from ".";
+
+interface TabProps {
+  header?: string;
+  children: ReactNode;
+}
+
+interface Props {
+  activeIndex?: number;
+  activeHeader?: string;
+  headless?: boolean;
+  children: ReactElement<TabProps>[];
+}
+
+export const Tab = (props: TabProps) => null;
+
+export const Tabs = ({ children, activeIndex, activeHeader, headless }: Props) => {
+  const [active, setActive] = useState(activeIndex || 0);
+  const tabProps: TabProps[] = children.map(elem => elem.props);
+
+  useEffect(() => {
+    if (activeIndex) setActive(activeIndex);
+  }, [activeIndex]);
+
+  useEffect(() => {
+    if (activeHeader) {
+      const idx = tabProps.findIndex(tab => tab.header === activeHeader);
+      setActive(idx);
+    }
+  }, [activeHeader, tabProps]);
+
+  return (
+    <>
+      {!headless && (
+        <Stack
+          css={{
+            gap: "$3",
+            flex: 1,
+            flexWrap: "nowrap",
+            marginBottom: "-1px",
+          }}
+        >
+          {tabProps.map((prop, idx) => (
+            <Button
+              key={prop.header}
+              role="tab"
+              tabIndex={idx}
+              onClick={() => setActive(idx)}
+              onKeyPress={() => setActive(idx)}
+              outline={active !== idx}
+              size="sm"
+              css={{
+                "&:hover": {
+                  span: {
+                    visibility: "visible",
+                  },
+                },
+              }}
+            >
+              {prop.header || idx}
+            </Button>
+          ))}
+        </Stack>
+      )}
+      {tabProps[active].children}
+    </>
+  );
+};
--- a/components/Text.tsx
+++ b/components/Text.tsx
@@ -4,6 +4,18 @@ const Text = styled("span", {
  fontFamily: "$body",
  lineHeight: "$body",
  color: "$text",
+  variants: {
+    small: {
+      true: {
+        fontSize: '$xs'
+      }
+    },
+    muted: {
+      true: {
+        color: '$mauve9'
+      }
+    }
+  }
 });

 export default Text;
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -0,0 +1,15 @@
+export { default as Flex } from './Flex'
+export { default as Container } from './Container'
+export { default as Heading } from './Heading'
+export { default as Stack } from './Stack'
+export { default as Text } from './Text'
+export { default as Input } from './Input'
+export { default as Select } from './Select'
+export * from './Tabs'
+export * from './AlertDialog'
+export { default as Box } from './Box'
+export { default as Button } from './Button'
+export { default as ButtonGroup } from './ButtonGroup'
+export { default as DeployFooter } from './DeployFooter'
+export * from './Dialog'
+export * from './DropdownMenu'
--- a/package.json
+++ b/package.json
@@ -20,10 +20,10 @@
    "@radix-ui/react-dropdown-menu": "^0.1.1",
    "@radix-ui/react-id": "^0.1.1",
    "@stitches/react": "^1.2.6-0",
-    "file-saver": "^2.0.5",
-    "jszip": "^3.7.1",
    "base64-js": "^1.5.1",
    "dinero.js": "^1.9.1",
+    "file-saver": "^2.0.5",
+    "jszip": "^3.7.1",
    "monaco-editor": "^0.30.1",
    "next": "^12.0.4",
    "next-auth": "^4.0.0-beta.5",
@@ -40,6 +40,7 @@
    "react-hot-keys": "^2.7.1",
    "react-hot-toast": "^2.1.1",
    "react-new-window": "^0.2.1",
+    "react-select": "^5.2.1",
    "react-stay-scrolled": "^7.4.0",
    "reconnecting-websocket": "^4.4.0",
    "valtio": "^1.2.5",
@@ -50,8 +51,8 @@
    "xrpl-client": "^1.9.3"
  },
  "devDependencies": {
-    "@types/file-saver": "^2.0.4",
    "@types/dinero.js": "^1.9.0",
+    "@types/file-saver": "^2.0.4",
    "@types/pako": "^1.0.2",
    "@types/react": "17.0.31",
    "eslint": "7.32.0",
--- a/pages/deploy/[[...slug]].tsx
+++ b/pages/deploy/[[...slug]].tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import dynamic from "next/dynamic";
-import Flex from "../../components/Flex";
+import { Flex, Box } from "../../components";
 import { useSnapshot } from "valtio";
 import state from "../../state";

@@ -20,16 +20,20 @@ const Deploy = () => {
  const snap = useSnapshot(state);
  return (
    <>
-      <main style={{ display: "flex", flex: 1 }}>
+      <main style={{ display: "flex", flex: 1, height: 'calc(100vh - 30vh - 60px)' }}>
        <DeployEditor />
      </main>
-      <Flex css={{ flexDirection: "row", width: "100%" }}>
-        <Accounts />
-        <LogBox
-          title="Deploy Log"
-          logs={snap.deployLogs}
-          clearLog={() => (state.deployLogs = [])}
-        />
+      <Flex css={{ flexDirection: "row", width: "100%", minHeight: '225px', height: '30vh' }}>
+        <Box css={{ width: "100%" }}>
+          <Accounts />
+        </Box>
+        <Box css={{ width: "100%" }}>
+          <LogBox
+            title="Deploy Log"
+            logs={snap.deployLogs}
+            clearLog={() => (state.deployLogs = [])}
+          />
+        </Box>
      </Flex>
    </>
  );
--- a/pages/test/[[...slug]].tsx
+++ b/pages/test/[[...slug]].tsx
@@ -1,7 +1,115 @@
-import Container from "../../components/Container";
+import { Container, Flex, Box, Tabs, Tab, Input, Select, Text, Button } from "../../components";
+import { Play } from "phosphor-react";
+import dynamic from "next/dynamic";
+
+const LogBox = dynamic(() => import("../../components/LogBox"), {
+  ssr: false,
+});
+const Accounts = dynamic(() => import("../../components/Accounts"), {
+  ssr: false,
+});
+
+const Transaction = () => {
+  const options = [
+    { value: "chocolate", label: "Chocolate" },
+    { value: "strawberry", label: "Strawberry" },
+    { value: "vanilla", label: "Vanilla" },
+    {
+      value: "long",
+      label: "lorem woy uiwyf wyfw8 fwfw98f w98fy wf8fw89f 9w8fy w9fyw9f wf7tdw9f ",
+    },
+  ];
+  return (
+    <>
+      <Container css={{ p: "$3 0", fontSize: "$sm" }}>
+        <Flex column fluid>
+          <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
+            <Text muted css={{ mr: "$3" }}>
+              Transaction type:{" "}
+            </Text>
+            <Select
+              instanceId="transaction"
+              placeholder="Select transaction type"
+              css={{ width: "70%" }}
+              options={options}
+            />
+          </Flex>
+          <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
+            <Text muted css={{ mr: "$3" }}>
+              From account:{" "}
+            </Text>
+            <Select
+              instanceId="from-account"
+              placeholder="Select account from which to send from"
+              css={{ width: "70%" }}
+              options={options}
+            />
+          </Flex>
+          <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
+            <Text muted css={{ mr: "$3" }}>
+              Amount (XRP):{" "}
+            </Text>
+            <Input defaultValue="0" variant="deep" css={{ width: "70%", flex: "inherit", height: "$9" }} />
+          </Flex>
+          <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
+            <Text muted css={{ mr: "$3" }}>
+              To account:{" "}
+            </Text>
+            <Select
+              instanceId="to-account"
+              placeholder="Select account from which to send from"
+              css={{ width: "70%" }}
+              options={options}
+            />
+          </Flex>
+        </Flex>
+      </Container>
+      <Flex row css={{ justifyContent: "space-between" }}>
+        <Button outline>VIEW AS JSON</Button>
+        <Flex row>
+          <Button outline css={{ mr: "$3" }}>
+            RESET
+          </Button>
+          <Button variant="primary">
+            <Play weight="bold" size="16px" />
+            RUN TEST
+          </Button>
+        </Flex>
+      </Flex>
+    </>
+  );
+};

 const Test = () => {
-  return <Container css={{ py: "$10" }}>This will be the test page</Container>;
+  return (
+    <Container css={{ py: "$3", px: 0 }}>
+      <Flex row fluid css={{ justifyContent: 'center', mb: "$2", height: '40vh', minHeight: '300px', p: '$3 $2' }}>
+        <Box css={{ width: "55%", px: "$2" }}>
+          <Tabs>
+            {/* TODO Dynamic tabs */}
+            <Tab header="test1.json">
+              <Transaction />
+            </Tab>
+            <Tab header="test2.json">
+              <Transaction />
+            </Tab>
+          </Tabs>
+        </Box>
+        <Box css={{ width: "45%", mx: "$2", height: '100%' }}>
+          <Accounts card hideDeployBtn showHookStats />
+        </Box>
+      </Flex>
+
+      <Flex row fluid css={{ borderBottom: "1px solid $mauve8" }}>
+        <Box css={{ width: "50%", borderRight: "1px solid $mauve8" }}>
+          <LogBox title="From Log" logs={[]} clearLog={() => {}} />
+        </Box>
+        <Box css={{ width: "50%" }}>
+          <LogBox title="To Log" logs={[]} clearLog={() => {}} />
+        </Box>
+      </Flex>
+    </Container>
+  );
 };

 export default Test;
--- a/patches/ripple-binary-codec+1.2.0.patch
+++ b/patches/ripple-binary-codec+1.2.0.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/ripple-binary-codec/dist/enums/definitions.json b/node_modules/ripple-binary-codec/dist/enums/definitions.json
-index 2333c42..99557cb 100644
+index 2333c42..b8f8eab 100644
 --- a/node_modules/ripple-binary-codec/dist/enums/definitions.json
 +++ b/node_modules/ripple-binary-codec/dist/enums/definitions.json
@@ -1,3 +1,4 @@
@@ -7,17 +7,18 @@ index 2333c42..99557cb 100644
 {
   "TYPES": {
     "Validation": 10003,
-@@ -40,8 +41,7 @@
+@@ -40,9 +41,7 @@
     "Check": 67,
     "Nickname": 110,
     "Contract": 99,
 -    "NFTokenPage": 80,
 -    "NFTokenOffer": 55,
-+    "GeneratorMap": 103,
-     "NegativeUNL": 78
+-    "NegativeUNL": 78
+    "GeneratorMap": 103
   },
   "FIELDS": [
-@@ -95,16 +95,6 @@
+     [
+@@ -95,16 +94,6 @@
         "type": "UInt16"
       }
     ],
@@ -34,7 +35,7 @@ index 2333c42..99557cb 100644
     [
       "Flags",
       {
-@@ -455,6 +445,16 @@
+@@ -455,6 +444,16 @@
         "type": "UInt32"
       }
     ],
@@ -51,7 +52,7 @@ index 2333c42..99557cb 100644
     [
       "IndexNext",
       {
-@@ -635,16 +635,6 @@
+@@ -635,16 +634,6 @@
         "type": "Hash256"
       }
     ],
@@ -68,7 +69,7 @@ index 2333c42..99557cb 100644
     [
       "BookDirectory",
       {
-@@ -916,7 +906,7 @@
+@@ -916,7 +905,7 @@
       }
     ],
     [
@@ -77,7 +78,44 @@ index 2333c42..99557cb 100644
       {
         "nth": 5,
         "isVLEncoded": true,
-@@ -1156,7 +1146,7 @@
+@@ -1045,36 +1034,6 @@
+         "type": "Blob"
+       }
+     ],
+-    [
+-      "UNLModifyValidator",
+-      {
+-        "nth": 19,
+-        "isVLEncoded": true,
+-        "isSerialized": true,
+-        "isSigningField": true,
+-        "type": "Blob"
+-      }
+-    ],
+-    [
+-      "ValidatorToDisable",
+-      {
+-        "nth": 20,
+-        "isVLEncoded": true,
+-        "isSerialized": true,
+-        "isSigningField": true,
+-        "type": "Blob"
+-      }
+-    ],
+-    [
+-      "ValidatorToReEnable",
+-      {
+-        "nth": 21,
+-        "isVLEncoded": true,
+-        "isSerialized": true,
+-        "isSigningField": true,
+-        "type": "Blob"
+-      }
+-    ],
+     [
+       "Account",
+       {
+@@ -1156,7 +1115,7 @@
       }
     ],
     [
@@ -86,7 +124,7 @@ index 2333c42..99557cb 100644
       {
         "nth": 9,
         "isVLEncoded": true,
-@@ -1276,9 +1266,9 @@
+@@ -1276,9 +1235,9 @@
       }
     ],
     [
@@ -98,7 +136,7 @@ index 2333c42..99557cb 100644
         "isVLEncoded": false,
         "isSerialized": true,
         "isSigningField": true,
-@@ -1286,9 +1276,9 @@
+@@ -1286,9 +1245,9 @@
       }
     ],
     [
@@ -110,7 +148,7 @@ index 2333c42..99557cb 100644
         "isVLEncoded": false,
         "isSerialized": true,
         "isSigningField": true,
-@@ -1296,9 +1286,9 @@
+@@ -1296,9 +1255,9 @@
       }
     ],
     [
@@ -122,7 +160,7 @@ index 2333c42..99557cb 100644
         "isVLEncoded": false,
         "isSerialized": true,
         "isSigningField": true,
-@@ -1306,9 +1296,9 @@
+@@ -1306,9 +1265,9 @@
       }
     ],
     [
@@ -134,7 +172,7 @@ index 2333c42..99557cb 100644
         "isVLEncoded": false,
         "isSerialized": true,
         "isSigningField": true,
-@@ -1395,16 +1385,6 @@
+@@ -1395,16 +1354,6 @@
         "type": "STArray"
       }
     ],
@@ -151,7 +189,24 @@ index 2333c42..99557cb 100644
     [
       "Majorities",
       {
-@@ -1535,16 +1515,6 @@
+@@ -1415,16 +1364,6 @@
+         "type": "STArray"
+       }
+     ],
+-    [
+-      "DisabledValidators",
+-      {
+-        "nth": 17,
+-        "isVLEncoded": false,
+-        "isSerialized": true,
+-        "isSigningField": true,
+-        "type": "STArray"
+-      }
+-    ],
+     [
+       "CloseResolution",
+       {
+@@ -1535,16 +1474,6 @@
         "type": "Vector256"
       }
     ],
@@ -168,129 +223,96 @@ index 2333c42..99557cb 100644
     [
       "Transaction",
       {
-@@ -1616,9 +1586,9 @@
+@@ -1596,7 +1525,7 @@
+       }
+     ],
+     [
+-      "TicketCount",
+      "HookStateCount",
+       {
+         "nth": 40,
+         "isVLEncoded": false,
+@@ -1606,7 +1535,7 @@
+       }
+     ],
+     [
+-      "TicketSequence",
+      "HookReserveCount",
+       {
+         "nth": 41,
+         "isVLEncoded": false,
+@@ -1616,7 +1545,7 @@
       }
     ],
     [
 -      "TokenTaxon",
-+      "HookStateCount",
+      "HookDataMaxSize",
       {
-        "nth": 42,
-+        "nth": 40,
+         "nth": 42,
         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1626,9 +1596,9 @@
+@@ -1626,23 +1555,23 @@
       }
     ],
     [
 -      "MintedTokens",
-+      "HookReserveCount",
-       {
-        "nth": 43,
-+        "nth": 41,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1636,9 +1606,9 @@
-       }
-     ],
-     [
-      "BurnedTokens",
-+      "HookDataMaxSize",
-       {
-        "nth": 44,
-+        "nth": 42,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1646,29 +1616,29 @@
-       }
-     ],
-     [
-      "Channel",
 +      "HookOn",
       {
-        "nth": 22,
+-        "nth": 43,
 +        "nth": 16,
         "isVLEncoded": false,
         "isSerialized": true,
         "isSigningField": true,
-        "type": "Hash256"
+-        "type": "UInt32"
 +        "type": "UInt64"
       }
     ],
     [
-      "ConsensusHash",
+-      "BurnedTokens",
 +      "EmitBurden",
       {
-        "nth": 23,
+-        "nth": 44,
 +        "nth": 12,
         "isVLEncoded": false,
         "isSerialized": true,
         "isSigningField": true,
-        "type": "Hash256"
+-        "type": "UInt32"
 +        "type": "UInt64"
       }
     ],
     [
-      "CheckID",
-+      "Channel",
-       {
-        "nth": 24,
-+        "nth": 22,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1676,9 +1646,9 @@
-       }
-     ],
-     [
-      "ValidatedHash",
-+      "ConsensusHash",
-       {
-        "nth": 25,
-+        "nth": 23,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1686,9 +1656,9 @@
+@@ -1686,29 +1615,9 @@
       }
     ],
     [
 -      "PreviousPageMin",
-+      "CheckID",
-       {
-        "nth": 26,
-+        "nth": 24,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1696,9 +1666,9 @@
-       }
-     ],
-     [
-      "NextPageMin",
-+      "ValidatedHash",
-       {
-        "nth": 27,
-+        "nth": 25,
-         "isVLEncoded": false,
-         "isSerialized": true,
-         "isSigningField": true,
-@@ -1706,9 +1676,9 @@
-       }
-     ],
-     [
-      "BuyOffer",
 +      "EmitParentTxnID",
       {
+-        "nth": 26,
+-        "isVLEncoded": false,
+-        "isSerialized": true,
+-        "isSigningField": true,
+-        "type": "Hash256"
+-      }
+-    ],
+-    [
+-      "NextPageMin",
+-      {
+-        "nth": 27,
+-        "isVLEncoded": false,
+-        "isSerialized": true,
+-        "isSigningField": true,
+-        "type": "Hash256"
+-      }
+-    ],
+-    [
+-      "BuyOffer",
+-      {
 -        "nth": 28,
 +        "nth": 10,
         "isVLEncoded": false,
         "isSerialized": true,
         "isSigningField": true,
-@@ -1716,9 +1686,9 @@
+@@ -1716,9 +1625,9 @@
       }
     ],
     [
@@ -302,7 +324,24 @@ index 2333c42..99557cb 100644
         "isVLEncoded": false,
         "isSerialized": true,
         "isSigningField": true,
-@@ -1754,36 +1724,6 @@
+@@ -1735,16 +1644,6 @@
+         "type": "UInt8"
+       }
+     ],
+-    [
+-      "UNLModifyDisabling",
+-      {
+-        "nth": 17,
+-        "isVLEncoded": false,
+-        "isSerialized": true,
+-        "isSigningField": true,
+-        "type": "UInt8"
+-      }
+-    ],
+     [
+       "DestinationNode",
+       {
+@@ -1754,36 +1653,6 @@
         "isSigningField": true,
         "type": "UInt64"
       }
@@ -339,7 +378,7 @@ index 2333c42..99557cb 100644
     ]
   ],
   "TRANSACTION_RESULTS": {
-@@ -1908,18 +1848,7 @@
+@@ -1908,18 +1777,7 @@
     "tecDUPLICATE": 149,
     "tecKILLED": 150,
     "tecHAS_OBLIGATIONS": 151,
@@ -359,7 +398,7 @@ index 2333c42..99557cb 100644
   },
   "TRANSACTION_TYPES": {
     "Invalid": -1,
-@@ -1946,11 +1875,10 @@
+@@ -1946,13 +1804,11 @@
     "DepositPreauth": 19,
     "TrustSet": 20,
     "AccountDelete": 21,
@@ -373,5 +412,8 @@ index 2333c42..99557cb 100644
 +    "Batch": 24,
 +
     "EnableAmendment": 100,
-     "SetFee": 101,
-     "UNLModify": 102
+-    "SetFee": 101,
+-    "UNLModify": 102
+    "SetFee": 101
+   }
+ }
--- a/state/actions/addFaucetAccount.ts
+++ b/state/actions/addFaucetAccount.ts
@@ -1,4 +1,4 @@
-import Router from "next/router";
+
 import toast from "react-hot-toast";
 import state, { FaucetAccountRes } from '../index';

@@ -36,7 +36,6 @@ export const addFaucetAccount = async (showToast: boolean = false) => {


    const toastId = showToast ? toast.loading("Creating account") : "";
-    console.log(Router)
    const res = await fetch(`${window.location.origin}/api/faucet`, {
      method: "POST",
    });
--- a/state/actions/fetchFiles.ts
+++ b/state/actions/fetchFiles.ts
@@ -1,6 +1,8 @@
 import { Octokit } from "@octokit/core";
 import Router from "next/router";
 import state from '../index';
+import { templateFileIds } from '../constants';
+

 const octokit = new Octokit();

@@ -17,6 +19,17 @@ export const fetchFiles = (gistId: string) => {

    octokit
      .request("GET /gists/{gist_id}", { gist_id: gistId })
+      .then(res => {
+        if (!Object.values(templateFileIds).includes(gistId)) {
+          return res
+        }
+        // in case of templates, fetch header file(s) and append to res
+        return octokit.request("GET /gists/{gist_id}", { gist_id: templateFileIds.headers }).then(({ data: { files: headerFiles } }) => {
+          const files = { ...res.data.files, ...headerFiles }
+          res.data.files = files
+          return res
+        })
+      })
      .then((res) => {
        if (res.data.files && Object.keys(res.data.files).length > 0) {
          const files = Object.keys(res.data.files).map((filename) => ({
@@ -44,6 +57,7 @@ export const fetchFiles = (gistId: string) => {
        state.loading = false;
      })
      .catch((err) => {
+        // console.error(err)
        state.loading = false;
        state.logs.push({
          type: "error",
--- a/state/constants/index.ts
+++ b/state/constants/index.ts
@@ -0,0 +1 @@
+export * from './templates'
--- a/state/constants/templates.ts
+++ b/state/constants/templates.ts
@@ -0,0 +1,11 @@
+export const templateFileIds = {
+    'starter': '1d14e51e2e02dc0a508cb0733767a914', // TODO currently same as accept
+    'accept': '1d14e51e2e02dc0a508cb0733767a914',
+    'firewall': 'bcd6d0c0fcbe52545ddb802481ff9d26',
+    'notary': 'a789c75f591eeab7932fd702ed8cf9ea',
+    'carbon': '43925143fa19735d8c6505c34d3a6a47',
+    'peggy': 'ceaf352e2a65741341033ab7ef05c448',
+    'headers': '9b448e8a55fab11ef5d1274cb59f9cf3'
+}
+
+export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'hookmacro.h']
--- a/state/index.ts
+++ b/state/index.ts
@@ -62,7 +62,9 @@ export interface IState {
 // 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,
--- a/stitches.config.ts
+++ b/stitches.config.ts
@@ -50,7 +50,8 @@ export const {
      text: "$gray12",
      primary: "$plum",
      white: "white",
-      black: "black"
+      black: "black",
+      'deep': 'rgb(248, 248, 248)'
    },
    fonts: {
      body: 'Work Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
@@ -303,6 +304,7 @@ export const darkTheme = createTheme('dark', {
    ...pinkDark,
    ...yellowDark,
    ...purpleDark,
+    deep: 'rgb(10, 10, 10)'
  },
 });

--- a/yarn.lock
+++ b/yarn.lock
@@ -50,6 +50,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.12.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
+  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/types@7.15.0":
  version "7.15.0"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
@@ -76,6 +83,71 @@
    vscode-languageserver-textdocument "^1.0.1"
    vscode-uri "^3.0.2"

+"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1":
+  version "11.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
+  integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "4.0.13"
+
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/memoize@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.1.1":
+  version "11.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07"
+  integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/cache" "^11.7.1"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
+  integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
+
+"@emotion/unitless@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@eslint/eslintrc@^0.4.3":
  version "0.4.3"
  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -861,6 +933,22 @@
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==

+"@types/react-transition-group@^4.4.0":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "17.0.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
+  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/react@17.0.31":
  version "17.0.31"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.31.tgz#fe05ebf91ff3ae35bb6b13f6c1b461db8089dff8"
@@ -1739,6 +1827,14 @@ doctrine@^3.0.0:
  dependencies:
    esutils "^2.0.2"

+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 domain-browser@4.19.0:
  version "4.19.0"
  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-4.19.0.tgz#1093e17c0a17dbd521182fe90d49ac1370054af1"
@@ -2431,6 +2527,13 @@ hmac-drbg@^1.0.1:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

+hoist-non-react-statics@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hotkeys-js@^3.8.1:
  version "3.8.7"
  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.7.tgz#c16cab978b53d7242f860ca3932e976b92399981"
@@ -2990,6 +3093,11 @@ md5.js@^1.3.4:
    inherits "^2.0.1"
    safe-buffer "^5.1.2"

+memoize-one@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memoize-one@^6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
@@ -3580,6 +3688,15 @@ progress@^2.0.0:
  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==

+prop-types@^15.6.0, prop-types@^15.6.2:
+  version "15.8.0"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.0.tgz#d237e624c45a9846e469f5f31117f970017ff588"
+  integrity sha512-fDGekdaHh65eI3lMi5OnErU6a8Ighg2KjcjQxO7m8VHyWjcPyj5kiOgV1LQDOOOgVy3+5FgjXvdSSX7B8/5/4g==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -3689,7 +3806,7 @@ react-is@17.0.2:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

-react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -3725,6 +3842,19 @@ react-remove-scroll@^2.4.0:
    use-callback-ref "^1.2.3"
    use-sidecar "^1.0.1"

+react-select@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.2.1.tgz#416c25c6b79b94687702374e019c4f2ed9d159d6"
+  integrity sha512-OOyNzfKrhOcw/BlembyGWgdlJ2ObZRaqmQppPFut1RptJO423j+Y+JIsmxkvsZ4D/3CpOmwIlCvWbbAWEdh12A==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.1.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+
 react-stay-scrolled@^7.4.0:
  version "7.4.0"
  resolved "https://registry.yarnpkg.com/react-stay-scrolled/-/react-stay-scrolled-7.4.0.tgz#cb109b8dfd7834e5406d9c9322035ab40c398368"
@@ -3742,6 +3872,16 @@ react-style-singleton@^2.1.0:
    invariant "^2.2.4"
    tslib "^1.0.0"

+react-transition-group@^4.3.0:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -4265,6 +4405,11 @@ stylis@3.5.4:
  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==

+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 supports-color@^5.3.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
Author	SHA1	Message	Date
muzam	b5b918d877	minor changes	2022-01-31 18:55:15 +05:30
muzam	b28bcfdd0a	Merge branch 'main' into test-page	2022-01-05 16:32:30 +05:30
muzam	7f06876e3e	Test page UI layout	2022-01-05 16:32:07 +05:30
muzamil	fd479d8671	Merge pull request #41 from eqlabs/feat/templates Fetch templates and header files according to selection.	2022-01-04 15:32:10 +05:30
Valtteri Karesto	938b567256	Merge pull request #46 from eqlabs/feat/patch-ripple-binary-codec Feat/patch ripple binary codec	2021-12-23 09:08:38 +02:00
Valtteri Karesto	779f5aab0a	Fixed typos	2021-12-22 16:14:35 +02:00
Valtteri Karesto	02194d8a98	Remove logs	2021-12-22 16:08:02 +02:00
Valtteri Karesto	5677fe34dc	Add comments to state	2021-12-22 16:07:45 +02:00
Valtteri Karesto	895da89325	Add new version of ripple-binary-codec patch	2021-12-22 16:07:21 +02:00
Valtteri Karesto	b138cc8d5b	Update readme	2021-12-22 16:06:52 +02:00
muzam	027b2c8ed4	remove console log	2021-12-21 17:07:45 +05:30
Valtteri Karesto	d85cc71817	Merge pull request #43 from eqlabs/feat/temporary-fix-for-editor Roll back file paths for now	2021-12-21 11:18:58 +02:00
Valtteri Karesto	bac3522078	Roll back file paths for now	2021-12-21 11:07:52 +02:00
Vaclav Barta	b2c6aa7871	Merge pull request #42 from eqlabs/feature/workspace-location fix for issue #39	2021-12-20 13:38:46 +01:00
muzam	b4ca360661	Implement read-only editors for some headers.	2021-12-16 22:30:03 +05:30
muzam	ad947be0bc	Only fetch extra headers on template files.	2021-12-16 18:52:16 +05:30
muzam	f739d4da34	Fetch templates and header files according to selection.	2021-12-16 18:26:58 +05:30