Fast scroll button, search function on logs box

src/renderer/components/modal/swap/pages/DebugPage.tsx

@@ -28,7 +28,7 @@ export default function DebugPage() {
             data={cliState}
             label="Swap Daemon State (exposed via API)"
           />
-          <CliLogsBox label="Tor Daemon Logs" logs={[torStdOut]} />
+          <CliLogsBox label="Tor Daemon Logs" logs={torStdOut.split('\n')} />
         </Box>
       </DialogContentText>
     </Box>

src/renderer/components/other/ExpandableSearchBox.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Box, IconButton, TextField } from '@material-ui/core';
+import SearchIcon from '@material-ui/icons/Search';
+import CloseIcon from '@material-ui/icons/Close';
+
+export function ExpandableSearchBox({
+  query,
+  setQuery,
+}: {
+  query: string;
+  setQuery: (query: string) => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <Box display="flex" justifyContent="center">
+      <Box display="flex" alignItems="center" gap="0.5rem">
+        {expanded ? (
+          <>
+            <TextField
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              autoFocus
+              size="small"
+            />
+            <IconButton
+              onClick={() => {
+                setExpanded(false);
+                setQuery('');
+              }}
+              size="small"
+            >
+              <CloseIcon />
+            </IconButton>
+          </>
+        ) : (
+          <IconButton onClick={() => setExpanded(true)} size="small">
+            <SearchIcon />
+          </IconButton>
+        )}
+      </Box>
+    </Box>
+  );
+}

src/renderer/components/other/RenderedCliLog.tsx

@@ -1,4 +1,5 @@
 import { Box, Chip, Typography } from '@material-ui/core';
+import { useMemo, useState } from 'react';
 import { CliLog } from '../../../models/cliModel';
 import { logsToRawString } from '../../../utils/parseUtils';
 import ScrollablePaperTextBox from './ScrollablePaperTextBox';
@@ -61,9 +62,25 @@ export default function CliLogsBox({
   label: string;
   logs: (CliLog | string)[];
 }) {
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  const memoizedLogs = useMemo(() => {
+    if (searchQuery.length === 0) {
+      return logs;
+    }
+    return logs.filter((log) =>
+      JSON.stringify(log).toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [logs, searchQuery]);
+
   return (
-    <ScrollablePaperTextBox title={label} copyValue={logsToRawString(logs)}>
-      {logs.map((log) =>
+    <ScrollablePaperTextBox
+      title={label}
+      copyValue={logsToRawString(logs)}
+      searchQuery={searchQuery}
+      setSearchQuery={setSearchQuery}
+    >
+      {memoizedLogs.map((log) =>
         typeof log === 'string' ? (
           <Typography component="pre">{log}</Typography>
         ) : (

src/renderer/components/other/ScrollablePaperTextBox.tsx

@@ -1,19 +1,52 @@
-import { Box, Button, Divider, Paper, Typography } from '@material-ui/core';
-import { ReactNode } from 'react';
+import {
+  Box,
+  Button,
+  Divider,
+  IconButton,
+  Paper,
+  Typography,
+} from '@material-ui/core';
+import { ReactNode, useRef } from 'react';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import { ExpandableSearchBox } from './ExpandableSearchBox';
 
 export default function ScrollablePaperTextBox({
   children,
   title,
   copyValue,
+  searchQuery,
+  setSearchQuery,
 }: {
   children: ReactNode;
   title: string;
   copyValue: string;
+  searchQuery: string | undefined;
+  setSearchQuery: (query: string) => void | undefined;
 }) {
+  const bottomScrollEl = useRef<HTMLDivElement | null>(null);
+  const topScrollEl = useRef<HTMLDivElement | null>(null);
+
   function onCopy() {
     navigator.clipboard.writeText(copyValue);
   }
 
+  function scrollToBottom() {
+    bottomScrollEl.current?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'start',
+    });
+  }
+
+  function scrollToTop() {
+    topScrollEl.current?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'start',
+    });
+  }
+
   return (
     <Paper
       variant="outlined"
@@ -32,17 +65,29 @@ export default function ScrollablePaperTextBox({
           overflow: 'auto',
           whiteSpace: 'nowrap',
           maxHeight: '10rem',
+          minHeight: '10rem',
           display: 'flex',
           flexDirection: 'column',
           gap: '0.5rem',
         }}
       >
+        <div ref={topScrollEl} />
         {children}
+        <div ref={bottomScrollEl} />
       </Box>
-      <Box>
+      <Box style={{ display: 'flex', gap: '0.5rem' }}>
         <Button variant="outlined" onClick={onCopy}>
           Copy
         </Button>
+        <IconButton onClick={scrollToBottom} size="small">
+          <KeyboardArrowDownIcon />
+        </IconButton>
+        <IconButton onClick={scrollToTop} size="small">
+          <KeyboardArrowUpIcon />
+        </IconButton>
+        {searchQuery !== undefined && setSearchQuery !== undefined && (
+          <ExpandableSearchBox query={searchQuery} setQuery={setSearchQuery} />
+        )}
       </Box>
     </Paper>
   );

src/renderer/components/pages/help/TorInfoBox.tsx

@@ -37,7 +37,7 @@ export default function TorInfoBox() {
             below. If Tor is running, all traffic will be routed through it and
             the swap provider will not be able to see your IP address.
           </Typography>
-          <CliLogsBox label="Tor Daemon Logs" logs={[torStdOut]} />
+          <CliLogsBox label="Tor Daemon Logs" logs={torStdOut.split('\n')} />
         </Box>
       }
       additionalContent={