First draft of debug stream

components/Accounts.tsx

@@ -350,7 +350,7 @@ const Accounts: FC<AccountProps> = props => {
                 borderBottom: props.card ? "1px solid $mauve6" : undefined,
                 "@hover": {
                   "&:hover": {
-                    background: "$mauve3",
+                    background: "$backgroundAlt",
                   },
                 },
               }}

components/DebugStream.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import { useSnapshot } from "valtio";
+import { Select } from ".";
+import state from "../state";
+import LogBox from "./LogBox";
+import Text from "./Text";
+
+const DebugStream = () => {
+  const snap = useSnapshot(state);
+
+  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="debugStreamAccount"
+        placeholder="Select account"
+        options={accountOptions}
+        hideSelectedOptions
+        value={selectedAccount}
+        onChange={acc => setSelectedAccount(acc as any)}
+        css={{ width: "30%" }}
+      />
+    </>
+  );
+
+  useEffect(() => {
+    const account = selectedAccount?.value;
+    if (!account) {
+      return;
+    }
+    const socket = new WebSocket(`wss://hooks-testnet-debugstream.xrpl-labs.com/${account}`);
+
+    const onOpen = () => {
+      state.debugLogs = [];
+      state.debugLogs.push({
+        type: "success",
+        message: `Debug stream opened for account ${account}`,
+      });
+    };
+    const onError = () => {
+      state.debugLogs.push({
+        type: "error",
+        message: "Something went wrong in establishing connection!",
+      });
+      setSelectedAccount(null);
+    };
+    const onMessage = (event: any) => {
+      if (!event.data) return;
+      state.debugLogs.push({
+        type: "log",
+        message: event.data,
+      });
+    };
+
+    socket.addEventListener("open", onOpen);
+    socket.addEventListener("close", onError);
+    socket.addEventListener("error", onError);
+    socket.addEventListener("message", onMessage);
+
+    return () => {
+      socket.removeEventListener("open", onOpen);
+      socket.removeEventListener("close", onError);
+      socket.removeEventListener("message", onMessage);
+
+      socket.close();
+    };
+  }, [selectedAccount]);
+
+  return (
+    <LogBox
+      enhanced
+      renderNav={renderNav}
+      title="Debug stream"
+      logs={snap.debugLogs}
+      clearLog={() => (state.debugLogs = [])}
+    />
+  );
+};
+
+export default DebugStream;

components/LogBox.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useLayoutEffect } 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";
@@ -17,9 +17,11 @@ interface ILogBox {
   title: string;
   clearLog?: () => void;
   logs: ILog[];
+  renderNav?: () => ReactNode;
+  enhanced?: boolean;
 }
 
-const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
+const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhanced }) => {
   const logRef = useRef<HTMLPreElement>(null);
   const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
 
@@ -39,7 +41,7 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
       }}
     >
       <Container css={{ px: 0, flexShrink: 1 }}>
-        <Flex css={{ py: "$3" }}>
+        <Flex css={{ py: "$3", alignItems: "center", fontSize: "$sm", fontWeight: 300 }}>
           <Heading
             as="h3"
             css={{
@@ -56,6 +58,7 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
           >
             <Notepad size="15px" /> <Text css={{ lineHeight: 1 }}>{title}</Text>
           </Heading>
+          {renderNav?.()}
           <Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
             {clearLog && (
               <Button ghost size="xs" onClick={clearLog}>
@@ -84,10 +87,18 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
           }}
         >
           {logs?.map((log, index) => (
-            <Box as="span" key={log.type + index}>
+            <Box
-              {/* <LogText capitalize variant={log.type}>
+              as="span"
-                {log.type}:{" "}
+              key={log.type + index}
-              </LogText> */}
+              css={{
+                "@hover": {
+                  "&:hover": {
+                    backgroundColor: enhanced ? "$backgroundAlt" : undefined,
+                  },
+                },
+                p: "$2 $1",
+              }}
+            >
               <LogText variant={log.type}>
                 {log.message}{" "}
                 {log.link && (

components/LogText.tsx

@@ -4,6 +4,7 @@ const Text = styled("span", {
   fontFamily: "$monospace",
   lineHeight: "$body",
   color: "$text",
+  wordWrap: 'break-word',
   variants: {
     variant: {
       log: {

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

@@ -7,6 +7,10 @@ import { sendTransaction } from "../../state/actions";
 import { useCallback, useEffect, useState } from "react";
 import transactionsData from "../../content/transactions.json";
 
+const DebugStream = dynamic(() => import("../../components/DebugStream"), {
+  ssr: false,
+});
+
 const LogBox = dynamic(() => import("../../components/LogBox"), {
   ssr: false,
 });
@@ -306,13 +310,13 @@ const Test = () => {
       <Flex row fluid css={{ borderBottom: "1px solid $mauve8" }}>
         <Box css={{ width: "50%", borderRight: "1px solid $mauve8" }}>
           <LogBox
-            title="From Log"
+            title="Development Log"
             logs={snap.transactionLogs}
             clearLog={() => (state.transactionLogs = [])}
           />
         </Box>
         <Box css={{ width: "50%" }}>
-          <LogBox title="To Log" logs={[]} clearLog={() => {}} />
+          <DebugStream />
         </Box>
       </Flex>
     </Container>

state/index.ts

@@ -50,6 +50,7 @@ export interface IState {
   logs: ILog[];
   deployLogs: ILog[];
   transactionLogs: ILog[];
+  debugLogs: ILog[];
   editorCtx?: typeof monaco.editor;
   editorSettings: {
     tabSize: number;
@@ -72,6 +73,7 @@ let initialState: IState = {
   logs: [],
   deployLogs: [],
   transactionLogs: [],
+  debugLogs: [],
   editorCtx: undefined,
   gistId: undefined,
   gistOwner: undefined,

stitches.config.ts

@@ -1,6 +1,7 @@
 // stitches.config.ts
 import type Stitches from '@stitches/react';
 import { createStitches } from '@stitches/react';
+
 import {
   gray,
   blue,
@@ -47,6 +48,7 @@ export const {
       ...yellow,
       ...purple,
       background: "$gray1",
+      backgroundAlt: "$gray4",
       text: "$gray12",
       primary: "$plum",
       white: "white",
@@ -304,7 +306,8 @@ export const darkTheme = createTheme('dark', {
     ...pinkDark,
     ...yellowDark,
     ...purpleDark,
-    deep: 'rgb(10, 10, 10)'
+    deep: 'rgb(10, 10, 10)',
+    // backgroundA: transparentize(0.1, grayDark.gray1),
   },
 });