Merge branch 'main' into feat/transaction-persistence

Fix/regression #171

.env.example

@@ -2,6 +2,7 @@ NEXTAUTH_URL=https://example.com
 GITHUB_SECRET=""
 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"

components/Accounts.tsx

@@ -18,7 +18,7 @@ import {
   DialogTrigger,
 } from "./Dialog";
 import { css } from "../stitches.config";
-import { Input } from "./Input";
+import { Input, Label } from "./Input";
 import truncate from "../utils/truncate";
 
 const labelStyle = css({
@@ -249,6 +249,7 @@ export const AccountDialog = ({
                   <Button
                     size="xs"
                     outline
+                    disabled={activeAccount.isLoading}
                     css={{ mt: "$3", mr: "$1", ml: "auto" }}
                     onClick={() => {
                       deleteHook(activeAccount);
@@ -490,7 +491,7 @@ const ImportAccountDialog = () => {
       <DialogContent>
         <DialogTitle>Import account</DialogTitle>
         <DialogDescription>
-          <label>Add account secret</label>
+          <Label>Add account secret</Label>
           <Input
             name="secret"
             type="password"

components/Button.tsx

@@ -171,6 +171,16 @@ export const StyledButton = styled("button", {
         color: "$textMuted",
       },
     },
+    isDisabled: {
+      true: {
+        opacity: 0.6,
+        // pointerEvents: "none",
+        cursor: "auto",
+        "&:hover": {
+          boxShadow: "inherit",
+        },
+      },
+    },
     outline: {
       true: {
         backgroundColor: "transparent",

components/DebugStream.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from "react";
 import { proxy, ref, useSnapshot } from "valtio";
 import { Select } from ".";
-import state, { ILog } from "../state";
+import state, { ILog, transactionsState } from "../state";
 import { extractJSON } from "../utils/json";
 import LogBox from "./LogBox";
 
@@ -10,7 +10,7 @@ interface ISelect<T = string> {
   value: T;
 }
 
-const streamState = proxy({
+export const streamState = proxy({
   selectedAccount: null as ISelect | null,
   logs: [] as ILog[],
   socket: undefined as WebSocket | undefined,
@@ -18,9 +18,10 @@ const streamState = proxy({
 
 const DebugStream = () => {
   const { selectedAccount, logs, socket } = useSnapshot(streamState);
+  const { activeHeader: activeTxTab } = useSnapshot(transactionsState);
   const { accounts } = useSnapshot(state);
 
-  const accountOptions = accounts.map((acc) => ({
+  const accountOptions = accounts.map(acc => ({
     label: acc.name,
     value: acc.address,
   }));
@@ -33,7 +34,7 @@ const DebugStream = () => {
         options={accountOptions}
         hideSelectedOptions
         value={selectedAccount}
-        onChange={(acc) => (streamState.selectedAccount = acc as any)}
+        onChange={acc => (streamState.selectedAccount = acc as any)}
         css={{ width: "100%" }}
       />
     </>
@@ -133,6 +134,16 @@ const DebugStream = () => {
       socket.removeEventListener("error", onError);
     };
   }, [prepareLog, 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]);
+
   return (
     <LogBox
       enhanced

components/EditorNavigation.tsx

@@ -25,6 +25,7 @@ import {
 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,
@@ -46,9 +47,9 @@ import {
 } from "./Dialog";
 import Flex from "./Flex";
 import Stack from "./Stack";
-import Input from "./Input";
+import { Input, Label } from "./Input";
 import Text from "./Text";
-import toast from "react-hot-toast";
+import Tooltip from "./Tooltip";
 import {
   AlertDialog,
   AlertDialogContent,
@@ -221,7 +222,7 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                 <DialogContent>
                   <DialogTitle>Create new file</DialogTitle>
                   <DialogDescription>
-                    <label>Filename</label>
+                    <Label>Filename</Label>
                     <Input
                       value={filename}
                       onChange={(e) => setFilename(e.target.value)}
@@ -367,44 +368,65 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
               },
             }}
           >
-            <Button
-              isLoading={snap.zipLoading}
-              onClick={downloadAsZip}
-              outline
-              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"
+              }
             >
-              <DownloadSimple size="16px" />
-            </Button>
-            <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>
-            <Button
-              outline
-              size="sm"
-              disabled={!session || !session.user}
-              isLoading={snap.gistLoading}
-              css={{ alignItems: "center" }}
-              onClick={() => {
-                if (snap.gistOwner === session?.user.username) {
-                  syncToGist(session);
-                } else {
-                  setCreateNewAlertOpen(true);
-                }
-              }}
-            >
-              <CloudArrowUp size="16px" />
-            </Button>
+              <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 {
+                    setCreateNewAlertOpen(true);
+                  }
+                }}
+              >
+                {snap.gistOwner === session?.user.username ? (
+                  <CloudArrowUp size="16px" />
+                ) : (
+                  <FilePlus size="16px" />
+                )}
+              </Button>
+            </Tooltip>
 
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -502,7 +524,7 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
         <DialogContent>
           <DialogTitle>Editor settings</DialogTitle>
           <DialogDescription>
-            <label>Tab size</label>
+            <Label>Tab size</Label>
             <Input
               type="number"
               min="1"

components/HooksEditor.tsx

@@ -226,6 +226,22 @@ const HooksEditor = () => {
               }
             });
 
+            // 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"}

components/Input.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { styled } from "../stitches.config";
+import * as LabelPrim from '@radix-ui/react-label';
 
 export const Input = styled("input", {
   // Reset
@@ -59,6 +60,8 @@ export const Input = styled("input", {
   },
   "&:read-only": {
     backgroundColor: "$mauve2",
+    color: "$text",
+    opacity: 0.8,
     "&:focus": {
       boxShadow: "inset 0px 0px 0px 1px $colors$mauve7",
     },
@@ -156,3 +159,11 @@ const ReffedInput = React.forwardRef<
 >((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/Navigation.tsx

@@ -228,7 +228,7 @@ const Navigation = () => {
                             as="a"
                             rel="noreferrer noopener"
                             target="_blank"
-                            href="https://xrpl-hooks.readme.io/docs"
+                            href="https://xrpl-hooks.readme.io/v2.0/docs"
                           >
                             <ArrowUpRight size="15px" /> Hooks documentation
                           </Text>
@@ -400,7 +400,7 @@ const Navigation = () => {
                 </Button>
               </Link>
             </ButtonGroup>
-            <Link href="https://xrpl-hooks.readme.io/" passHref>
+            <Link href="https://xrpl-hooks.readme.io/v2.0" passHref>
               <a target="_blank" rel="noreferrer noopener">
                 <Button outline>
                   <BookOpen size="15px" />

components/Select.tsx

@@ -52,6 +52,7 @@ const Select = forwardRef<any, Props>((props, ref) => {
         control: (provided, state) => {
           return {
             ...provided,
+            minHeight: 0,
             border: "0px",
             backgroundColor: colors.mauve4,
             boxShadow: `0 0 0 1px ${
@@ -118,32 +119,6 @@ const Select = forwardRef<any, Props>((props, ref) => {
           };
         },
       }}
-      // theme={(theme) => ({
-      //   ...theme,
-      //   spacing: {
-      //     ...theme.spacing,
-      //     controlHeight: 30,
-      //   },
-      //   colors: {
-      //     primary: colors.selected,
-      //     primary25: colors.active,
-      //     primary50: colors.primary,
-      //     primary75: colors.primary,
-      //     danger: colors.primary,
-      //     dangerLight: colors.primary,
-      //     neutral0: colors.background,
-      //     neutral5: colors.primary,
-      //     neutral10: colors.primary,
-      //     neutral20: colors.outline,
-      //     neutral30: colors.primary,
-      //     neutral40: colors.primary,
-      //     neutral50: colors.placeholder,
-      //     neutral60: colors.primary,
-      //     neutral70: colors.primary,
-      //     neutral80: colors.searchText,
-      //     neutral90: colors.primary,
-      //   },
-      // })}
       {...props}
     />
   );

components/SetHookDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Plus, Trash, X } from "phosphor-react";
 import Button from "./Button";
 import Box from "./Box";
@@ -11,7 +11,7 @@ import {
   DialogClose,
   DialogTrigger,
 } from "./Dialog";
-import { Input } from "./Input";
+import { Input, Label } from "./Input";
 import {
   Controller,
   SubmitHandler,
@@ -25,6 +25,7 @@ import type { IAccount } from "../state";
 import { useSnapshot } from "valtio";
 import state from "../state";
 import toast from "react-hot-toast";
+import { sha256 } from "../state/actions/deployHook";
 
 const transactionOptions = Object.keys(tts).map((key) => ({
   label: key,
@@ -36,6 +37,7 @@ export type SetHookData = {
     value: keyof TTS;
     label: string;
   }[];
+  HookNamespace: string;
   HookParameters: {
     HookParameter: {
       HookParameterName: string;
@@ -57,8 +59,13 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
     register,
     handleSubmit,
     control,
-    // formState: { errors },
-  } = useForm<SetHookData>();
+    watch,
+    formState: { errors },
+  } = useForm<SetHookData>({
+    defaultValues: {
+      HookNamespace: snap.files?.[snap.active]?.name?.split(".")?.[0] || "",
+    },
+  });
   const { fields, append, remove } = useFieldArray({
     control,
     name: "HookParameters", // unique name for your Field Array
@@ -71,6 +78,19 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
   //   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]);
+
   if (!account) {
     return null;
   }
@@ -89,6 +109,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
     }
     toast.error(`Transaction failed! (${res?.engine_result_message})`);
   };
+
   return (
     <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
       <DialogTrigger asChild>
@@ -111,7 +132,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
           <DialogDescription as="div">
             <Stack css={{ width: "100%", flex: 1 }}>
               <Box css={{ width: "100%" }}>
-                <label>Invoke on transactions</label>
+                <Label>Invoke on transactions</Label>
                 <Controller
                   name="Invoke"
                   control={control}
@@ -130,9 +151,28 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                 />
               </Box>
               <Box css={{ width: "100%" }}>
-                <label style={{ marginBottom: "10px", display: "block" }}>
+                <Label>Hook Namespace Seed</Label>
+                <Input
+                  {...register("HookNamespace", { required: true })}
+                  autoComplete={"off"}
+                  defaultValue={
+                    snap.files?.[snap.active]?.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>
+                </Label>
                 <Stack>
                   {fields.map((field, index) => (
                     <Stack key={field.id}>

components/Tabs.tsx

@@ -6,7 +6,7 @@ import React, {
   useCallback,
 } from "react";
 import type { ReactNode, ReactElement } from "react";
-import { Box, Button, Flex, Input, Stack, Text } from ".";
+import { Box, Button, Flex, Input, Label, Stack, Text } from ".";
 import {
   Dialog,
   DialogTrigger,
@@ -29,7 +29,7 @@ interface TabProps {
   children: ReactNode;
 }
 
-// TODO customise strings shown
+// TODO customise messages shown
 interface Props {
   activeIndex?: number;
   activeHeader?: string;
@@ -40,6 +40,7 @@ interface Props {
   forceDefaultExtension?: boolean;
   onCreateNewTab?: (name: string) => any;
   onCloseTab?: (index: number, header?: string) => any;
+  onChangeActive?: (index: number, header?: string) => any;
 }
 
 export const Tab = (props: TabProps) => null;
@@ -52,11 +53,12 @@ export const Tabs = ({
   keepAllAlive = false,
   onCreateNewTab,
   onCloseTab,
+  onChangeActive,
   defaultExtension = "",
   forceDefaultExtension,
 }: Props) => {
   const [active, setActive] = useState(activeIndex || 0);
-  const tabs: TabProps[] = children.map((elem) => elem.props);
+  const tabs: TabProps[] = children.map(elem => elem.props);
 
   const [isNewtabDialogOpen, setIsNewtabDialogOpen] = useState(false);
   const [tabname, setTabname] = useState("");
@@ -68,8 +70,9 @@ export const Tabs = ({
 
   useEffect(() => {
     if (activeHeader) {
-      const idx = tabs.findIndex((tab) => tab.header === activeHeader);
-      setActive(idx);
+      const idx = tabs.findIndex(tab => tab.header === activeHeader);
+      if (idx !== -1) setActive(idx);
+      else setActive(0);
     }
   }, [activeHeader, tabs]);
 
@@ -80,7 +83,7 @@ export const Tabs = ({
 
   const validateTabname = useCallback(
     (tabname: string): { error: string | null } => {
-      if (tabs.find((tab) => tab.header === tabname)) {
+      if (tabs.find(tab => tab.header === tabname)) {
         return { error: "Name already exists." };
       }
       return { error: null };
@@ -88,6 +91,14 @@ export const Tabs = ({
     [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;
@@ -103,11 +114,20 @@ export const Tabs = ({
 
     setIsNewtabDialogOpen(false);
     setTabname("");
-    // switch to new tab?
-    setActive(tabs.length);
 
     onCreateNewTab?.(_tabname);
-  }, [tabname, defaultExtension, validateTabname, onCreateNewTab, tabs.length]);
+
+    // switch to new tab?
+    handleActiveChange(tabs.length, _tabname);
+  }, [
+    tabname,
+    defaultExtension,
+    forceDefaultExtension,
+    validateTabname,
+    onCreateNewTab,
+    handleActiveChange,
+    tabs.length,
+  ]);
 
   const handleCloseTab = useCallback(
     (idx: number) => {
@@ -128,7 +148,7 @@ export const Tabs = ({
             gap: "$3",
             flex: 1,
             flexWrap: "nowrap",
-            marginBottom: "-1px",
+            marginBottom: "$2",
             width: "100%",
             overflow: "auto",
           }}
@@ -138,8 +158,8 @@ export const Tabs = ({
               key={tab.header}
               role="tab"
               tabIndex={idx}
-              onClick={() => setActive(idx)}
-              onKeyPress={() => setActive(idx)}
+              onClick={() => handleActiveChange(idx, tab.header)}
+              onKeyPress={() => handleActiveChange(idx, tab.header)}
               outline={active !== idx}
               size="sm"
               css={{
@@ -192,11 +212,11 @@ export const Tabs = ({
               <DialogContent>
                 <DialogTitle>Create new tab</DialogTitle>
                 <DialogDescription>
-                  <label>Tabname</label>
+                  <Label>Tabname</Label>
                   <Input
                     value={tabname}
-                    onChange={(e) => setTabname(e.target.value)}
-                    onKeyPress={(e) => {
+                    onChange={e => setTabname(e.target.value)}
+                    onKeyPress={e => {
                       if (e.key === "Enter") {
                         handleCreateTab();
                       }

components/Tooltip.tsx

@@ -0,0 +1,89 @@
+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(255,255,255,.15), 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,.15), 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<ITooltip> = ({
+  children,
+  content,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+}) => {
+  return (
+    <TooltipPrimitive.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <StyledContent side="bottom" align="center">
+        {content}
+        <StyledArrow offset={5} width={11} height={5} />
+      </StyledContent>
+    </TooltipPrimitive.Root>
+  );
+};
+
+export default Tooltip;

components/Transaction.tsx

@@ -0,0 +1,376 @@
+import { Play } from "phosphor-react";
+import { FC, useCallback, useEffect } from "react";
+import { useSnapshot } from "valtio";
+import transactionsData from "../content/transactions.json";
+import state, { modifyTransaction } from "../state";
+import { sendTransaction } from "../state/actions";
+import Box from "./Box";
+import Button from "./Button";
+import Container from "./Container";
+import { streamState } from "./DebugStream";
+import Flex from "./Flex";
+import Input from "./Input";
+import Text from "./Text";
+import Select from "./Select";
+
+type TxFields = Omit<
+  typeof transactionsData[0],
+  "Account" | "Sequence" | "TransactionType"
+>;
+
+type OtherFields = (keyof Omit<TxFields, "Destination">)[];
+
+type SelectOption = {
+  value: string;
+  label: string;
+};
+
+export interface TransactionState {
+  selectedTransaction: SelectOption | null;
+  selectedAccount: SelectOption | null;
+  selectedDestAccount: SelectOption | null;
+  txIsLoading: boolean;
+  txIsDisabled: boolean;
+  txFields: TxFields;
+}
+
+export interface TransactionProps {
+  header: string;
+  state: TransactionState;
+}
+
+const Transaction: FC<TransactionProps> = ({
+  header,
+  state: {
+    selectedAccount,
+    selectedDestAccount,
+    selectedTransaction,
+    txFields,
+    txIsDisabled,
+    txIsLoading,
+  },
+  ...props
+}) => {
+  const { accounts } = useSnapshot(state);
+
+  const setState = useCallback(
+    (pTx?: Partial<TransactionState>) => {
+      modifyTransaction(header, pTx);
+    },
+    [header]
+  );
+
+  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);
+
+  useEffect(() => {
+    const transactionType = selectedTransaction?.value;
+    const account = accounts.find(
+      acc => acc.address === selectedAccount?.value
+    );
+    if (!account || !transactionType || txIsLoading) {
+      setState({ txIsDisabled: true });
+    } else {
+      setState({ txIsDisabled: false });
+    }
+  }, [txIsLoading, selectedTransaction, selectedAccount, accounts, setState]);
+
+  useEffect(() => {
+    let _txFields: TxFields | undefined = transactionsData.find(
+      tx => tx.TransactionType === selectedTransaction?.value
+    );
+    if (!_txFields) return setState({ txFields: {} });
+    _txFields = { ..._txFields } as TxFields;
+
+    if (!_txFields.Destination) setState({ selectedDestAccount: null });
+    // @ts-ignore
+    delete _txFields.TransactionType;
+    // @ts-ignore
+    delete _txFields.Account;
+    // @ts-ignore
+    delete _txFields.Sequence;
+    setState({ txFields: _txFields });
+  }, [setState, selectedTransaction]);
+
+  const submitTest = useCallback(async () => {
+    const account = accounts.find(
+      acc => acc.address === selectedAccount?.value
+    );
+    const TransactionType = selectedTransaction?.value;
+    if (!account || !TransactionType || txIsDisabled) return;
+
+    setState({ txIsLoading: true });
+    // setTxIsError(null)
+    try {
+      let options = { ...txFields };
+
+      options.Destination = selectedDestAccount?.value;
+      (Object.keys(options) as (keyof TxFields)[]).forEach(field => {
+        let _value = options[field];
+        // convert currency
+        if (typeof _value === "object" && _value.type === "currency") {
+          if (+_value.value) {
+            options[field] = (+_value.value * 1000000 + "") as any;
+          } else {
+            options[field] = undefined; // 👇 💀
+          }
+        }
+        // handle type: `json`
+        if (typeof _value === "object" && _value.type === "json") {
+          if (typeof _value.value === "object") {
+            options[field] = _value.value as any;
+          } else {
+            try {
+              options[field] = JSON.parse(_value.value);
+            } catch (error) {
+              const message = `Input error for json field '${field}': ${
+                error instanceof Error ? error.message : ""
+              }`;
+              throw Error(message);
+            }
+          }
+        }
+
+        // delete unneccesary fields
+        if (!options[field]) {
+          delete options[field];
+        }
+      });
+      const logPrefix = header ? `${header.split(".")[0]}: ` : undefined;
+      await sendTransaction(
+        account,
+        {
+          TransactionType,
+          ...options,
+        },
+        { logPrefix }
+      );
+    } catch (error) {
+      console.error(error);
+      if (error instanceof Error) {
+        state.transactionLogs.push({ type: "error", message: error.message });
+      }
+    }
+    setState({ txIsLoading: false });
+  }, [
+    header,
+    setState,
+    selectedAccount?.value,
+    selectedDestAccount?.value,
+    selectedTransaction?.value,
+    accounts,
+    txFields,
+    txIsDisabled,
+  ]);
+
+  const resetState = useCallback(() => {
+    setState({});
+  }, [setState]);
+
+  const handleSetAccount = (acc: SelectOption) => {
+    setState({ selectedAccount: acc });
+    streamState.selectedAccount = acc;
+  };
+
+  const usualFields = ["TransactionType", "Amount", "Account", "Destination"];
+  const otherFields = Object.keys(txFields).filter(
+    k => !usualFields.includes(k)
+  ) as OtherFields;
+  return (
+    <Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
+      <Container
+        css={{
+          p: "$3 01",
+          fontSize: "$sm",
+          height: "calc(100% - 45px)",
+        }}
+      >
+        <Flex column fluid css={{ height: "100%", overflowY: "auto" }}>
+          <Flex
+            row
+            fluid
+            css={{
+              justifyContent: "flex-end",
+              alignItems: "center",
+              mb: "$3",
+              mt: "1px",
+              pr: "1px",
+            }}
+          >
+            <Text muted css={{ mr: "$3" }}>
+              Transaction type:{" "}
+            </Text>
+            <Select
+              instanceId="transactionsType"
+              placeholder="Select transaction type"
+              options={transactionsOptions}
+              hideSelectedOptions
+              css={{ width: "70%" }}
+              value={selectedTransaction}
+              onChange={(tx: any) => setState({ selectedTransaction: tx })}
+            />
+          </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.Amount !== undefined && (
+            <Flex
+              row
+              fluid
+              css={{
+                justifyContent: "flex-end",
+                alignItems: "center",
+                mb: "$3",
+                pr: "1px",
+              }}
+            >
+              <Text muted css={{ mr: "$3" }}>
+                Amount (XRP):{" "}
+              </Text>
+              <Input
+                value={txFields.Amount.value}
+                onChange={e =>
+                  setState({
+                    txFields: {
+                      ...txFields,
+                      Amount: { type: "currency", value: e.target.value },
+                    },
+                  })
+                }
+                css={{ width: "70%", flex: "inherit" }}
+              />
+            </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 = typeof _value === "object" ? _value.value : _value;
+            value =
+              typeof value === "object"
+                ? JSON.stringify(value)
+                : value?.toLocaleString();
+            let isCurrency =
+              typeof _value === "object" && _value.type === "currency";
+            return (
+              <Flex
+                key={field}
+                row
+                fluid
+                css={{
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  mb: "$3",
+                  pr: "1px",
+                }}
+              >
+                <Text muted css={{ mr: "$3" }}>
+                  {field + (isCurrency ? " (XRP)" : "")}:{" "}
+                </Text>
+                <Input
+                  value={value}
+                  onChange={e =>
+                    setState({
+                      txFields: {
+                        ...txFields,
+                        [field]:
+                          typeof _value === "object"
+                            ? { ..._value, value: e.target.value }
+                            : e.target.value,
+                      },
+                    })
+                  }
+                  css={{ width: "70%", flex: "inherit" }}
+                />
+              </Flex>
+            );
+          })}
+        </Flex>
+      </Container>
+      <Flex
+        row
+        css={{
+          justifyContent: "space-between",
+          position: "absolute",
+          left: 0,
+          bottom: 0,
+          width: "100%",
+        }}
+      >
+        <Button outline>VIEW AS JSON</Button>
+        <Flex row>
+          <Button onClick={resetState} outline css={{ mr: "$3" }}>
+            RESET
+          </Button>
+          <Button
+            variant="primary"
+            onClick={submitTest}
+            isLoading={txIsLoading}
+            disabled={txIsDisabled}
+          >
+            <Play weight="bold" size="16px" />
+            RUN TEST
+          </Button>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};
+
+export default Transaction;

components/index.tsx

@@ -4,7 +4,7 @@ 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 Input, Label } from "./Input";
 export { default as Select } from "./Select";
 export * from "./Tabs";
 export * from "./AlertDialog";

package.json

@@ -12,13 +12,15 @@
   "dependencies": {
     "@codingame/monaco-jsonrpc": "^0.3.1",
     "@codingame/monaco-languageclient": "^0.17.0",
-    "@monaco-editor/react": "^4.3.1",
+    "@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",
     "@radix-ui/react-id": "^0.1.1",
+    "@radix-ui/react-label": "^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",
@@ -28,10 +30,10 @@
     "jszip": "^3.7.1",
     "lodash.uniqby": "^4.7.0",
     "lodash.xor": "^4.5.0",
-    "monaco-editor": "^0.30.1",
+    "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",

pages/_app.tsx

@@ -18,7 +18,7 @@ import en from "javascript-time-ago/locale/en.json";
 import { useSnapshot } from "valtio";
 
 TimeAgo.setDefaultLocale(en.locale);
-TimeAgo.addLocale(en)
+TimeAgo.addLocale(en);
 
 function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   const router = useRouter();

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

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

state/actions/deployHook.ts

@@ -5,7 +5,7 @@ import state, { IAccount } from "../index";
 import calculateHookOn, { TTS } from "../../utils/hookOnCalculator";
 import { SetHookData } from "../../components/SetHookDialog";
 
-const hash = async (string: string) => {
+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));
@@ -66,9 +66,7 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
   if (!state.client) {
     return;
   }
-  const HookNamespace = await hash(arrayBufferToHex(
-    state.files?.[state.active]?.compiledContent
-  ).toUpperCase());
+  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: toHex(aa.HookParameter.HookParameterValue || '') } }));
@@ -153,13 +151,18 @@ 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: "1000000",
+      Fee: "100000",
       Hooks: [
         {
           Hook: {
@@ -172,9 +175,7 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
 
     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;
     }
@@ -196,6 +197,7 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
           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({

state/actions/fetchFiles.ts

@@ -3,7 +3,6 @@ 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
@@ -19,21 +18,43 @@ export const fetchFiles = (gistId: string) => {
 
     octokit
       .request("GET /gists/{gist_id}", { gist_id: gistId })
-      .then(res => {
+      .then(async 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
-        })
+        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 || "noname.c",
+            name: res.data.files?.[filename]?.filename || "untitled.c",
             language: res.data.files?.[filename]?.language?.toLowerCase() || "",
             content: res.data.files?.[filename]?.content || "",
           }));

state/actions/importAccount.ts

@@ -1,5 +1,5 @@
 import toast from "react-hot-toast";
-import { derive } from "xrpl-accountlib";
+import { derive, XRPL_Account } from "xrpl-accountlib";
 
 import state from '../index';
 import { names } from './addFaucetAccount';
@@ -12,8 +12,18 @@ export const importAccount = (secret: string) => {
   if (state.accounts.find((acc) => acc.secret === secret)) {
     return toast.error("Account already added!");
   }
-  const account = derive.familySeed(secret);
-  if (!account.secret.familySeed) {
+  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({

state/constants/templates.ts

@@ -14,8 +14,7 @@ export const templateFileIds = {
     'carbon': 'a9fbcaf1b816b198c7fc0f62962bebf2',
     'doubler': '56b86174aeb70b2b48eee962bad3e355',
     'peggy': 'd21298a37e1550b781682014762a567b',
-    'headers': '9b448e8a55fab11ef5d1274cb59f9cf3'
-
+    'headers': '55f639bce59a49c58c45e663776b5138'
 }
 
 export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'hookmacro.h']

state/index.ts

@@ -159,3 +159,5 @@ if (typeof window !== "undefined") {
   });
 }
 export default state
+
+export * from './transactions'

state/transactions.ts

@@ -0,0 +1,59 @@
+import { proxy } from 'valtio';
+import { TransactionState } from '../components/Transaction';
+import { deepEqual } from '../utils/object';
+
+export const defaultTransaction: TransactionState = {
+    selectedTransaction: null,
+    selectedAccount: null,
+    selectedDestAccount: null,
+    txIsLoading: false,
+    txIsDisabled: false,
+    txFields: {},
+};
+
+export const transactionsState = proxy({
+    transactions: [
+        {
+            header: "test1.json",
+            state: defaultTransaction,
+        },
+    ],
+    activeHeader: "test1.json"
+});
+
+/**
+ * Simple transaction state changer
+ * @param header Unique key and tab name for the transaction tab
+ * @param partialTx partial transaction state, `{}` resets the state and `undefined` deletes the transaction
+ */
+export const modifyTransaction = (
+    header: string,
+    partialTx?: Partial<TransactionState>
+) => {
+    const tx = transactionsState.transactions.find(tx => tx.header === header);
+
+    if (partialTx === undefined) {
+        transactionsState.transactions = transactionsState.transactions.filter(
+            tx => tx.header !== header
+        );
+        return;
+    }
+
+    if (!tx) {
+        transactionsState.transactions.push({
+            header,
+            state: {
+                ...defaultTransaction,
+                ...partialTx,
+            },
+        });
+        return;
+    }
+
+    Object.keys(partialTx).forEach(k => {
+        // Typescript mess here, but is definetly safe!
+        const s = tx.state as any;
+        const p = partialTx as any;
+        if (!deepEqual(s[k], p[k])) s[k] = p[k];
+    });
+};

utils/object.ts

@@ -0,0 +1,24 @@
+export const deepEqual = (object1: any, object2: any) => {
+    if (!isObject(object1) || !isObject(object2)) return object1 === object2
+
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        const val1 = object1[key];
+        const val2 = object2[key];
+        const areObjects = isObject(val1) && isObject(val2);
+        if (
+            areObjects && !deepEqual(val1, val2) ||
+            !areObjects && val1 !== val2
+        ) {
+            return false;
+        }
+    }
+    return true;
+}
+export const isObject = (object: any) => {
+    return object != null && typeof object === 'object';
+}

yarn.lock

@@ -202,19 +202,19 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@monaco-editor/loader@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.2.0.tgz#373fad69973384624e3d9b60eefd786461a76acd"
-  integrity sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==
+"@monaco-editor/loader@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.0.tgz#659fbaf1d612ea67b2a0519a18612d1c4813e444"
+  integrity sha512-N3mGq1ktC3zh7WUx3NGO+PSDdNq9Vspk/41rEmRdrCqV9vNbBTRzAOplmUpNQsi+hmTs++ERMBobMERb8Kb+3g==
   dependencies:
     state-local "^1.0.6"
 
-"@monaco-editor/react@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.3.1.tgz#d65bcbf174c39b6d4e7fec43d0cddda82b70a12a"
-  integrity sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==
+"@monaco-editor/react@^4.4.1":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.1.tgz#2e2b9b369f3082b0e14f47cdbe35658fd56c7c7d"
+  integrity sha512-95E/XPC4dbm/7qdkhSsU/a1kRgcn2PYhRTVIc+/cixWCZrwRURW1DRPaIZ2lOawBJ6kAOLywxuD4A4UmbT0ZIw==
   dependencies:
-    "@monaco-editor/loader" "^1.2.0"
+    "@monaco-editor/loader" "^1.3.0"
     prop-types "^15.7.2"
 
 "@next/env@12.1.0":
@@ -674,6 +674,17 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "0.1.0"
 
+"@radix-ui/react-label@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-0.1.5.tgz#12cd965bfc983e0148121d4c99fb8e27a917c45c"
+  integrity sha512-Au9+n4/DhvjR0IHhvZ1LPdx/OW+3CGDie30ZyCkbSHIuLp4/CV4oPPGBwJ1vY99Jog3zyQhsGww9MXj8O9Aj/A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-primitive" "0.1.4"
+
 "@radix-ui/react-menu@0.1.6":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-0.1.6.tgz#7f9521a10f6a9cd819b33b33d5ed9538d79b2e75"
@@ -762,6 +773,27 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "0.1.0"
 
+"@radix-ui/react-tooltip@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3"
+  integrity sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-popper" "0.1.4"
+    "@radix-ui/react-portal" "0.1.4"
+    "@radix-ui/react-presence" "0.1.2"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-slot" "0.1.2"
+    "@radix-ui/react-use-controllable-state" "0.1.0"
+    "@radix-ui/react-use-escape-keydown" "0.1.0"
+    "@radix-ui/react-use-previous" "0.1.1"
+    "@radix-ui/react-use-rect" "0.1.1"
+    "@radix-ui/react-visually-hidden" "0.1.4"
+
 "@radix-ui/react-use-body-pointer-events@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz#63e7fd81ca7ffd30841deb584cd2b7f460df2597"
@@ -807,6 +839,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-previous@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
+  integrity sha512-O/ZgrDBr11dR8rhO59ED8s5zIXBRFi8MiS+CmFGfi7MJYdLbfqVOmQU90Ghf87aifEgWe6380LA69KBneaShAg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-rect@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz#6c15384beee59c086e75b89a7e66f3d2e583a856"
@@ -822,6 +861,14 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-visually-hidden@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.4.tgz#6c75eae34fb5d084b503506fbfc05587ced05f03"
+  integrity sha512-K/q6AEEzqeeEq/T0NPChvBqnwlp8Tl4NnQdrI/y8IOY7BRR+Ug0PEsVk6g48HJ7cA1//COugdxXXVVK/m0X1mA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "0.1.4"
+
 "@radix-ui/rect@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419"
@@ -2831,10 +2878,10 @@ minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-monaco-editor@^0.30.1:
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.30.1.tgz#47f8d18a0aa2264fc5654581741ab8d7bec01689"
-  integrity sha512-B/y4+b2O5G2gjuxIFtCE2EkM17R2NM7/3F8x0qcPsqy4V83bitJTIO4TIeZpYlzu/xy6INiY/+84BEm6+7Cmzg==
+monaco-editor@^0.33.0:
+  version "0.33.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.33.0.tgz#842e244f3750a2482f8a29c676b5684e75ff34af"
+  integrity sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==
 
 ms@2.0.0:
   version "2.0.0"
@@ -2881,10 +2928,10 @@ next-auth@^4.0.0-beta.5:
     preact-render-to-string "^5.1.19"
     uuid "^8.3.2"
 
-next-themes@^0.0.15:
-  version "0.0.15"
-  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.15.tgz#ab0cee69cd763b77d41211f631e108beab39bf7d"
-  integrity sha512-LTmtqYi03c4gMTJmWwVK9XkHL7h0/+XrtR970Ujvtu3s0kZNeJN24aJsi4rkZOI8i19+qq6f8j+8Duwy5jqcrQ==
+next-themes@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.1.1.tgz#122113a458bf1d1be5ffed66778ab924c106f82a"
+  integrity sha512-Iqxt6rhS/KfK/iHJ0tfFjTcdLEAI0AgwFuAFrMwLOPK5e+MI3I+fzyvBoS+VaOS+NldUiazurhgwYhrfV0VXsQ==
 
 next-tick@^1.1.0:
   version "1.1.0"