87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
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;
|