First draft of debug stream

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;