feat(gui): Review logs before sending feedback (#301)

* add review buttons that open the attached logs before submitting feedback
* add redact switches to redact transaction id's from attached logs

src-gui/src/models/cliModel.ts

@@ -53,7 +53,7 @@ export function parseCliLogString(log: string): CliLog | string {
   try {
     const parsed = JSON.parse(log);
     if (isCliLog(parsed)) {
-      return parsed;
+      return parsed as CliLog;
     } else {
       return log;
     }
@@ -61,3 +61,4 @@ export function parseCliLogString(log: string): CliLog | string {
     return log;
   }
 }
+

src-gui/src/renderer/components/modal/feedback/FeedbackDialog.tsx

@@ -7,50 +7,49 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
-  FormControl,
   FormControlLabel,
+  IconButton,
   MenuItem,
   Paper,
   Select,
+  Switch,
   TextField,
+  Tooltip,
+  Typography,
 } from "@material-ui/core";
 import { useSnackbar } from "notistack";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import TruncatedText from "renderer/components/other/TruncatedText";
 import { store } from "renderer/store/storeRenderer";
 import { useActiveSwapInfo, useAppSelector } from "store/hooks";
-import { parseDateString } from "utils/parseUtils";
+import { logsToRawString, parseDateString } from "utils/parseUtils";
 import { submitFeedbackViaHttp } from "../../../api";
 import LoadingButton from "../../other/LoadingButton";
 import { PiconeroAmount } from "../../other/Units";
-import { getLogsOfSwap } from "renderer/rpc";
+import { getLogsOfSwap, redactLogs } from "renderer/rpc";
 import logger from "utils/logger";
+import { Label, Visibility } from "@material-ui/icons";
+import CliLogsBox from "renderer/components/other/RenderedCliLog";
+import { CliLog, parseCliLogString } from "models/cliModel";
 
-async function submitFeedback(body: string, swapId: string | number, submitDaemonLogs: boolean) {
+async function submitFeedback(body: string, swapId: string | null, swapLogs: string | null, daemonLogs: string | null) {
   let attachedBody = "";
 
-  if (swapId !== 0 && typeof swapId === "string") {
+  if (swapId !== null) {
     const swapInfo = store.getState().rpc.state.swapInfos[swapId];
 
     if (swapInfo === undefined) {
       throw new Error(`Swap with id ${swapId} not found`);
     }
 
-    // Retrieve logs for the specific swap
+    attachedBody = `${JSON.stringify(swapInfo, null, 4)}\n\nLogs: ${swapLogs ?? ""}`;
-    const logs = await getLogsOfSwap(swapId, false);
-
-    attachedBody = `${JSON.stringify(swapInfo, null, 4)} \n\nLogs: ${logs.logs
-      .map((l) => JSON.stringify(l))
-      .join("\n====\n")}`;
   }
 
-  if (submitDaemonLogs) {
+  if (daemonLogs !== null) {
-    const logs = store.getState().rpc?.logs ?? [];
+    attachedBody += `\n\nDaemon Logs: ${daemonLogs ?? ""}`;
-    attachedBody += `\n\nDaemon Logs: ${logs
-      .map((l) => JSON.stringify(l))
-      .join("\n====\n")}`;
   }
 
+  console.log(`Sending feedback with attachement: \`\n${attachedBody}\``)
   await submitFeedbackViaHttp(body, attachedBody);
 }
 
@@ -58,14 +57,14 @@ async function submitFeedback(body: string, swapId: string | number, submitDaemo
  * This component is a dialog that allows the user to submit feedback to the
  * developers. The user can enter a message and optionally attach logs from a
  * specific swap.
- * selectedSwap = 0 means no swap is attached
+ * selectedSwap = null means no swap is attached
  */
 function SwapSelectDropDown({
   selectedSwap,
   setSelectedSwap,
 }: {
-  selectedSwap: string | number;
+  selectedSwap: string | null;
-  setSelectedSwap: (swapId: string | number) => void;
+  setSelectedSwap: (swapId: string | null) => void;
 }) {
   const swaps = useAppSelector((state) =>
     Object.values(state.rpc.state.swapInfos),
@@ -73,15 +72,16 @@ function SwapSelectDropDown({
 
   return (
     <Select
-      value={selectedSwap}
+      value={selectedSwap ?? ""}
-      label="Attach logs"
       variant="outlined"
-      onChange={(e) => setSelectedSwap(e.target.value as string)}
+      onChange={(e) => setSelectedSwap(e.target.value as string || null)}
+      style={{ width: "100%" }}
+      displayEmpty
     >
-      <MenuItem value={0}>Do not attach a swap</MenuItem>
+      <MenuItem value="">Do not attach a swap</MenuItem>
       {swaps.map((swap) => (
         <MenuItem value={swap.swap_id} key={swap.swap_id}>
-          Swap <TruncatedText>{swap.swap_id}</TruncatedText> from{" "}
+          Swap{" "}<TruncatedText>{swap.swap_id}</TruncatedText>{" "}from{" "}
           {new Date(parseDateString(swap.start_date)).toDateString()} (
           <PiconeroAmount amount={swap.xmr_amount} />)
         </MenuItem>
@@ -105,24 +105,92 @@ export default function FeedbackDialog({
 
   const { enqueueSnackbar } = useSnackbar();
 
-  const [selectedAttachedSwap, setSelectedAttachedSwap] = useState<
+  const [selectedSwap, setSelectedSwap] = useState<
-    string | number
+    string | null
-  >(currentSwapId?.swap_id || 0);
+  >(currentSwapId?.swap_id || null);
+  const [swapLogs, setSwapLogs] = useState<(string | CliLog)[] | null>(null);
   const [attachDaemonLogs, setAttachDaemonLogs] = useState(true);
 
+  const [daemonLogs, setDaemonLogs] = useState<(string | CliLog)[] | null>(null);
+
+  useEffect(() => {
+    // Reset logs if no swap is selected
+    if (selectedSwap === null) {
+      setSwapLogs(null);
+      return;
+    }
+
+    // Fetch the logs from the rust backend and update the state
+    getLogsOfSwap(selectedSwap, false).then((response) => setSwapLogs(response.logs.map(parseCliLogString)))
+  }, [selectedSwap]);
+
+  useEffect(() => {
+    if (attachDaemonLogs === false) {
+      setDaemonLogs(null);
+      return;
+    }
+
+    setDaemonLogs(store.getState().rpc?.logs)
+  }, [attachDaemonLogs]);
+
+  // Whether to display the log editor
+  const [swapLogsEditorOpen, setSwapLogsEditorOpen] = useState(false);
+  const [daemonLogsEditorOpen, setDaemonLogsEditorOpen] = useState(false);
+
   const bodyTooLong = bodyText.length > MAX_FEEDBACK_LENGTH;
 
+  const clearState = () => {
+    setBodyText("");
+    setAttachDaemonLogs(false);
+    setSelectedSwap(null);
+  }
+
+  const sendFeedback = async () => {
+    if (pending) {
+      return;
+    }
+
+    try {
+      setPending(true);
+      await submitFeedback(bodyText, selectedSwap, logsToRawString(swapLogs), logsToRawString(daemonLogs));
+      enqueueSnackbar("Feedback submitted successfully!", {
+        variant: "success",
+      });
+      clearState()
+    } catch (e) {
+      logger.error(`Failed to submit feedback: ${e}`);
+      enqueueSnackbar(`Failed to submit feedback (${e})`, {
+        variant: "error",
+      });
+    } finally {
+      setPending(false);
+    }
+    onClose();
+  }
+
+  const setSwapLogsRedacted = async (redact: boolean) => {
+    setSwapLogs((await getLogsOfSwap(selectedSwap, redact)).logs.map(parseCliLogString))
+  }
+
+  const setDaemonLogsRedacted = async (redact: boolean) => {
+    if (!redact)
+      return setDaemonLogs(store.getState().rpc?.logs)
+
+    const redactedLogs = await redactLogs(daemonLogs);
+    setDaemonLogs(redactedLogs)
+  }
+
   return (
     <Dialog open={open} onClose={onClose}>
       <DialogTitle>Submit Feedback</DialogTitle>
       <DialogContent>
-        <DialogContentText>
+        <ul>
-          Got something to say? Drop us a message below. If you had an issue
+          <li>Got something to say? Drop us a message below. </li>
-          with a specific swap, select it from the dropdown to attach the logs.
+          <li>If you had an issue with a specific swap, select it from the dropdown to attach the logs.
-          It will help us figure out what went wrong.
+            It will help us figure out what went wrong.
-          <br />
+          </li>
-          We appreciate you taking the time to share your thoughts! Every feedback is read by a core developer!
+          <li>We appreciate you taking the time to share your thoughts! Every message is read by a core developer!</li>
-        </DialogContentText>
+        </ul>
         <Box
           style={{
             display: "flex",
@@ -145,50 +213,61 @@ export default function FeedbackDialog({
             fullWidth
             error={bodyTooLong}
           />
-          <SwapSelectDropDown
+          <Box style={{
-            selectedSwap={selectedAttachedSwap}
+            display: "flex",
-            setSelectedSwap={setSelectedAttachedSwap}
+            flexDirection: "row",
-          />
+            justifyContent: "space-between",
-          <Paper variant="outlined" style={{ padding: "0.5rem" }}>
+            gap: "1rem",
-            <FormControlLabel
+          }}>
-              control={
+
-                <Checkbox
+            <SwapSelectDropDown
-                  color="primary"
+              selectedSwap={selectedSwap}
-                  checked={attachDaemonLogs}
+              setSelectedSwap={setSelectedSwap}
-                  onChange={(e) => setAttachDaemonLogs(e.target.checked)}
-                />
-              }
-              label="Attach daemon logs"
             />
-          </Paper>
+            <Tooltip title="View the logs">
+              <Box style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+                <IconButton onClick={() => setSwapLogsEditorOpen(true)} disabled={selectedSwap === null}>
+                  <Visibility />
+                </IconButton>
+              </Box>
+            </Tooltip>
+          </Box>
+          <LogViewer open={swapLogsEditorOpen} setOpen={setSwapLogsEditorOpen} logs={swapLogs} redact={setSwapLogsRedacted} />
+          <Box style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            gap: "1rem",
+          }}>
+            <Paper variant="outlined" style={{ padding: "0.5rem", width: "100%" }} >
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    color="primary"
+                    checked={attachDaemonLogs}
+                    onChange={(e) => setAttachDaemonLogs(e.target.checked)}
+                  />
+                }
+                label="Attach logs from the current session"
+              />
+            </Paper>
+            <Tooltip title="View the logs">
+              <Box style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+                <IconButton onClick={() => setDaemonLogsEditorOpen(true)} disabled={attachDaemonLogs === false}>
+                  <Visibility />
+                </IconButton>
+              </Box>
+            </Tooltip>
+          </Box>
+          <LogViewer open={daemonLogsEditorOpen} setOpen={setDaemonLogsEditorOpen} logs={daemonLogs} redact={setDaemonLogsRedacted} />
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={() => { clearState(); onClose() }}>Cancel</Button>
         <LoadingButton
           color="primary"
           variant="contained"
-          onClick={async () => {
+          onClick={sendFeedback}
-            if (pending) {
-              return;
-            }
-
-            try {
-              setPending(true);
-              await submitFeedback(bodyText, selectedAttachedSwap, attachDaemonLogs);
-              enqueueSnackbar("Feedback submitted successfully!", {
-                variant: "success",
-              });
-            } catch (e) {
-              logger.error(`Failed to submit feedback: ${e}`);
-              enqueueSnackbar(`Failed to submit feedback (${e})`, {
-                variant: "error",
-              });
-            } finally {
-              setPending(false);
-            }
-            onClose();
-          }}
           loading={pending}
         >
           Submit
@@ -197,3 +276,44 @@ export default function FeedbackDialog({
     </Dialog>
   );
 }
+
+function LogViewer(
+  { open,
+    setOpen,
+    logs,
+    redact
+  }: {
+    open: boolean,
+    setOpen: (_: boolean) => void,
+    logs: (string | CliLog)[] | null,
+    redact: (_: boolean) => void
+  }) {
+  return (
+    <Dialog open={open} onClose={() => setOpen(false)} fullWidth>
+      <DialogContent>
+        <Box>
+          <DialogContentText>
+            <Box style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+              <Typography>
+                These are the logs that would be attached to your feedback message and provided to us developers.
+                They help us narrow down the problem you encountered.
+              </Typography>
+
+
+            </Box>
+          </DialogContentText>
+
+          <CliLogsBox label="Logs" logs={logs} topRightButton={<Paper style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', paddingLeft: "0.5rem" }} variant="outlined">
+            Redact
+            <Switch color="primary" onChange={(_, checked: boolean) => redact(checked)} />
+          </Paper>} />
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" color="primary" onClick={() => setOpen(false)}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog >
+  )
+}

src-gui/src/renderer/components/other/RenderedCliLog.tsx

@@ -1,6 +1,6 @@
 import { Box, Chip, Typography } from "@material-ui/core";
 import { CliLog } from "models/cliModel";
-import { useMemo, useState } from "react";
+import { ReactNode, useMemo, useState } from "react";
 import { logsToRawString } from "utils/parseUtils";
 import ScrollablePaperTextBox from "./ScrollablePaperTextBox";
 
@@ -61,9 +61,11 @@ function RenderedCliLog({ log }: { log: CliLog }) {
 export default function CliLogsBox({
   label,
   logs,
+  topRightButton = null,
 }: {
   label: string;
   logs: (CliLog | string)[];
+  topRightButton?: ReactNode
 }) {
   const [searchQuery, setSearchQuery] = useState<string>("");
 
@@ -82,6 +84,7 @@ export default function CliLogsBox({
       copyValue={logsToRawString(logs)}
       searchQuery={searchQuery}
       setSearchQuery={setSearchQuery}
+      topRightButton={topRightButton}
       rows={memoizedLogs.map((log) =>
         typeof log === "string" ? (
           <Typography key={log} component="pre">

src-gui/src/renderer/components/other/ScrollablePaperTextBox.tsx

@@ -2,7 +2,7 @@ import { Box, Divider, IconButton, Paper, Typography } from "@material-ui/core";
 import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
-import { ReactNode, useRef } from "react";
+import { ReactNode, useEffect, useRef } from "react";
 import { VList, VListHandle } from "virtua";
 import { ExpandableSearchBox } from "./ExpandableSearchBox";
 
@@ -14,6 +14,7 @@ export default function ScrollablePaperTextBox({
   copyValue,
   searchQuery = null,
   setSearchQuery = null,
+  topRightButton = null,
   minHeight = MIN_HEIGHT,
 }: {
   rows: ReactNode[];
@@ -22,6 +23,7 @@ export default function ScrollablePaperTextBox({
   searchQuery: string | null;
   setSearchQuery?: ((query: string) => void) | null;
   minHeight?: string;
+  topRightButton?: ReactNode | null
 }) {
   const virtuaEl = useRef<VListHandle | null>(null);
 
@@ -48,7 +50,10 @@ export default function ScrollablePaperTextBox({
         width: "100%",
       }}
     >
-      <Typography>{title}</Typography>
+      <Box style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
+        <Typography>{title}</Typography>
+        {topRightButton}
+      </Box>
       <Divider />
       <Box
         style={{
@@ -69,12 +74,12 @@ export default function ScrollablePaperTextBox({
         <IconButton onClick={onCopy} size="small">
           <FileCopyOutlinedIcon />
         </IconButton>
-        <IconButton onClick={scrollToBottom} size="small">
-          <KeyboardArrowDownIcon />
-        </IconButton>
         <IconButton onClick={scrollToTop} size="small">
           <KeyboardArrowUpIcon />
         </IconButton>
+        <IconButton onClick={scrollToBottom} size="small">
+          <KeyboardArrowDownIcon />
+        </IconButton>
         {searchQuery !== undefined && setSearchQuery !== undefined && (
           <ExpandableSearchBox query={searchQuery} setQuery={setSearchQuery} />
         )}

src-gui/src/renderer/rpc.ts

@@ -25,6 +25,8 @@ import {
   GetDataDirArgs,
   ResolveApprovalArgs,
   ResolveApprovalResponse,
+  RedactArgs,
+  RedactResponse,
 } from "models/tauriModel";
 import {
   rpcSetBalance,
@@ -40,6 +42,8 @@ import { getNetwork, isTestnet } from "store/config";
 import { Blockchain, Network } from "store/features/settingsSlice";
 import { setStatus } from "store/features/nodesSlice";
 import { discoveredMakersByRendezvous } from "store/features/makersSlice";
+import { CliLog } from "models/cliModel";
+import { logsToRawString, parseLogsFromString } from "utils/parseUtils";
 
 export const PRESET_RENDEZVOUS_POINTS = [
   "/dns4/discover.unstoppableswap.net/tcp/8888/p2p/12D3KooWA6cnqJpVnreBVnoro8midDL9Lpzmg8oJPoAGi7YYaamE",
@@ -164,6 +168,18 @@ export async function getLogsOfSwap(
   });
 }
 
+/// Call the rust backend to redact logs.
+export async function redactLogs(
+  logs: (string | CliLog)[]
+): Promise<(string | CliLog)[]> {
+  const response = await invoke<RedactArgs, RedactResponse>("redact", {
+    text: logsToRawString(logs)
+  })
+
+  console.log(response.text.split("\n").length)
+  return parseLogsFromString(response.text);
+}
+
 export async function listSellersAtRendezvousPoint(
   rendezvousPointAddress: string,
 ): Promise<ListSellersResponse> {

src-gui/src/store/features/rpcSlice.ts

@@ -10,7 +10,7 @@ import {
 } from "models/tauriModel";
 import { MoneroRecoveryResponse } from "../../models/rpcModel";
 import { GetSwapInfoResponseExt } from "models/tauriModelExt";
-import { getLogsAndStringsFromRawFileString } from "utils/parseUtils";
+import { parseLogsFromString } from "utils/parseUtils";
 import { CliLog } from "models/cliModel";
 import logger from "utils/logger";
 
@@ -68,7 +68,7 @@ export const rpcSlice = createSlice({
   reducers: {
     receivedCliLog(slice, action: PayloadAction<TauriLogEvent>) {
       const buffer = action.payload.buffer;
-      const logs = getLogsAndStringsFromRawFileString(buffer);
+      const logs = parseLogsFromString(buffer);
       const logsWithoutExisting = logs.filter(log => !slice.logs.includes(log));
       slice.logs = slice.logs.concat(logsWithoutExisting);
     },

src-gui/src/utils/parseUtils.ts

@@ -52,7 +52,7 @@ export function getLinesOfString(data: string): string[] {
     .filter((l) => l.length > 0);
 }
 
-export function getLogsAndStringsFromRawFileString(
+export function parseLogsFromString(
   rawFileData: string,
 ): (CliLog | string)[] {
   return getLinesOfString(rawFileData).map(parseCliLogString);

src-tauri/src/lib.rs

@@ -9,8 +9,8 @@ use swap::cli::{
             CheckElectrumNodeResponse, CheckMoneroNodeArgs, CheckMoneroNodeResponse,
             ExportBitcoinWalletArgs, GetDataDirArgs, GetHistoryArgs, GetLogsArgs,
             GetMoneroAddressesArgs, GetSwapInfoArgs, GetSwapInfosAllArgs, ListSellersArgs,
-            MoneroRecoveryArgs, ResolveApprovalArgs, ResumeSwapArgs, SuspendCurrentSwapArgs,
+            MoneroRecoveryArgs, RedactArgs, ResolveApprovalArgs, ResumeSwapArgs,
-            WithdrawBtcArgs,
+            SuspendCurrentSwapArgs, WithdrawBtcArgs,
         },
         tauri_bindings::{TauriContextStatusEvent, TauriEmitter, TauriHandle, TauriSettings},
         Context, ContextBuilder,
@@ -186,6 +186,7 @@ pub fn run() {
             get_wallet_descriptor,
             get_data_dir,
             resolve_approval_request,
+            redact
         ])
         .setup(setup)
         .build(tauri::generate_context!())
@@ -227,6 +228,7 @@ tauri_command!(get_logs, GetLogsArgs);
 tauri_command!(list_sellers, ListSellersArgs);
 tauri_command!(cancel_and_refund, CancelAndRefundArgs);
 tauri_command!(resolve_approval_request, ResolveApprovalArgs);
+tauri_command!(redact, RedactArgs);
 
 // These commands require no arguments
 tauri_command!(get_wallet_descriptor, ExportBitcoinWalletArgs, no_args);

swap/src/cli/api/request.rs

@@ -3,7 +3,7 @@ use crate::bitcoin::{wallet, CancelTimelock, ExpiredTimelocks, PunishTimelock, T
 use crate::cli::api::tauri_bindings::{TauriEmitter, TauriSwapProgressEvent};
 use crate::cli::api::Context;
 use crate::cli::{list_sellers as list_sellers_impl, EventLoop, Seller, SellerStatus};
-use crate::common::get_logs;
+use crate::common::{get_logs, redact};
 use crate::libp2p_ext::MultiAddrExt;
 use crate::monero::wallet_rpc::MoneroDaemon;
 use crate::network::quote::{BidQuote, ZeroQuoteReceived};
@@ -420,6 +420,29 @@ impl Request for GetLogsArgs {
     }
 }
 
+/// Best effort redaction of logs, e.g. wallet addresses, swap-ids
+#[typeshare]
+#[derive(Serialize, Deserialize, Debug)]
+pub struct RedactArgs {
+    pub text: String,
+}
+
+#[typeshare]
+#[derive(Serialize, Debug)]
+pub struct RedactResponse {
+    pub text: String,
+}
+
+impl Request for RedactArgs {
+    type Response = RedactResponse;
+
+    async fn request(self, _: Arc<Context>) -> Result<Self::Response> {
+        Ok(RedactResponse {
+            text: redact(&self.text),
+        })
+    }
+}
+
 #[typeshare]
 #[derive(Debug, Eq, PartialEq, Serialize, Deserialize)]
 pub struct GetMoneroAddressesArgs;