Add a todo

components/Accounts.tsx

@@ -27,7 +27,7 @@ const labelStyle = css({
   mb: "$0.5",
 });
 
-export const AccountDialog = ({
+const AccountDialog = ({
   activeAccountAddress,
   setActiveAccountAddress,
 }: {
@@ -364,7 +364,7 @@ const Accounts: FC<AccountProps> = props => {
                   <Text>{account.name} </Text>
                   <Text
                     css={{
-                      color: "$textMuted",
+                      color: "$mauve9",
                       wordBreak: "break-word",
                     }}
                   >

components/Button.tsx

@@ -66,12 +66,6 @@ export const StyledButton = styled("button", {
       },
     },
     variant: {
-      link: {
-        textDecoration: "underline",
-        fontSize: "inherit",
-        color: "$textMuted",
-        textUnderlineOffset: "2px",
-      },
       default: {
         backgroundColor: "$mauve12",
         boxShadow: "inset 0 0 0 1px $colors$mauve12",
@@ -87,7 +81,8 @@ export const StyledButton = styled("button", {
           boxShadow: "inset 0 0 0 1px $colors$mauve11",
         },
         "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$mauve12, inset 0 0 0 2px $colors$mauve12",
+          boxShadow:
+            "inset 0 0 0 1px $colors$mauve12, inset 0 0 0 2px $colors$mauve12",
         },
         '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
           {
@@ -142,11 +137,7 @@ export const StyledButton = styled("button", {
           },
       },
     },
-    muted: {
-      true: {
-        color: "$textMuted",
-      },
-    },
+
     outline: {
       true: {
         backgroundColor: "transparent",
@@ -236,16 +227,21 @@ export const StyledButton = styled("button", {
   },
 });
 
-const CustomButton: React.FC<React.ComponentProps<typeof StyledButton> & { as?: string }> =
-  React.forwardRef(({ children, as = "button", ...rest }, ref) => (
-    // @ts-expect-error
-    <StyledButton {...rest} ref={ref} as={as}>
-      <Flex as="span" css={{ gap: "$2", alignItems: "center" }} className="button-content">
-        {children}
-      </Flex>
-      {rest.isLoading && <Spinner css={{ position: "absolute" }} />}
-    </StyledButton>
-  ));
+const CustomButton: React.FC<
+  React.ComponentProps<typeof StyledButton> & { as?: string }
+> = React.forwardRef(({ children, as = "button", ...rest }, ref) => (
+  // @ts-expect-error
+  <StyledButton {...rest} ref={ref} as={as}>
+    <Flex
+      as="span"
+      css={{ gap: "$2", alignItems: "center" }}
+      className="button-content"
+    >
+      {children}
+    </Flex>
+    {rest.isLoading && <Spinner css={{ position: "absolute" }} />}
+  </StyledButton>
+));
 
 CustomButton.displayName = "CustomButton";
 

components/DebugStream.tsx

@@ -1,136 +1,84 @@
-import { useCallback, useEffect } from "react";
-import { proxy, ref, useSnapshot } from "valtio";
+import { useEffect, useState } from "react";
+import { useSnapshot } from "valtio";
 import { Select } from ".";
-import state, { ILog } from "../state";
-import { extractJSON } from "../utils/json";
+import state from "../state";
 import LogBox from "./LogBox";
-
-interface ISelect<T = string> {
-  label: string;
-  value: T;
-}
-
-const streamState = proxy({
-  selectedAccount: null as ISelect | null,
-  logs: [] as ILog[],
-  socket: undefined as WebSocket | undefined,
-});
+import Text from "./Text";
 
 const DebugStream = () => {
-  const { selectedAccount, logs, socket } = useSnapshot(streamState);
-  const { accounts } = useSnapshot(state);
+  const snap = useSnapshot(state);
 
-  const accountOptions = accounts.map(acc => ({
+  const accountOptions = snap.accounts.map(acc => ({
     label: acc.name,
     value: acc.address,
   }));
+  const [selectedAccount, setSelectedAccount] = useState<typeof accountOptions[0] | null>(null);
 
   const renderNav = () => (
     <>
+      <Text css={{ mx: "$2", fontSize: "inherit" }}>Account: </Text>
       <Select
-        instanceId="DSAccount"
+        instanceId="debugStreamAccount"
         placeholder="Select account"
         options={accountOptions}
         hideSelectedOptions
         value={selectedAccount}
-        onChange={acc => (streamState.selectedAccount = acc as any)}
-        css={{ width: "100%" }}
+        onChange={acc => setSelectedAccount(acc as any)}
+        css={{ width: "30%" }}
       />
     </>
   );
 
-  const prepareLog = useCallback((str: any): ILog => {
-    if (typeof str !== "string") throw Error("Unrecognized debug log stream!");
-
-    const match = str.match(/([\s\S]+(?:UTC|ISO|GMT[+|-]\d+))\ ?([\s\S]*)/m);
-    const [_, tm, msg] = match || [];
-
-    const extracted = extractJSON(msg);
-    const timestamp = isNaN(Date.parse(tm || ""))
-      ? tm
-      : new Date(tm).toLocaleTimeString();
-
-    const message = !extracted
-      ? msg
-      : msg.slice(0, extracted.start) + msg.slice(extracted.end + 1);
-
-    const jsonData = extracted
-      ? JSON.stringify(extracted.result, null, 2)
-      : undefined;
-
-    return {
-      type: "log",
-      message,
-      timestamp,
-      jsonData,
-      defaultCollapsed: true,
-    };
-  }, []);
-
   useEffect(() => {
     const account = selectedAccount?.value;
-    if (account && (!socket || !socket.url.endsWith(account))) {
-      socket?.close();
-      streamState.socket = ref(
-        new WebSocket(
-          `wss://hooks-testnet-debugstream.xrpl-labs.com/${account}`
-        )
-      );
-    } else if (!account && socket) {
-      socket.close();
-      streamState.socket = undefined;
+    if (!account) {
+      return;
     }
-  }, [selectedAccount?.value, socket]);
-
-  useEffect(() => {
-    const account = selectedAccount?.value;
-    const socket = streamState.socket;
-    if (!socket) return;
+    const socket = new WebSocket(`wss://hooks-testnet-debugstream.xrpl-labs.com/${account}`);
 
     const onOpen = () => {
-      streamState.logs = [];
-      streamState.logs.push({
+      state.debugLogs = [];
+      state.debugLogs.push({
         type: "success",
         message: `Debug stream opened for account ${account}`,
       });
     };
     const onError = () => {
-      streamState.logs.push({
+      state.debugLogs.push({
         type: "error",
-        message: "Something went wrong! Check your connection and try again.",
+        message: "Something went wrong in establishing connection!",
       });
-    };
-    const onClose = (e: CloseEvent) => {
-      streamState.logs.push({
-        type: "error",
-        message: `Connection was closed. [code: ${e.code}]`,
-      });
-      streamState.selectedAccount = null;
+      setSelectedAccount(null);
     };
     const onMessage = (event: any) => {
       if (!event.data) return;
-      streamState.logs.push(prepareLog(event.data));
+      state.debugLogs.push({
+        type: "log",
+        message: event.data,
+      });
     };
 
     socket.addEventListener("open", onOpen);
-    socket.addEventListener("close", onClose);
+    socket.addEventListener("close", onError);
     socket.addEventListener("error", onError);
     socket.addEventListener("message", onMessage);
 
     return () => {
       socket.removeEventListener("open", onOpen);
-      socket.removeEventListener("close", onClose);
+      socket.removeEventListener("close", onError);
       socket.removeEventListener("message", onMessage);
-      socket.removeEventListener("error", onError);
+
+      socket.close();
     };
-  }, [prepareLog, selectedAccount?.value, socket]);
+  }, [selectedAccount]);
+
   return (
     <LogBox
       enhanced
       renderNav={renderNav}
       title="Debug stream"
-      logs={logs}
-      clearLog={() => (streamState.logs = [])}
+      logs={snap.debugLogs}
+      clearLog={() => (state.debugLogs = [])}
     />
   );
 };

components/DeployEditor.tsx

@@ -1,12 +1,10 @@
-import React, { useRef, useState } from "react";
+import React, { useRef } from "react";
 import { useSnapshot, ref } from "valtio";
 import Editor, { loader } from "@monaco-editor/react";
 import type monaco from "monaco-editor";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
 import NextLink from "next/link";
-import ReactTimeAgo from "react-time-ago";
-import filesize from "filesize";
 
 import Box from "./Box";
 import Container from "./Container";
@@ -15,7 +13,8 @@ import light from "../theme/editor/xcode_default.json";
 import state from "../state";
 
 import EditorNavigation from "./EditorNavigation";
-import { Button, Text, Link, Flex } from ".";
+import Text from "./Text";
+import Link from "./Link";
 
 loader.config({
   paths: {
@@ -23,65 +22,11 @@ loader.config({
   },
 });
 
-const FILESIZE_BREAKPOINTS: [number, number] = [2 * 1024, 5 * 1024];
-
 const DeployEditor = () => {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
   const snap = useSnapshot(state);
   const router = useRouter();
   const { theme } = useTheme();
-
-  const [showContent, setShowContent] = useState(false);
-
-  const activeFile = snap.files[snap.active];
-  const compiledSize = activeFile?.compiledContent?.byteLength || 0;
-  const color =
-    compiledSize > FILESIZE_BREAKPOINTS[1]
-      ? "$error"
-      : compiledSize > FILESIZE_BREAKPOINTS[0]
-      ? "$warning"
-      : "$success";
-
-  const CompiledStatView = activeFile && (
-    <Flex
-      column
-      align="center"
-      css={{
-        fontSize: "$sm",
-        fontFamily: "$monospace",
-        textAlign: "center",
-      }}
-    >
-      <Flex row align="center">
-        <Text css={{ mr: "$1" }}>Compiled {activeFile.name.split(".")[0] + ".wasm"}</Text>
-        {activeFile?.lastCompiled && <ReactTimeAgo date={activeFile.lastCompiled} locale="en-US" />}
-        {activeFile.compiledContent?.byteLength && (
-          <Text css={{ ml: "$2", color }}>({filesize(activeFile.compiledContent.byteLength)})</Text>
-        )}
-      </Flex>
-      <Button variant="link" onClick={() => setShowContent(true)}>
-        View as WAT-file
-      </Button>
-    </Flex>
-  );
-  const NoContentView = !snap.loading && router.isReady && (
-    <Text
-      css={{
-        mt: "-60px",
-        fontSize: "$sm",
-        fontFamily: "$monospace",
-        maxWidth: "300px",
-        textAlign: "center",
-      }}
-    >
-      {`You haven't compiled any files yet, compile files on `}
-      <NextLink shallow href={`/develop/${router.query.slug}`} passHref>
-        <Link as="a">develop view</Link>
-      </NextLink>
-    </Text>
-  );
-  const isContent =
-    snap.files?.filter(file => file.compiledWatContent).length > 0 && router.isReady;
   return (
     <Box
       css={{
@@ -94,45 +39,60 @@ const DeployEditor = () => {
       }}
     >
       <EditorNavigation showWat />
-      <Container
-        css={{
-          display: "flex",
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        {!isContent ? (
-          NoContentView
-        ) : !showContent ? (
-          CompiledStatView
-        ) : (
-          <Editor
-            className="hooks-editor"
-            defaultLanguage={snap.files?.[snap.active]?.language}
-            language={snap.files?.[snap.active]?.language}
-            path={`file://tmp/c/${snap.files?.[snap.active]?.name}.wat`}
-            value={snap.files?.[snap.active]?.compiledWatContent || ""}
-            beforeMount={monaco => {
-              if (!state.editorCtx) {
-                state.editorCtx = ref(monaco.editor);
-                // @ts-expect-error
-                monaco.editor.defineTheme("dark", dark);
-                // @ts-expect-error
-                monaco.editor.defineTheme("light", light);
-              }
-            }}
-            onMount={(editor, monaco) => {
-              editorRef.current = editor;
-              editor.updateOptions({
-                glyphMargin: true,
-                readOnly: true,
-              });
-            }}
-            theme={theme === "dark" ? "dark" : "light"}
-          />
-        )}
-      </Container>
+      {snap.files?.filter((file) => file.compiledWatContent).length > 0 &&
+      router.isReady ? (
+        <Editor
+          className="hooks-editor"
+          // keepCurrentModel
+          defaultLanguage={snap.files?.[snap.active]?.language}
+          language={snap.files?.[snap.active]?.language}
+          path={`file://tmp/c/${snap.files?.[snap.active]?.name}.wat`}
+          value={snap.files?.[snap.active]?.compiledWatContent || ""}
+          beforeMount={(monaco) => {
+            if (!state.editorCtx) {
+              state.editorCtx = ref(monaco.editor);
+              // @ts-expect-error
+              monaco.editor.defineTheme("dark", dark);
+              // @ts-expect-error
+              monaco.editor.defineTheme("light", light);
+            }
+          }}
+          onMount={(editor, monaco) => {
+            editorRef.current = editor;
+            editor.updateOptions({
+              glyphMargin: true,
+              readOnly: true,
+            });
+          }}
+          theme={theme === "dark" ? "dark" : "light"}
+        />
+      ) : (
+        <Container
+          css={{
+            display: "flex",
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {!snap.loading && router.isReady && (
+            <Text
+              css={{
+                mt: "-60px",
+                fontSize: "14px",
+                fontFamily: "$monospace",
+                maxWidth: "300px",
+                textAlign: "center",
+              }}
+            >
+              {`You haven't compiled any files yet, compile files on `}
+              <NextLink shallow href={`/develop/${router.query.slug}`} passHref>
+                <Link as="a">develop view</Link>
+              </NextLink>
+            </Text>
+          )}
+        </Container>
+      )}
     </Box>
   );
 };

components/EditorNavigation.tsx

@@ -62,7 +62,7 @@ import { styled } from "../stitches.config";
 const DEFAULT_EXTENSION = ".c";
 
 const ErrorText = styled(Text, {
-  color: "$error",
+  color: "$crimson9",
   mt: "$1",
   display: "block",
 });

components/Flex.tsx

@@ -16,37 +16,9 @@ const Flex = styled(Box, {
     },
     fluid: {
       true: {
-        width: "100%",
-      },
-    },
-    align: {
-      start: {
-        alignItems: "start",
-      },
-      center: {
-        alignItems: "center",
-      },
-      end: {
-        alignItems: "end",
-      },
-    },
-    justify: {
-      start: {
-        justifyContent: "start",
-      },
-      center: {
-        justifyContent: "center",
-      },
-      end: {
-        justifyContent: "end",
-      },
-      "space-between": {
-        justifyContent: "space-between",
-      },
-      "space-around": {
-        justifyContent: "space-around",
-      },
-    },
+        width: '100%'
+      }
+    }
   },
 });
 

components/Link.tsx

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

components/LogBox.tsx

@@ -1,15 +1,17 @@
-import { useRef, useLayoutEffect, ReactNode, FC, useState, useCallback } from "react";
+import React, { useRef, useLayoutEffect, ReactNode } from "react";
 import { Notepad, Prohibit } from "phosphor-react";
 import useStayScrolled from "react-stay-scrolled";
 import NextLink from "next/link";
 
 import Container from "./Container";
+import Box from "./Box";
+import Flex from "./Flex";
 import LogText from "./LogText";
-import state, { ILog } from "../state";
-import { Pre, Link, Heading, Button, Text, Flex, Box } from ".";
-import regexifyString from "regexify-string";
-import { useSnapshot } from "valtio";
-import { AccountDialog } from "./Accounts";
+import { ILog } from "../state";
+import Text from "./Text";
+import Button from "./Button";
+import Heading from "./Heading";
+import Link from "./Link";
 
 interface ILogBox {
   title: string;
@@ -19,7 +21,14 @@ interface ILogBox {
   enhanced?: boolean;
 }
 
-const LogBox: FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhanced }) => {
+const LogBox: React.FC<ILogBox> = ({
+  title,
+  clearLog,
+  logs,
+  children,
+  renderNav,
+  enhanced,
+}) => {
   const logRef = useRef<HTMLPreElement>(null);
   const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
 
@@ -46,7 +55,6 @@ const LogBox: FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhan
         }}
       >
         <Flex
-          fluid
           css={{
             height: "48px",
             alignItems: "center",
@@ -70,15 +78,7 @@ const LogBox: FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhan
           >
             <Notepad size="15px" /> <Text css={{ lineHeight: 1 }}>{title}</Text>
           </Heading>
-          <Flex
-            row
-            align="center"
-            css={{
-              width: "50%", // TODO make it max without breaking layout!
-            }}
-          >
-            {renderNav?.()}
-          </Flex>
+          {renderNav?.()}
           <Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
             {clearLog && (
               <Button ghost size="xs" onClick={clearLog}>
@@ -117,11 +117,17 @@ const LogBox: FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhan
                     backgroundColor: enhanced ? "$backgroundAlt" : undefined,
                   },
                 },
-                p: enhanced ? "$1" : undefined,
-                my: enhanced ? "$1" : undefined,
+                p: enhanced ? "$2 $1" : undefined,
               }}
             >
-              <Log {...log} />
+              <LogText variant={log.type}>
+                {log.message}{" "}
+                {log.link && (
+                  <NextLink href={log.link} shallow passHref>
+                    <Link as="a">{log.linkText}</Link>
+                  </NextLink>
+                )}
+              </LogText>
             </Box>
           ))}
           {children}
@@ -131,74 +137,4 @@ const LogBox: FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhan
   );
 };
 
-export const Log: FC<ILog> = ({
-  type,
-  timestamp: timestamp,
-  message: _message,
-  link,
-  linkText,
-  defaultCollapsed,
-  jsonData: _jsonData,
-}) => {
-  const [expanded, setExpanded] = useState(!defaultCollapsed);
-  const { accounts } = useSnapshot(state);
-  const [dialogAccount, setDialogAccount] = useState<string | null>(null);
-
-  const enrichAccounts = useCallback(
-    (str?: string): ReactNode => {
-      if (!str || !accounts.length) return null;
-
-      const pattern = `(${accounts.map(acc => acc.address).join("|")})`;
-      const res = regexifyString({
-        pattern: new RegExp(pattern, "gim"),
-        decorator: (match, idx) => {
-          const name = accounts.find(acc => acc.address === match)?.name;
-          return (
-            <Link
-              key={match + idx}
-              as="a"
-              onClick={() => setDialogAccount(match)}
-              title={match}
-              highlighted
-            >
-              {name || match}
-            </Link>
-          );
-        },
-        input: str,
-      });
-
-      return <>{res}</>;
-    },
-    [accounts]
-  );
-  _message = _message.trim().replace(/\n /gi, "\n");
-  const message = enrichAccounts(_message);
-  const jsonData = enrichAccounts(_jsonData);
-
-  return (
-    <>
-      <AccountDialog
-        setActiveAccountAddress={setDialogAccount}
-        activeAccountAddress={dialogAccount}
-      />
-      <LogText variant={type}>
-        {timestamp && <Text muted monospace>{timestamp} </Text>}
-        <Pre>{message} </Pre>
-        {link && (
-          <NextLink href={link} shallow passHref>
-            <Link as="a">{linkText}</Link>
-          </NextLink>
-        )}
-        {jsonData && (
-          <Link onClick={() => setExpanded(!expanded)} as="a">
-            {expanded ? "Collapse" : "Expand"}
-          </Link>
-        )}
-        {expanded && jsonData && <Pre block>{jsonData}</Pre>}
-      </LogText>
-    </>
-  );
-};
-
 export default LogBox;

components/LogText.tsx

@@ -11,13 +11,13 @@ const Text = styled("span", {
         color: "$text",
       },
       warning: {
-        color: "$warning",
+        color: "$amber11",
       },
       error: {
-        color: "$error",
+        color: "$crimson11",
       },
       success: {
-        color: "$success",
+        color: "$grass11",
       },
     },
     capitalize: {

components/Pre.tsx

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

components/Tabs.tsx

@@ -19,7 +19,7 @@ import { Plus, X } from "phosphor-react";
 import { styled } from "../stitches.config";
 
 const ErrorText = styled(Text, {
-  color: "$error",
+  color: "$crimson9",
   mt: "$1",
   display: "block",
 });

components/Text.tsx

@@ -14,11 +14,6 @@ const Text = styled("span", {
       true: {
         color: '$mauve9'
       }
-    },
-    monospace: {
-      true: {
-        fontFamily: '$monospace'
-      }
     }
   }
 });

components/index.tsx

@@ -1,17 +1,15 @@
-export { default as Flex } from "./Flex";
-export { default as Link } from "./Link";
-export { default as Container } from "./Container";
-export { default as Heading } from "./Heading";
-export { default as Stack } from "./Stack";
-export { default as Text } from "./Text";
-export { default as Input } from "./Input";
-export { default as Select } from "./Select";
-export * from "./Tabs";
-export * from "./AlertDialog";
-export { default as Box } from "./Box";
-export { default as Button } from "./Button";
-export { default as Pre } from "./Pre";
-export { default as ButtonGroup } from "./ButtonGroup";
-export { default as DeployFooter } from "./DeployFooter";
-export * from "./Dialog";
-export * from "./DropdownMenu";
+export { default as Flex } from './Flex'
+export { default as Container } from './Container'
+export { default as Heading } from './Heading'
+export { default as Stack } from './Stack'
+export { default as Text } from './Text'
+export { default as Input } from './Input'
+export { default as Select } from './Select'
+export * from './Tabs'
+export * from './AlertDialog'
+export { default as Box } from './Box'
+export { default as Button } from './Button'
+export { default as ButtonGroup } from './ButtonGroup'
+export { default as DeployFooter } from './DeployFooter'
+export * from './Dialog'
+export * from './DropdownMenu'

package.json

@@ -23,8 +23,6 @@
     "base64-js": "^1.5.1",
     "dinero.js": "^1.9.1",
     "file-saver": "^2.0.5",
-    "filesize": "^8.0.7",
-    "javascript-time-ago": "^2.3.11",
     "jszip": "^3.7.1",
     "monaco-editor": "^0.30.1",
     "next": "^12.0.4",
@@ -45,9 +43,7 @@
     "react-select": "^5.2.1",
     "react-split": "^2.0.14",
     "react-stay-scrolled": "^7.4.0",
-    "react-time-ago": "^7.1.9",
     "reconnecting-websocket": "^4.4.0",
-    "regexify-string": "^1.0.17",
     "valtio": "^1.2.5",
     "vscode-languageserver": "^7.0.0",
     "vscode-uri": "^3.0.2",
@@ -64,4 +60,4 @@
     "eslint-config-next": "11.1.2",
     "typescript": "4.4.4"
   }
-}
+}

pages/_app.tsx

@@ -13,10 +13,6 @@ import Navigation from "../components/Navigation";
 import { fetchFiles } from "../state/actions";
 import state from "../state";
 
-import TimeAgo from "javascript-time-ago";
-import en from "javascript-time-ago/locale/en.json";
-TimeAgo.addDefaultLocale(en);
-
 function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   const router = useRouter();
   const slug = router.query?.slug;

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

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

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

@@ -1,14 +1,15 @@
-import dynamic from "next/dynamic";
-import { useSnapshot } from "valtio";
-import Hotkeys from "react-hot-keys";
-import { Play } from "phosphor-react";
-import Split from "react-split";
-
 import type { NextPage } from "next";
-import { compileCode } from "../../state/actions";
-import state from "../../state";
-import Button from "../../components/Button";
+import dynamic from "next/dynamic";
+import { Play } from "phosphor-react";
+import Hotkeys from "react-hot-keys";
+import Split from "react-split";
+import { useSnapshot } from "valtio";
 import Box from "../../components/Box";
+import Button from "../../components/Button";
+import state from "../../state";
+import { compileCode } from "../../state/actions";
+import { getSplit, saveSplit } from "../../state/actions/persistSplits";
+
 
 const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
   ssr: false,
@@ -24,11 +25,12 @@ const Home: NextPage = () => {
   return (
     <Split
       direction="vertical"
-      sizes={[70, 30]}
+      sizes={getSplit("developVertical") || [70, 30]}
       minSize={[100, 100]}
       gutterAlign="center"
       gutterSize={4}
       style={{ height: "calc(100vh - 60px)" }}
+      onDragEnd={(e) => saveSplit("developVertical", e)}
     >
       <main style={{ display: "flex", flex: 1, position: "relative" }}>
         <HooksEditor />

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

@@ -1,22 +1,17 @@
-import {
-  Container,
-  Flex,
-  Box,
-  Tabs,
-  Tab,
-  Input,
-  Select,
-  Text,
-  Button,
-} from "../../components";
-import { Play } from "phosphor-react";
 import dynamic from "next/dynamic";
-import { useSnapshot } from "valtio";
+import { Play } from "phosphor-react";
+import { FC, useCallback, useEffect, useState } from "react";
 import Split from "react-split";
+import { useSnapshot } from "valtio";
+import {
+  Box, Button, Container,
+  Flex, Input,
+  Select, Tab, Tabs, Text
+} from "../../components";
+import transactionsData from "../../content/transactions.json";
 import state from "../../state";
 import { sendTransaction } from "../../state/actions";
-import { useCallback, useEffect, useState, FC } from "react";
-import transactionsData from "../../content/transactions.json";
+import { getSplit, saveSplit } from "../../state/actions/persistSplits";
 
 const DebugStream = dynamic(() => import("../../components/DebugStream"), {
   ssr: false,
@@ -349,16 +344,17 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
 };
 
 const Test = () => {
-  const snap = useSnapshot(state);
+  const { transactionLogs } = useSnapshot(state);
   const [tabHeaders, setTabHeaders] = useState<string[]>(["test1.json"]);
   return (
     <Container css={{ px: 0 }}>
       <Split
         direction="vertical"
-        sizes={[50, 50]}
+        sizes={getSplit("testVertical") || [50, 50]}
         gutterSize={4}
         gutterAlign="center"
         style={{ height: "calc(100vh - 60px)" }}
+        onDragEnd={(e) => saveSplit("testVertical", e)}
       >
         <Flex
           row
@@ -370,7 +366,7 @@ const Test = () => {
         >
           <Split
             direction="horizontal"
-            sizes={[50, 50]}
+            sizes={getSplit("testHorizontal") || [50, 50]}
             minSize={[180, 320]}
             gutterSize={4}
             gutterAlign="center"
@@ -380,6 +376,7 @@ const Test = () => {
               width: "100%",
               height: "100%",
             }}
+            onDragEnd={(e) => saveSplit("testHorizontal", e)}
           >
             <Box css={{ width: "55%", px: "$2" }}>
               <Tabs
@@ -428,7 +425,7 @@ const Test = () => {
             >
               <LogBox
                 title="Development Log"
-                logs={snap.transactionLogs}
+                logs={transactionLogs}
                 clearLog={() => (state.transactionLogs = [])}
               />
             </Box>

state/actions/compileCode.ts

@@ -66,7 +66,6 @@ export const compileCode = async (activeId: number) => {
     // Decode base64 encoded wasm that is coming back from the endpoint
     const bufferData = await decodeBinary(json.output);
     state.files[state.active].compiledContent = ref(bufferData);
-    state.files[state.active].lastCompiled = new Date();
     // Import wabt from and create human readable version of wasm file and
     // put it into state
     import("wabt").then((wabt) => {

state/actions/persistSplits.ts

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

state/index.ts

@@ -1,7 +1,8 @@
-import { proxy, ref, subscribe } from "valtio";
-import { devtools } from 'valtio/utils'
 import type monaco from "monaco-editor";
+import { proxy, ref, subscribe } from "valtio";
+import { devtools } from 'valtio/utils';
 import { XrplClient } from "xrpl-client";
+import { SplitSize } from "./actions/persistSplits";
 
 export interface IFile {
   name: string;
@@ -9,7 +10,6 @@ export interface IFile {
   content: string;
   compiledContent?: ArrayBuffer | null;
   compiledWatContent?: string | null;
-  lastCompiled?: Date
 }
 
 export interface FaucetAccountRes {
@@ -33,11 +33,8 @@ export interface IAccount {
 export interface ILog {
   type: "error" | "warning" | "log" | "success";
   message: string;
-  jsonData?: any,
-  timestamp?: string;
   link?: string;
   linkText?: string;
-  defaultCollapsed?: boolean
 }
 
 export interface IState {
@@ -54,10 +51,14 @@ export interface IState {
   logs: ILog[];
   deployLogs: ILog[];
   transactionLogs: ILog[];
+  debugLogs: ILog[];
   editorCtx?: typeof monaco.editor;
   editorSettings: {
     tabSize: number;
   };
+  splits: {
+    [id: string]: SplitSize
+  };
   client: XrplClient | null;
   clientStatus: "offline" | "online";
   mainModalOpen: boolean;
@@ -76,6 +77,7 @@ let initialState: IState = {
   logs: [],
   deployLogs: [],
   transactionLogs: [],
+  debugLogs: [],
   editorCtx: undefined,
   gistId: undefined,
   gistOwner: undefined,
@@ -85,6 +87,7 @@ let initialState: IState = {
   editorSettings: {
     tabSize: 2,
   },
+  splits: {},
   client: null,
   clientStatus: "offline" as "offline",
   mainModalOpen: false,
@@ -93,6 +96,9 @@ let initialState: IState = {
 
 let localStorageAccounts: string | null = null;
 let initialAccounts: IAccount[] = [];
+
+// TODO: What exactly should we store in localStorage? editorSettings, splits, accounts?
+
 // Check if there's a persited accounts in localStorage
 if (typeof window !== "undefined") {
   try {
@@ -141,4 +147,4 @@ if (typeof window !== "undefined") {
     }
   });
 }
-export default state
+export default state

stitches.config.ts

@@ -19,8 +19,6 @@ import {
   mauveDark,
   amberDark,
   purpleDark,
-  red,
-  redDark,
 } from "@radix-ui/colors";
 
 export const {
@@ -43,16 +41,11 @@ export const {
       ...mauve,
       ...amber,
       ...purple,
-      ...red,
       accent: "#9D2DFF",
       background: "$gray1",
       backgroundAlt: "$gray4",
       text: "$gray12",
-      textMuted: "$gray10",
       primary: "$plum",
-      error: '$red9',
-      warning: '$amber11',
-      success: "$grass11",
       white: "white",
       black: "black",
       deep: "rgb(244, 244, 244)",
@@ -355,7 +348,6 @@ export const darkTheme = createTheme("dark", {
     ...mauveDark,
     ...amberDark,
     ...purpleDark,
-    ...redDark,
     deep: "rgb(10, 10, 10)",
     // backgroundA: transparentize(0.1, grayDark.gray1),
   },

utils/json.ts

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

yarn.lock

@@ -2273,11 +2273,6 @@ file-uri-to-path@1.0.0:
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
   integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
 
-filesize@^8.0.7:
-  version "8.0.7"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-8.0.7.tgz#695e70d80f4e47012c132d57a059e80c6b580bd8"
-  integrity sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==
-
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -2838,13 +2833,6 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-javascript-time-ago@^2.3.11:
-  version "2.3.11"
-  resolved "https://registry.yarnpkg.com/javascript-time-ago/-/javascript-time-ago-2.3.11.tgz#b488ae765b7f42ff003f3830977a92411ef1fe92"
-  integrity sha512-R6Ux0IGv7RmAZ7vB04r/gevGaLDJeZY7+6jTYyYsPAF5x4PSv6up+dW2hLK99+OUY8xwdeXPItZFiUppIRUaoQ==
-  dependencies:
-    relative-time-format "^1.0.6"
-
 jest-worker@27.0.0-next.5:
   version "27.0.0-next.5"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.0-next.5.tgz#5985ee29b12a4e191f4aae4bb73b97971d86ec28"
@@ -3620,11 +3608,6 @@ pbkdf2@^3.0.3, pbkdf2@^3.0.9:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-performance-now@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
-
 phosphor-react@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/phosphor-react/-/phosphor-react-1.3.1.tgz#96e33f44370d83cda15b60cccc17087ad0060684"
@@ -3771,13 +3754,6 @@ queue@6.0.2:
   dependencies:
     inherits "~2.0.3"
 
-raf@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
-  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
-  dependencies:
-    performance-now "^2.1.0"
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -3913,15 +3889,6 @@ react-style-singleton@^2.1.0:
     invariant "^2.2.4"
     tslib "^1.0.0"
 
-react-time-ago@^7.1.9:
-  version "7.1.9"
-  resolved "https://registry.yarnpkg.com/react-time-ago/-/react-time-ago-7.1.9.tgz#df3999f1184b71ab09aaf1d05dda2a19b76e0bb8"
-  integrity sha512-jN4EsEgqm3a5eLJV0ZrRpom3iG+w4bullS2NHc2htIucGUIr2FbgHXjU0wIkuN9uWM87aFvIfkUDpS/ju7Mazg==
-  dependencies:
-    memoize-one "^6.0.0"
-    prop-types "^15.7.2"
-    raf "^3.4.1"
-
 react-transition-group@^4.3.0:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -3989,11 +3956,6 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
-regexify-string@^1.0.17:
-  version "1.0.17"
-  resolved "https://registry.yarnpkg.com/regexify-string/-/regexify-string-1.0.17.tgz#b9e571b51c8ec566eb82b7121744dae0d8e829de"
-  integrity sha512-mmD0AUNaY/piGW2AyACWdQOjIAwNuWz+KIvxfBZPDdCBAexiROeQxdxTaYAWcIxwtUAOwojdTta6CMMil84jXw==
-
 regexp.prototype.flags@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
@@ -4007,11 +3969,6 @@ regexpp@^3.1.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-relative-time-format@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/relative-time-format/-/relative-time-format-1.0.6.tgz#4956f6aa161f63cbab8a7f2d8b2e92d7b6a888a3"
-  integrity sha512-voemOJLxlKun4P1fAo4PEg2WXNGjhqfE/G8Xen4gcy24Hyu/djn5bT5axmhx4MnjynoZ8f0HCOjk3RZpsY6X/g==
-
 require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"