Use explicit types

.env.example

@@ -2,7 +2,6 @@ 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, Label } from "./Input";
+import { Input } from "./Input";
 import truncate from "../utils/truncate";
 
 const labelStyle = css({
@@ -491,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/DebugStream.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from "react";
 import { proxy, ref, useSnapshot } from "valtio";
 import { Select } from ".";
-import state, { ILog, transactionsState } from "../state";
+import state, { ILog } from "../state";
 import { extractJSON } from "../utils/json";
 import LogBox from "./LogBox";
 
@@ -10,26 +10,17 @@ interface ISelect<T = string> {
   value: T;
 }
 
-export interface IStreamState {
+const streamState = proxy({
-  selectedAccount: ISelect | null;
-  status: "idle" | "opened" | "closed";
-  statusChangeTimestamp?: number;
-  logs: ILog[];
-  socket?: WebSocket;
-}
-
-export const streamState = proxy<IStreamState>({
   selectedAccount: null as ISelect | null,
-  status: "idle",
   logs: [] as ILog[],
+  socket: undefined as WebSocket | undefined,
 });
 
 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,
   }));
@@ -42,12 +33,39 @@ const DebugStream = () => {
         options={accountOptions}
         hideSelectedOptions
         value={selectedAccount}
-        onChange={acc => (streamState.selectedAccount = acc as any)}
+        onChange={(acc) => (streamState.selectedAccount = acc as any)}
         css={{ width: "100%" }}
       />
     </>
   );
 
+  const prepareLog = useCallback((str: any): ILog => {
+    if (typeof str !== "string") throw Error("Unrecognized debug log stream!");
+
+    const match = str.match(/([\s\S]+(?:UTC|ISO|GMT[+|-]\d+))\ ?([\s\S]*)/m);
+    const [_, tm, msg] = match || [];
+
+    const extracted = extractJSON(msg);
+    const timestamp = isNaN(Date.parse(tm || ""))
+      ? tm
+      : new Date(tm).toLocaleTimeString();
+
+    const message = !extracted
+      ? msg
+      : msg.slice(0, extracted.start) + msg.slice(extracted.end + 1);
+
+    const jsonData = extracted
+      ? JSON.stringify(extracted.result, null, 2)
+      : undefined;
+    return {
+      type: "log",
+      message,
+      timestamp,
+      jsonData,
+      defaultCollapsed: true,
+    };
+  }, []);
+
   useEffect(() => {
     const account = selectedAccount?.value;
     if (account && (!socket || !socket.url.endsWith(account))) {
@@ -63,50 +81,6 @@ const DebugStream = () => {
     }
   }, [selectedAccount?.value, socket]);
 
-  const onMount = useCallback(async () => {
-    // deliberately using `proxy` values and not the `useSnapshot` ones to have no dep list
-    const acc = streamState.selectedAccount;
-    const status = streamState.status;
-
-    if (status === "opened" && acc) {
-      // fetch the missing ones
-      try {
-        const url = `https://${process.env.NEXT_PUBLIC_DEBUG_STREAM_URL}/recent/${acc?.value}`;
-
-        // TODO Remove after api sets cors properly
-        const res = await fetch("/api/proxy", {
-          method: "POST",
-          body: JSON.stringify({ url }),
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-
-        if (!res.ok) return;
-
-        const body = await res.json();
-
-        if (!body?.logs) return;
-
-        const start = streamState.statusChangeTimestamp || 0;
-        streamState.logs = [];
-        pushLog(`Debug stream opened for account ${acc.value}`, {
-          type: "success",
-        });
-
-        const logs = Object.entries(body.logs).filter(([tm]) => +tm >= start);
-
-        logs.forEach(([tm, log]) => pushLog(log));
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    onMount();
-  }, [onMount]);
-
   useEffect(() => {
     const account = selectedAccount?.value;
     const socket = streamState.socket;
@@ -114,27 +88,37 @@ const DebugStream = () => {
 
     const onOpen = () => {
       streamState.logs = [];
-      streamState.status = "opened";
+      streamState.logs.push({
-      streamState.statusChangeTimestamp = Date.now();
-      pushLog(`Debug stream opened for account ${account}`, {
         type: "success",
+        message: `Debug stream opened for account ${account}`,
       });
     };
     const onError = () => {
-      pushLog("Something went wrong! Check your connection and try again.", {
+      streamState.logs.push({
         type: "error",
+        message: "Something went wrong! Check your connection and try again.",
       });
     };
     const onClose = (e: CloseEvent) => {
-      pushLog(`Connection was closed. [code: ${e.code}]`, {
+      streamState.logs.push({
         type: "error",
+        message: `Connection was closed. [code: ${e.code}]`,
       });
       streamState.selectedAccount = null;
-      streamState.status = "closed";
-      streamState.statusChangeTimestamp = Date.now();
     };
     const onMessage = (event: any) => {
-      pushLog(event.data);
+      if (!event.data) return;
+      const log = prepareLog(event.data);
+      // Filter out account_info and account_objects requests
+      try {
+        const parsed = JSON.parse(log.jsonData);
+        if (parsed?.id?._Request?.includes("hooks-builder-req")) {
+          return;
+        }
+      } catch (err) {
+        // Lets just skip if we cannot parse the message
+      }
+      return streamState.logs.push(log);
     };
 
     socket.addEventListener("open", onOpen);
@@ -148,70 +132,16 @@ const DebugStream = () => {
       socket.removeEventListener("message", onMessage);
       socket.removeEventListener("error", onError);
     };
-  }, [selectedAccount?.value, socket]);
+  }, [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]);
-
-  const clearLog = () => {
-    streamState.logs = [];
-    streamState.statusChangeTimestamp = Date.now();
-  };
-
   return (
     <LogBox
       enhanced
       renderNav={renderNav}
       title="Debug stream"
       logs={logs}
-      clearLog={clearLog}
+      clearLog={() => (streamState.logs = [])}
     />
   );
 };
 
 export default DebugStream;
-
-export const pushLog = (
-  str: any,
-  opts: Partial<Pick<ILog, "type">> = {}
-): ILog | undefined => {
-  if (!str) return;
-  if (typeof str !== "string") throw Error("Unrecognized debug log stream!");
-
-  const match = str.match(/([\s\S]+(?:UTC|ISO|GMT[+|-]\d+))?\ ?([\s\S]*)/m);
-  const [_, tm, msg] = match || [];
-
-  const timestamp = Date.parse(tm || "") || undefined;
-  const timestring = !timestamp ? tm : new Date(timestamp).toLocaleTimeString();
-
-  const extracted = extractJSON(msg);
-  const message = !extracted
-    ? msg
-    : msg.slice(0, extracted.start) + msg.slice(extracted.end + 1);
-
-  const jsonData = extracted
-    ? JSON.stringify(extracted.result, null, 2)
-    : undefined;
-
-  if (extracted?.result?.id?._Request?.includes("hooks-builder-req")) {
-    return;
-  }
-
-  const { type = "log" } = opts;
-  const log: ILog = {
-    type,
-    message,
-    timestring,
-    jsonData,
-    defaultCollapsed: true,
-  };
-
-  if (log) streamState.logs.push(log);
-  return log;
-};

components/EditorNavigation.tsx

@@ -47,7 +47,7 @@ import {
 } from "./Dialog";
 import Flex from "./Flex";
 import Stack from "./Stack";
-import { Input, Label } from "./Input";
+import Input from "./Input";
 import Text from "./Text";
 import Tooltip from "./Tooltip";
 import {
@@ -222,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)}
@@ -524,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

@@ -1,28 +1,29 @@
-import React, { useEffect, useRef } from "react";
+import { listen } from "@codingame/monaco-jsonrpc";
-import { useSnapshot, ref } from "valtio";
+import { MonacoServices } from "@codingame/monaco-languageclient";
 import Editor, { loader } from "@monaco-editor/react";
+import uniqBy from "lodash.uniqby";
 import type monaco from "monaco-editor";
-import { ArrowBendLeftUp } from "phosphor-react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
-import uniqBy from "lodash.uniqby";
+import { ArrowBendLeftUp } from "phosphor-react";
-
+import React, { useEffect, useRef } from "react";
-import Box from "./Box";
+import toast from "react-hot-toast";
-import Container from "./Container";
+import ReconnectingWebSocket from "reconnecting-websocket";
-import dark from "../theme/editor/amy.json";
+import { ref, useSnapshot } from "valtio";
-import light from "../theme/editor/xcode_default.json";
+import state from "../state";
 import { saveFile } from "../state/actions";
 import { apiHeaderFiles } from "../state/constants";
-import state from "../state";
+import dark from "../theme/editor/amy.json";
-
+import light from "../theme/editor/xcode_default.json";
+import { createLanguageClient, createWebSocket } from "../utils/languageClient";
+import docs from "../xrpl-hooks-docs/docs";
+import Box from "./Box";
+import Container from "./Container";
 import EditorNavigation from "./EditorNavigation";
 import Text from "./Text";
-import { MonacoServices } from "@codingame/monaco-languageclient";
-import { createLanguageClient, createWebSocket } from "../utils/languageClient";
-import { listen } from "@codingame/monaco-jsonrpc";
-import ReconnectingWebSocket from "reconnecting-websocket";
 
-import docs from "../xrpl-hooks-docs/docs";
+
+
 
 loader.config({
   paths: {
@@ -123,6 +124,7 @@ const HooksEditor = () => {
       setMarkers(monacoRef.current);
     }
   }, [snap.active]);
+
   return (
     <Box
       css={{
@@ -155,7 +157,7 @@ const HooksEditor = () => {
               );
             }
 
-            // create the web socket
+            // create the websocket
             if (!subscriptionRef.current) {
               monaco.languages.register({
                 id: "c",
@@ -164,11 +166,12 @@ const HooksEditor = () => {
                 mimetypes: ["text/plain"],
               });
               MonacoServices.install(monaco);
-              const webSocket = createWebSocket(
+
+              const webSocket: ReconnectingWebSocket = createWebSocket(
                 process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ""
               );
               subscriptionRef.current = webSocket;
-              // listen when the web socket is opened
+              // listen when the websocket is opened
               listen({
                 webSocket: webSocket as WebSocket,
                 onConnection: (connection) => {
@@ -180,9 +183,14 @@ const HooksEditor = () => {
                       // disposable.stop();
                       disposable.dispose();
                     } catch (err) {
-                      console.log("err", err);
+                      toast.error('Connection to language server lost!')
+                      console.error("Couldn't dispose the language server connection! ", err);
                     }
                   });
+                  connection.onDispose(() => {
+                    toast.error('Connection to language server lost!')
+                  })
+                  // TODO: Check if we need to listen to more connection events
                 },
               });
             }
@@ -226,22 +234,6 @@ 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,6 +1,5 @@
 import React from "react";
 import { styled } from "../stitches.config";
-import * as LabelPrim from '@radix-ui/react-label';
 
 export const Input = styled("input", {
   // Reset
@@ -60,8 +59,6 @@ export const Input = styled("input", {
   },
   "&:read-only": {
     backgroundColor: "$mauve2",
-    color: "$text",
-    opacity: 0.8,
     "&:focus": {
       boxShadow: "inset 0px 0px 0px 1px $colors$mauve7",
     },
@@ -159,11 +156,3 @@ 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/LogBox.tsx

@@ -1,22 +1,17 @@
-import {
-  useRef,
-  useLayoutEffect,
-  ReactNode,
-  FC,
-  useState,
-  useCallback,
-} from "react";
-import { Notepad, Prohibit } from "phosphor-react";
-import useStayScrolled from "react-stay-scrolled";
 import NextLink from "next/link";
-
+import { Notepad, Prohibit } from "phosphor-react";
-import Container from "./Container";
+import {
-import LogText from "./LogText";
+  FC, ReactNode, useCallback, useLayoutEffect, useRef, useState
-import state, { ILog } from "../state";
+} from "react";
-import { Pre, Link, Heading, Button, Text, Flex, Box } from ".";
+import useStayScrolled from "react-stay-scrolled";
 import regexifyString from "regexify-string";
 import { useSnapshot } from "valtio";
+import { Box, Button, Flex, Heading, Link, Pre, Text } from ".";
+import state, { ILog } from "../state";
 import { AccountDialog } from "./Accounts";
+import Container from "./Container";
+import LogText from "./LogText";
+
 
 interface ILogBox {
   title: string;
@@ -147,7 +142,7 @@ const LogBox: FC<ILogBox> = ({
 
 export const Log: FC<ILog> = ({
   type,
-  timestring,
+  timestamp: timestamp,
   message: _message,
   link,
   linkText,
@@ -160,7 +155,7 @@ export const Log: FC<ILog> = ({
 
   const enrichAccounts = useCallback(
     (str?: string): ReactNode => {
-      if (!str || !accounts.length) return null;
+      if (!str) return null;
 
       const pattern = `(${accounts.map((acc) => acc.address).join("|")})`;
       const res = regexifyString({
@@ -186,17 +181,8 @@ export const Log: FC<ILog> = ({
     },
     [accounts]
   );
-
+  _message = _message.trim().replace(/\n /gi, "\n");
-  let message: ReactNode;
+  const message = enrichAccounts(_message);
-  
-  if (typeof _message === 'string') {
-    _message = _message.trim().replace(/\n /gi, "\n");
-    message = enrichAccounts(_message)
-  }
-  else {
-    message = _message
-  }
-
   const jsonData = enrichAccounts(_jsonData);
 
   return (
@@ -206,9 +192,9 @@ export const Log: FC<ILog> = ({
         activeAccountAddress={dialogAccount}
       />
       <LogText variant={type}>
-        {timestring && (
+        {timestamp && (
           <Text muted monospace>
-            {timestring}{" "}
+            {timestamp}{" "}
           </Text>
         )}
         <Pre>{message} </Pre>

components/Select.tsx

@@ -52,7 +52,6 @@ const Select = forwardRef<any, Props>((props, ref) => {
         control: (provided, state) => {
           return {
             ...provided,
-            minHeight: 0,
             border: "0px",
             backgroundColor: colors.mauve4,
             boxShadow: `0 0 0 1px ${
@@ -119,6 +118,32 @@ 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, { useCallback, useEffect, useState } from "react";
+import React, { 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, Label } from "./Input";
+import { Input } from "./Input";
 import {
   Controller,
   SubmitHandler,
@@ -25,7 +25,6 @@ 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,
@@ -37,7 +36,6 @@ export type SetHookData = {
     value: keyof TTS;
     label: string;
   }[];
-  HookNamespace: string;
   HookParameters: {
     HookParameter: {
       HookParameterName: string;
@@ -59,26 +57,12 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
     register,
     handleSubmit,
     control,
-    watch,
+    // formState: { errors },
-    setValue,
+  } = useForm<SetHookData>();
-    formState: { errors },
-  } = useForm<SetHookData>({
-    defaultValues: {
-      HookNamespace: snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
-    },
-  });
   const { fields, append, remove } = useFieldArray({
     control,
     name: "HookParameters", // unique name for your Field Array
   });
-
-  // Update value if activeWat changes
-  useEffect(() => {
-    setValue(
-      "HookNamespace",
-      snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
-    );
-  }, [snap.activeWat, snap.files, setValue]);
   // const {
   //   fields: grantFields,
   //   append: grantAppend,
@@ -87,19 +71,6 @@ 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;
   }
@@ -118,7 +89,6 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
     }
     toast.error(`Transaction failed! (${res?.engine_result_message})`);
   };
-
   return (
     <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
       <DialogTrigger asChild>
@@ -141,7 +111,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}
@@ -160,28 +130,9 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                 />
               </Box>
               <Box css={{ width: "100%" }}>
-                <Label>Hook Namespace Seed</Label>
+                <label style={{ marginBottom: "10px", display: "block" }}>
-                <Input
-                  {...register("HookNamespace", { required: true })}
-                  autoComplete={"off"}
-                  defaultValue={
-                    snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
-                  }
-                />
-                {errors.HookNamespace?.type === "required" && (
-                  <Box css={{ display: "inline", color: "$red11" }}>
-                    Namespace is required
-                  </Box>
-                )}
-                <Box css={{ mt: "$3" }}>
-                  <Label>Hook Namespace (sha256)</Label>
-                  <Input readOnly value={hashedNamespace} />
-                </Box>
-              </Box>
-              <Box css={{ width: "100%" }}>
-                <Label style={{ marginBottom: "10px", display: "block" }}>
                   Hook parameters
-                </Label>
+                </label>
                 <Stack>
                   {fields.map((field, index) => (
                     <Stack key={field.id}>
@@ -193,7 +144,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                         )}
                       />
                       <Input
-                        placeholder="Value (hex-quoted)"
+                        placeholder="Parameter value"
                         {...register(
                           `HookParameters.${index}.HookParameter.HookParameterValue`
                         )}

components/Tabs.tsx

@@ -6,7 +6,7 @@ import React, {
   useCallback,
 } from "react";
 import type { ReactNode, ReactElement } from "react";
-import { Box, Button, Flex, Input, Label, Stack, Text } from ".";
+import { Box, Button, Flex, Input, Stack, Text } from ".";
 import {
   Dialog,
   DialogTrigger,
@@ -29,7 +29,7 @@ interface TabProps {
   children: ReactNode;
 }
 
-// TODO customise messages shown
+// TODO customise strings shown
 interface Props {
   activeIndex?: number;
   activeHeader?: string;
@@ -40,7 +40,6 @@ 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;
@@ -53,12 +52,11 @@ 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("");
@@ -70,9 +68,8 @@ export const Tabs = ({
 
   useEffect(() => {
     if (activeHeader) {
-      const idx = tabs.findIndex(tab => tab.header === activeHeader);
+      const idx = tabs.findIndex((tab) => tab.header === activeHeader);
-      if (idx !== -1) setActive(idx);
+      setActive(idx);
-      else setActive(0);
     }
   }, [activeHeader, tabs]);
 
@@ -83,7 +80,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 };
@@ -91,14 +88,6 @@ 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;
@@ -114,20 +103,11 @@ 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) => {
@@ -148,7 +128,7 @@ export const Tabs = ({
             gap: "$3",
             flex: 1,
             flexWrap: "nowrap",
-            marginBottom: "$2",
+            marginBottom: "-1px",
             width: "100%",
             overflow: "auto",
           }}
@@ -158,8 +138,8 @@ export const Tabs = ({
               key={tab.header}
               role="tab"
               tabIndex={idx}
-              onClick={() => handleActiveChange(idx, tab.header)}
+              onClick={() => setActive(idx)}
-              onKeyPress={() => handleActiveChange(idx, tab.header)}
+              onKeyPress={() => setActive(idx)}
               outline={active !== idx}
               size="sm"
               css={{
@@ -212,11 +192,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)}
+                    onChange={(e) => setTabname(e.target.value)}
-                    onKeyPress={e => {
+                    onKeyPress={(e) => {
                       if (e.key === "Enter") {
                         handleCreateTab();
                       }

components/Transaction.tsx

@@ -1,377 +0,0 @@
-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%",
-          mb: "$1"
-        }}
-      >
-        <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, Label } from "./Input";
+export { default as Input } from "./Input";
 export { default as Select } from "./Select";
 export * from "./Tabs";
 export * from "./AlertDialog";

package.json

@@ -12,14 +12,13 @@
   "dependencies": {
     "@codingame/monaco-jsonrpc": "^0.3.1",
     "@codingame/monaco-languageclient": "^0.17.0",
-    "@monaco-editor/react": "^4.4.1",
+    "@monaco-editor/react": "^4.3.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",
@@ -30,10 +29,10 @@
     "jszip": "^3.7.1",
     "lodash.uniqby": "^4.7.0",
     "lodash.xor": "^4.5.0",
-    "monaco-editor": "^0.33.0",
+    "monaco-editor": "^0.30.1",
     "next": "^12.0.4",
     "next-auth": "^4.0.0-beta.5",
-    "next-themes": "^0.1.1",
+    "next-themes": "^0.0.15",
     "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/api/proxy.ts

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

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

@@ -1,11 +1,23 @@
 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, Container, Flex, Tab, Tabs } from "../../components";
+import {
-import Transaction from "../../components/Transaction";
+  Box,
+  Button,
+  Container,
+  Flex,
+  Input,
+  Select,
+  Tab,
+  Tabs,
+  Text,
+} from "../../components";
+import transactionsData from "../../content/transactions.json";
 import state from "../../state";
+import { sendTransaction } from "../../state/actions";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
-import { transactionsState, modifyTransaction } from "../../state";
 
 const DebugStream = dynamic(() => import("../../components/DebugStream"), {
   ssr: false,
@@ -18,10 +30,344 @@ 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 { transactions, activeHeader } = useSnapshot(transactionsState);
+  const [tabHeaders, setTabHeaders] = useState<string[]>(["test1.json"]);
-
   return (
     <Container css={{ px: 0 }}>
       <Split
@@ -30,7 +376,7 @@ const Test = () => {
         gutterSize={4}
         gutterAlign="center"
         style={{ height: "calc(100vh - 60px)" }}
-        onDragEnd={e => saveSplit("testVertical", e)}
+        onDragEnd={(e) => saveSplit("testVertical", e)}
       >
         <Flex
           row
@@ -52,29 +398,23 @@ 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={header => modifyTransaction(header, {})}
+                onCreateNewTab={(name) =>
-                onCloseTab={(idx, header) =>
+                  setTabHeaders(tabHeaders.concat(name))
-                  header && modifyTransaction(header, undefined)
+                }
+                onCloseTab={(index) =>
+                  setTabHeaders(tabHeaders.filter((_, idx) => idx !== index))
                 }
               >
-                {transactions.map(({ header, state }) => (
+                {tabHeaders.map((header) => (
                   <Tab key={header} header={header}>
-                    <Transaction
+                    <Transaction header={header} />
-                      state={state}
-                      header={header}
-                    />
                   </Tab>
                 ))}
               </Tabs>

state/actions/addFaucetAccount.ts

@@ -33,8 +33,6 @@ export const addFaucetAccount = async (showToast: boolean = false) => {
     return toast.error("You can only have maximum 6 accounts");
   }
   if (typeof window !== 'undefined') {
-
-
     const toastId = showToast ? toast.loading("Creating account") : "";
     const res = await fetch(`${window.location.origin}/api/faucet`, {
       method: "POST",
@@ -92,5 +90,4 @@ export const addFunds = async (address: string) => {
       currAccount.xrp = (Number(currAccount.xrp) + (json.xrp * 1000000)).toString();
     }
   }
-
 }

state/actions/compileCode.ts

@@ -1,10 +1,10 @@
-import toast from "react-hot-toast";
 import Router from 'next/router';
-
+import toast from "react-hot-toast";
+import { ref } from "valtio";
+import { decodeBinary } from "../../utils/decodeBinary";
 import state from "../index";
 import { saveFile } from "./saveFile";
-import { decodeBinary } from "../../utils/decodeBinary";
+
-import { ref } from "valtio";
 
 /* compileCode sends the code of the active file to compile endpoint
  * If all goes well you will get base64 encoded wasm file back with
@@ -15,17 +15,22 @@ import { ref } from "valtio";
 export const compileCode = async (activeId: number) => {
   // Save the file to global state
   saveFile(false);
+  
   if (!process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT) {
     throw Error("Missing env!");
   }
+  
   // Bail out if we're already compiling
   if (state.compiling) {
     // if compiling is ongoing return
     return;
   }
+  
   // Set loading state to true
   state.compiling = true;
+  // Reset development log
   state.logs = []
+
   try {
     const res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
       method: "POST",
@@ -46,6 +51,7 @@ export const compileCode = async (activeId: number) => {
     });
     const json = await res.json();
     state.compiling = false;
+    
     if (!json.success) {
       state.logs.push({ type: "error", message: json.message });
       if (json.tasks && json.tasks.length > 0) {
@@ -57,16 +63,19 @@ export const compileCode = async (activeId: number) => {
       }
       return toast.error(`Couldn't compile!`, { position: "bottom-center" });
     }
+
     state.logs.push({
       type: "success",
       message: `File ${state.files?.[activeId]?.name} compiled successfully. Ready to deploy.`,
       link: Router.asPath.replace("develop", "deploy"),
       linkText: "Go to deploy",
     });
+
     // Decode base64 encoded wasm that is coming back from the endpoint
     const bufferData = await decodeBinary(json.output);
     state.files[state.active].compiledContent = ref(bufferData);
     state.files[state.active].lastCompiled = new Date();
+
     // Import wabt from and create human readable version of wasm file and
     // put it into state
     import("wabt").then((wabt) => {
@@ -80,12 +89,22 @@ export const compileCode = async (activeId: number) => {
       state.files[state.active].compiledWatContent = wast;
       toast.success("Compiled successfully!", { position: "bottom-center" });
     });
-  } catch (err) {
+  } catch (err: any) {
-    console.log(err);
+    const error = err as Error
-    state.logs.push({
+
-      type: "error",
+    // TODO: Centralized error handling? Just a thought
-      message: "Error occured while compiling!",
+    if(error.message.includes("Failed to fetch")) {
-    });
+      state.logs.push({
+        type: "error",
+        message: "No connection to the compiler server!",
+      });
+    } else {
+      state.logs.push({
+        type: "error",
+        message: "Error occured while compiling!",
+      });
+    }
+    
     state.compiling = false;
   }
 };

state/actions/deployHook.ts

@@ -1,24 +1,23 @@
-import { derive, sign } from "xrpl-accountlib";
 import toast from "react-hot-toast";
-
+import { derive, sign } from "xrpl-accountlib";
-import state, { IAccount } from "../index";
+import { AnyJson } from "xrpl-client";
-import calculateHookOn, { TTS } from "../../utils/hookOnCalculator";
 import { SetHookData } from "../../components/SetHookDialog";
-import { Link } from "../../components";
+import calculateHookOn, { TTS } from "../../utils/hookOnCalculator";
-import { ref } from "valtio";
+import state, { IAccount } from "../index";
 
-export const sha256 = async (string: string) => {
+
+const hash = async (string: string) => {
   const utf8 = new TextEncoder().encode(string);
-  const hashBuffer = await crypto.subtle.digest("SHA-256", utf8);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', utf8);
   const hashArray = Array.from(new Uint8Array(hashBuffer));
   const hashHex = hashArray
-    .map(bytes => bytes.toString(16).padStart(2, "0"))
+    .map((bytes) => bytes.toString(16).padStart(2, '0'))
-    .join("");
+    .join('');
   return hashHex;
-};
+}
 
 function toHex(str: string) {
-  var result = "";
+  var result = '';
   for (var i = 0; i < str.length; i++) {
     result += str.charCodeAt(i).toString(16);
   }
@@ -53,36 +52,30 @@ function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
  * hex string, signs the transaction and deploys it to
  * Hooks testnet.
  */
-export const deployHook = async (
+export const deployHook = async (account: IAccount & { name?: string }, data: SetHookData): Promise<AnyJson | undefined> => {
-  account: IAccount & { name?: string },
-  data: SetHookData
-) => {
   if (
     !state.files ||
     state.files.length === 0 ||
     !state.files?.[state.active]?.compiledContent
   ) {
+    console.log("ebin1")
     return;
   }
 
   if (!state.files?.[state.active]?.compiledContent) {
+    console.log("ebin2")
     return;
   }
   if (!state.client) {
+    console.log("ebin3")
     return;
   }
-  const HookNamespace = (await sha256(data.HookNamespace)).toUpperCase();
+  const HookNamespace = await hash(arrayBufferToHex(
+    state.files?.[state.active]?.compiledContent
+  ).toUpperCase());
   const hookOnValues: (keyof TTS)[] = data.Invoke.map(tt => tt.value);
   const { HookParameters } = data;
-  const filteredHookParameters = HookParameters.filter(
+  const filteredHookParameters = HookParameters.filter(hp => hp.HookParameter.HookParameterName && hp.HookParameter.HookParameterValue)?.map(aa => ({ HookParameter: { HookParameterName: toHex(aa.HookParameter.HookParameterName || ''), HookParameterValue: toHex(aa.HookParameter.HookParameterValue || '') } }));
-    hp =>
-      hp.HookParameter.HookParameterName && hp.HookParameter.HookParameterValue
-  )?.map(aa => ({
-    HookParameter: {
-      HookParameterName: toHex(aa.HookParameter.HookParameterName || ""),
-      HookParameterValue: aa.HookParameter.HookParameterValue || "",
-    },
-  }));
   // const filteredHookGrants = HookGrants.filter(hg => hg.HookGrant.Authorize || hg.HookGrant.HookHash).map(hg => {
   //   return {
   //     HookGrant: {
@@ -110,18 +103,16 @@ export const deployHook = async (
             HookApiVersion: 0,
             Flags: 1,
             // ...(filteredHookGrants.length > 0 && { HookGrants: filteredHookGrants }),
-            ...(filteredHookParameters.length > 0 && {
+            ...(filteredHookParameters.length > 0 && { HookParameters: filteredHookParameters }),
-              HookParameters: filteredHookParameters,
+          }
-            }),
+        }
-          },
+      ]
-        },
-      ],
     };
 
     const keypair = derive.familySeed(account.secret);
     const { signedTransaction } = sign(tx, keypair);
     const currentAccount = state.accounts.find(
-      acc => acc.address === account.address
+      (acc) => acc.address === account.address
     );
     if (currentAccount) {
       currentAccount.isLoading = true;
@@ -140,31 +131,16 @@ export const deployHook = async (
         });
         state.deployLogs.push({
           type: "success",
-          message: ref(
+          message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`,
-            <>
-              [{submitRes.engine_result}] {submitRes.engine_result_message}{" "}
-              Validated ledger index:{" "}
-              <Link
-                as="a"
-                href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${submitRes.validated_ledger_index}`}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {submitRes.validated_ledger_index}
-              </Link>
-            </>
-          ),
-          // message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`,
         });
       } else {
         state.deployLogs.push({
           type: "error",
-          message: `[${submitRes.engine_result || submitRes.error}] ${
+          message: `[${submitRes.engine_result || submitRes.error}] ${submitRes.engine_result_message || submitRes.error_exception}`,
-            submitRes.engine_result_message || submitRes.error_exception
-          }`,
         });
       }
     } catch (err) {
+      console.log("Ebin")
       console.log(err);
       state.deployLogs.push({
         type: "error",
@@ -183,10 +159,10 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
     return;
   }
   const currentAccount = state.accounts.find(
-    acc => acc.address === account.address
+    (acc) => acc.address === account.address
   );
   if (currentAccount?.isLoading || !currentAccount?.hooks.length) {
-    return;
+    return
   }
   if (typeof window !== "undefined") {
     const tx = {
@@ -199,9 +175,9 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
           Hook: {
             CreateCode: "",
             Flags: 1,
-          },
+          }
-        },
+        }
-      ],
+      ]
     };
 
     const keypair = derive.familySeed(account.secret);
@@ -219,7 +195,7 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
       });
 
       if (submitRes.engine_result === "tesSUCCESS") {
-        toast.success("Hook deleted successfully ✅", { id: toastId });
+        toast.success('Hook deleted successfully ✅', { id: toastId })
         state.deployLogs.push({
           type: "success",
           message: "Hook deleted successfully ✅",
@@ -230,20 +206,15 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
         });
         currentAccount.hooks = [];
       } else {
-        toast.error(
+        toast.error(`${submitRes.engine_result_message || submitRes.error_exception}`, { id: toastId })
-          `${submitRes.engine_result_message || submitRes.error_exception}`,
-          { id: toastId }
-        );
         state.deployLogs.push({
           type: "error",
-          message: `[${submitRes.engine_result || submitRes.error}] ${
+          message: `[${submitRes.engine_result || submitRes.error}] ${submitRes.engine_result_message || submitRes.error_exception}`,
-            submitRes.engine_result_message || submitRes.error_exception
-          }`,
         });
       }
     } catch (err) {
       console.log(err);
-      toast.error("Error occured while deleting hoook", { id: toastId });
+      toast.error('Error occured while deleting hoook', { id: toastId })
       state.deployLogs.push({
         type: "error",
         message: "Error occured while deleting hook",

state/actions/fetchFiles.ts

@@ -2,6 +2,8 @@ import { Octokit } from "@octokit/core";
 import Router from "next/router";
 import state from '../index';
 import { templateFileIds } from '../constants';
+import { hookapiH, hookmacroH, sfcodesH } from '../constants/headerTemplates';
+
 
 const octokit = new Octokit();
 
@@ -18,30 +20,18 @@ export const fetchFiles = (gistId: string) => {
 
     octokit
       .request("GET /gists/{gist_id}", { gist_id: gistId })
-      .then(async res => {
+      .then(res => {
         if (!Object.values(templateFileIds).includes(gistId)) {
           return res
         }
         // in case of templates, fetch header file(s) and append to res
-        let resHeaderJson;
+        const files = {
-        try {
+          ...res.data.files,
-          const resHeader = await fetch(`${process.env.NEXT_PUBLIC_COMPILE_API_BASE_URL}/api/header-files`);
+          'hookapi.h': res.data.files?.['hookapi.h'] || { filename: 'hookapi.h', content: hookapiH, language: 'C' },
-          if (resHeader.ok) {
+          'hookmacro.h': res.data.files?.['hookmacro.h'] || { filename: 'hookmacro.h', content: hookmacroH, language: 'C' },
-            resHeaderJson = await resHeader.json();
+          'sfcodes.h': res.data.files?.['sfcodes.h'] || { filename: 'sfcodes.h', content: sfcodesH, language: 'C' },
-            const files = {
+        };
-              ...res.data.files,
+        res.data.files = 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 } }) => {

state/actions/importAccount.ts

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

@@ -39,10 +39,9 @@ export interface IAccount {
 
 export interface ILog {
   type: "error" | "warning" | "log" | "success";
-  message: string | JSX.Element;
+  message: string;
-  key?: string;
   jsonData?: any,
-  timestring?: string;
+  timestamp?: string;
   link?: string;
   linkText?: string;
   defaultCollapsed?: boolean
@@ -160,5 +159,3 @@ if (typeof window !== "undefined") {
   });
 }
 export default state
-
-export * from './transactions'

state/transactions.ts

@@ -1,59 +0,0 @@
-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/languageClient.ts

@@ -1,5 +1,5 @@
 import { MessageConnection } from "@codingame/monaco-jsonrpc";
-import { MonacoLanguageClient, ErrorAction, CloseAction, createConnection } from "@codingame/monaco-languageclient";
+import { CloseAction, createConnection, ErrorAction, MonacoLanguageClient } from "@codingame/monaco-languageclient";
 import Router from "next/router";
 import normalizeUrl from "normalize-url";
 import ReconnectingWebSocket from "reconnecting-websocket";
@@ -37,7 +37,7 @@ export function createUrl(path: string): string {
   return normalizeUrl(`${protocol}://${location.host}${location.pathname}${path}`);
 }
 
-export function createWebSocket(url: string) {
+export function createWebSocket(url: string): ReconnectingWebSocket {
   const socketOptions = {
     maxReconnectionDelay: 10000,
     minReconnectionDelay: 1000,

utils/object.ts

@@ -1,24 +0,0 @@
-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';
-}