Merge branch 'test-page' into transactions

components/Accounts.tsx

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

components/DebugStream.tsx

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

components/LogText.tsx

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

components/Select.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { gray, grayDark } from "@radix-ui/colors";
+import { mauve, mauveDark } from "@radix-ui/colors";
 import { useTheme } from "next-themes";
 import { styled } from '../stitches.config';
 import dynamic from 'next/dynamic';
@@ -11,11 +11,11 @@ const Select: FC<Props> = props => {
   const isDark = theme === "dark";
   const colors: any = {
     // primary: pink.pink9,
-    primary: isDark ? grayDark.gray4 : gray.gray4,
+    primary: isDark ? mauveDark.mauve4 : mauve.mauve4,
-    secondary: isDark ? grayDark.gray8 : gray.gray8,
+    secondary: isDark ? mauveDark.mauve8 : mauve.mauve8,
-    background: isDark ? "rgb(10, 10, 10)" : "rgb(244, 244, 244)",
+    background: isDark ? "rgb(10, 10, 10)" : "rgb(245, 245, 245)",
-    searchText: isDark ? grayDark.gray12 : gray.gray12,
+    searchText: isDark ? mauveDark.mauve12 : mauve.mauve12,
-    placeholder: isDark ? grayDark.gray11 : gray.gray11,
+    placeholder: isDark ? mauveDark.mauve11 : mauve.mauve11,
   };
   colors.outline = colors.background;
   colors.selected = colors.secondary;

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

@@ -7,10 +7,6 @@ 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,
 });
@@ -286,12 +282,8 @@ const Test = () => {
   const snap = useSnapshot(state);
   return (
     <Container css={{ py: "$3", px: 0 }}>
-      <Flex
+      <Flex row fluid css={{ justifyContent: 'center', mb: "$2", height: '40vh', minHeight: '300px', p: '$3 $2' }}>
-        row
+        <Box css={{ width: "55%", px: "$2" }}>
-        fluid
-        css={{ justifyContent: "center", mb: "$2", height: "40vh", minHeight: "300px", p: "$3 $2" }}
-      >
-        <Box css={{ width: "60%", px: "$2", maxWidth: "800px", height: "100%", overflow: "auto" }}>
           <Tabs>
             {/* TODO Dynamic tabs */}
             <Tab header="test1.json">
@@ -302,7 +294,7 @@ const Test = () => {
             </Tab>
           </Tabs>
         </Box>
-        <Box css={{ width: "40%", mx: "$2", height: "100%", maxWidth: "750px" }}>
+        <Box css={{ width: "45%", mx: "$2", height: '100%' }}>
           <Accounts card hideDeployBtn showHookStats />
         </Box>
       </Flex>
@@ -310,13 +302,13 @@ const Test = () => {
       <Flex row fluid css={{ borderBottom: "1px solid $mauve8" }}>
         <Box css={{ width: "50%", borderRight: "1px solid $mauve8" }}>
           <LogBox
-            title="Development Log"
+            title="From Log"
             logs={snap.transactionLogs}
             clearLog={() => (state.transactionLogs = [])}
           />
         </Box>
         <Box css={{ width: "50%" }}>
-          <DebugStream />
+          <LogBox title="To Log" logs={[]} clearLog={() => {}} />
         </Box>
       </Flex>
     </Container>

state/index.ts

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

stitches.config.ts

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