Merge pull request #73 from UnstoppableSwap/gui/allow-logs-of-swap-button

feat(gui): Display logs of specific swap on press of button on history page

src-gui/src/models/cliModel.ts

@@ -18,3 +18,26 @@ export interface CliLog {
     [index: string]: unknown;
   }[];
 }
+
+function isCliLog(log: unknown): log is CliLog {
+  return (
+    typeof log === "object" &&
+    log !== null &&
+    "timestamp" in log &&
+    "level" in log &&
+    "fields" in log
+  );
+}
+
+export function parseCliLogString(log: string): CliLog | string {
+  try {
+    const parsed = JSON.parse(log);
+    if (isCliLog(parsed)) {
+      return parsed;
+    } else {
+      return log;
+    }
+  } catch (err) {
+    return log;
+  }
+}

src-gui/src/renderer/components/alert/SwapStatusAlert.tsx

@@ -11,6 +11,7 @@ import {
 import { ReactNode } from "react";
 import { exhaustiveGuard } from "utils/typescriptUtils";
 import HumanizedBitcoinBlockDuration from "../other/HumanizedBitcoinBlockDuration";
+import TruncatedText from "../other/TruncatedText";
 import {
   SwapCancelRefundButton,
   SwapResumeButton,
@@ -219,7 +220,7 @@ export default function SwapStatusAlert({
       variant="filled"
     >
       <AlertTitle>
-        Swap {swap.swap_id.substring(0, 5)}... is unfinished
+        Swap <TruncatedText>{swap.swap_id}</TruncatedText> is unfinished
       </AlertTitle>
       <SwapAlertStatusText swap={swap} />
     </Alert>

src-gui/src/renderer/components/modal/DialogHeader.tsx

@@ -1,4 +1,5 @@
 import { DialogTitle, makeStyles, Typography } from "@material-ui/core";
+import { ReactNode } from "react";
 
 const useStyles = makeStyles({
   root: {
@@ -8,7 +9,7 @@ const useStyles = makeStyles({
 });
 
 type DialogTitleProps = {
-  title: string;
+  title: ReactNode;
 };
 
 export default function DialogHeader({ title }: DialogTitleProps) {

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

@@ -13,6 +13,7 @@ import {
 import { CliLog } from "models/cliModel";
 import { useSnackbar } from "notistack";
 import { 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";
@@ -68,7 +69,7 @@ function SwapSelectDropDown({
       <MenuItem value={0}>Do not attach logs</MenuItem>
       {swaps.map((swap) => (
         <MenuItem value={swap.swap_id} key={swap.swap_id}>
-          Swap {swap.swap_id.substring(0, 5)}... from{" "}
+          Swap <TruncatedText>{swap.swap_id}</TruncatedText> from{" "}
           {new Date(parseDateString(swap.start_date)).toDateString()} (
           <PiconeroAmount amount={swap.xmr_amount} />)
         </MenuItem>

src-gui/src/renderer/components/modal/listSellers/ListSellersDialog.tsx

@@ -14,6 +14,7 @@ import {
 import { Multiaddr } from "multiaddr";
 import { useSnackbar } from "notistack";
 import { ChangeEvent, useState } from "react";
+import TruncatedText from "renderer/components/other/TruncatedText";
 import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
 
 const PRESET_RENDEZVOUS_POINTS = [
@@ -108,10 +109,7 @@ export default function ListSellersDialog({
             <Chip
               key={rAddress}
               clickable
-              label={`${rAddress.substring(
-                0,
-                Math.min(rAddress.length - 1, 20),
-              )}...`}
+              label={<TruncatedText limit={30}>{rAddress}</TruncatedText>}
               onClick={() => setRendezvousAddress(rAddress)}
             />
           ))}

src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx

@@ -1,6 +1,7 @@
 import { Box, Chip, makeStyles, Tooltip, Typography } from "@material-ui/core";
 import { VerifiedUser } from "@material-ui/icons";
 import { ExtendedProviderStatus } from "models/apiModel";
+import TruncatedText from "renderer/components/other/TruncatedText";
 import {
   MoneroBitcoinExchangeRate,
   SatsAmount,
@@ -38,7 +39,7 @@ export default function ProviderInfo({
         {provider.multiAddr}
       </Typography>
       <Typography color="textSecondary" gutterBottom>
-        {provider.peerId.substring(0, 8)}...{provider.peerId.slice(-8)}
+        <TruncatedText limit={12}>{provider.peerId}</TruncatedText>
       </Typography>
       <Typography variant="caption">
         Exchange rate:{" "}

src-gui/src/renderer/components/modal/swap/pages/init/InitPage.tsx

@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
   fieldsOuter: {
     display: "flex",
     flexDirection: "column",
-    gap: theme.spacing(2),
+    gap: theme.spacing(1.5),
   },
 }));
 
@@ -51,8 +51,8 @@ export default function InitPage() {
 
   return (
     <Box>
-      <RemainingFundsWillBeUsedAlert />
       <Box className={classes.fieldsOuter}>
+        <RemainingFundsWillBeUsedAlert />
         <MoneroAddressTextField
           label="Monero redeem address"
           address={redeemAddress}

src-gui/src/renderer/components/modal/wallet/WithdrawDialog.tsx

@@ -19,6 +19,8 @@ export default function WithdrawDialog({
   const [withdrawAddressValid, setWithdrawAddressValid] = useState(false);
   const [withdrawAddress, setWithdrawAddress] = useState<string>("");
 
+  const haveFundsBeenWithdrawn = withdrawTxId !== null;
+
   function onCancel() {
     if (!pending) {
       setWithdrawTxId(null);
@@ -31,34 +33,34 @@ export default function WithdrawDialog({
     <Dialog open={open} onClose={onCancel} maxWidth="sm" fullWidth>
       <DialogHeader title="Withdraw Bitcoin" />
       <WithdrawDialogContent isPending={pending} withdrawTxId={withdrawTxId}>
-        {withdrawTxId === null ? (
+        {haveFundsBeenWithdrawn ? (
+          <BtcTxInMempoolPageContent withdrawTxId={withdrawTxId} />
+        ) : (
           <AddressInputPage
             setWithdrawAddress={setWithdrawAddress}
             withdrawAddress={withdrawAddress}
             setWithdrawAddressValid={setWithdrawAddressValid}
           />
-        ) : (
-          <BtcTxInMempoolPageContent withdrawTxId={withdrawTxId} />
         )}
       </WithdrawDialogContent>
       <DialogActions>
-        <Button onClick={onCancel} color="primary" disabled={pending}>
-          {withdrawTxId === null ? "Cancel" : "Done"}
+        <Button
+          onClick={onCancel}
+          color="primary"
+          disabled={pending}
+          variant={haveFundsBeenWithdrawn ? "contained" : "text"}
+        >
+          {haveFundsBeenWithdrawn ? "Done" : "Close"}
         </Button>
-        {withdrawTxId === null && (
+        {!haveFundsBeenWithdrawn && (
           <PromiseInvokeButton
             displayErrorSnackbar
             variant="contained"
             color="primary"
             disabled={!withdrawAddressValid}
             onInvoke={() => withdrawBtc(withdrawAddress)}
-            onPendingChange={(pending) => {
-              console.log("pending", pending);
-              setPending(pending);
-            }}
-            onSuccess={(txId) => {
-              setWithdrawTxId(txId);
-            }}
+            onPendingChange={setPending}
+            onSuccess={setWithdrawTxId}
           >
             Withdraw
           </PromiseInvokeButton>

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

@@ -0,0 +1,14 @@
+export default function TruncatedText({
+  children,
+  limit = 6,
+  ellipsis = "...",
+}: {
+  children: string;
+  limit?: number;
+  ellipsis?: string;
+}) {
+  const truncatedText =
+    children.length > limit ? children.slice(0, limit) + ellipsis : children;
+
+  return truncatedText;
+}

src-gui/src/renderer/components/pages/history/table/HistoryRow.tsx

@@ -11,6 +11,7 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import { GetSwapInfoResponse } from "models/tauriModel";
 import { useState } from "react";
+import TruncatedText from "renderer/components/other/TruncatedText";
 import { PiconeroAmount, SatsAmount } from "../../../other/Units";
 import HistoryRowActions from "./HistoryRowActions";
 import HistoryRowExpanded from "./HistoryRowExpanded";
@@ -52,7 +53,9 @@ export default function HistoryRow(swap: GetSwapInfoResponse) {
             {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
           </IconButton>
         </TableCell>
-        <TableCell>{swap.swap_id}</TableCell>
+        <TableCell>
+          <TruncatedText>{swap.swap_id}</TruncatedText>
+        </TableCell>
         <TableCell>
           <AmountTransfer
             xmrAmount={swap.xmr_amount}

src-gui/src/renderer/components/pages/history/table/SwapLogFileOpenButton.tsx

@@ -6,29 +6,38 @@ import {
   DialogTitle,
 } from "@material-ui/core";
 import { ButtonProps } from "@material-ui/core/Button/Button";
-import { CliLog } from "models/cliModel";
+import { CliLog, parseCliLogString } from "models/cliModel";
+import { GetLogsResponse } from "models/tauriModel";
 import { useState } from "react";
 import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
+import { getLogsOfSwap } from "renderer/rpc";
 import CliLogsBox from "../../../other/RenderedCliLog";
 
 export default function SwapLogFileOpenButton({
   swapId,
   ...props
 }: { swapId: string } & ButtonProps) {
-  const [logs, setLogs] = useState<CliLog[] | null>(null);
+  const [logs, setLogs] = useState<(CliLog | string)[] | null>(null);
+
+  function onLogsReceived(response: GetLogsResponse) {
+    setLogs(response.logs.map(parseCliLogString));
+  }
 
   return (
     <>
       <PromiseInvokeButton
-        onSuccess={(data) => {
-          setLogs(data as CliLog[]);
-        }}
-        onInvoke={async () => {
-          throw new Error("Not implemented");
-        }}
+        onSuccess={onLogsReceived}
+        onInvoke={() => getLogsOfSwap(swapId, false)}
         {...props}
       >
-        View log
+        View full logs
+      </PromiseInvokeButton>
+      <PromiseInvokeButton
+        onSuccess={onLogsReceived}
+        onInvoke={() => getLogsOfSwap(swapId, true)}
+        {...props}
+      >
+        View redacted logs
       </PromiseInvokeButton>
       {logs && (
         <Dialog open onClose={() => setLogs(null)} fullWidth maxWidth="lg">
@@ -37,7 +46,13 @@ export default function SwapLogFileOpenButton({
             <CliLogsBox logs={logs} label="Logs relevant to the swap" />
           </DialogContent>
           <DialogActions>
-            <Button onClick={() => setLogs(null)}>Close</Button>
+            <Button
+              onClick={() => setLogs(null)}
+              variant="contained"
+              color="primary"
+            >
+              Close
+            </Button>
           </DialogActions>
         </Dialog>
       )}

src-gui/src/renderer/components/pages/history/table/SwapMoneroRecoveryButton.tsx

@@ -9,6 +9,7 @@ import {
 } from "@material-ui/core";
 import { ButtonProps } from "@material-ui/core/Button/Button";
 import { BobStateName, GetSwapInfoResponseExt } from "models/tauriModelExt";
+import TruncatedText from "renderer/components/other/TruncatedText";
 import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
 import { getMoneroRecoveryKeys } from "renderer/rpc";
 import { store } from "renderer/store/storeRenderer";
@@ -38,7 +39,9 @@ function MoneroRecoveryKeysDialog({
   return (
     <Dialog open onClose={onClose} maxWidth="sm" fullWidth>
       <DialogHeader
-        title={`Recovery Keys for swap ${swap_id.substring(0, 5)}...`}
+        title=<>
+          Recovery Keys for swap <TruncatedText>{swap_id}</TruncatedText>
+        </>
       />
       <DialogContent>
         <DialogContentText>

src-gui/src/renderer/rpc.ts

@@ -5,6 +5,8 @@ import {
   BalanceResponse,
   BuyXmrArgs,
   BuyXmrResponse,
+  GetLogsArgs,
+  GetLogsResponse,
   GetSwapInfoResponse,
   MoneroRecoveryArgs,
   ResumeSwapArgs,
@@ -132,3 +134,13 @@ export async function checkContextAvailability(): Promise<boolean> {
   const available = await invokeNoArgs<boolean>("is_context_available");
   return available;
 }
+
+export async function getLogsOfSwap(
+  swapId: string,
+  redact: boolean,
+): Promise<GetLogsResponse> {
+  return await invoke<GetLogsArgs, GetLogsResponse>("get_logs", {
+    swap_id: swapId,
+    redact,
+  });
+}

src-tauri/src/lib.rs

@@ -3,8 +3,8 @@ use std::sync::Arc;
 use swap::cli::{
     api::{
         request::{
-            BalanceArgs, BuyXmrArgs, GetHistoryArgs, GetSwapInfosAllArgs, MoneroRecoveryArgs,
-            ResumeSwapArgs, SuspendCurrentSwapArgs, WithdrawBtcArgs,
+            BalanceArgs, BuyXmrArgs, GetHistoryArgs, GetLogsArgs, GetSwapInfosAllArgs,
+            MoneroRecoveryArgs, ResumeSwapArgs, SuspendCurrentSwapArgs, WithdrawBtcArgs,
         },
         tauri_bindings::{TauriContextStatusEvent, TauriEmitter, TauriHandle},
         Context, ContextBuilder,
@@ -168,6 +168,7 @@ pub fn run() {
             resume_swap,
             get_history,
             monero_recovery,
+            get_logs,
             suspend_current_swap,
             is_context_available,
         ])
@@ -206,6 +207,7 @@ tauri_command!(buy_xmr, BuyXmrArgs);
 tauri_command!(resume_swap, ResumeSwapArgs);
 tauri_command!(withdraw_btc, WithdrawBtcArgs);
 tauri_command!(monero_recovery, MoneroRecoveryArgs);
+tauri_command!(get_logs, GetLogsArgs);
 
 // These commands require no arguments
 tauri_command!(suspend_current_swap, SuspendCurrentSwapArgs, no_args);

swap/src/cli/api/request.rs

@@ -359,9 +359,10 @@ impl Request for GetSwapInfosAllArgs {
 #[typeshare]
 #[derive(Serialize, Deserialize, Debug)]
 pub struct GetLogsArgs {
+    #[typeshare(serialized_as = "Option<string>")]
     pub swap_id: Option<Uuid>,
     pub redact: bool,
-    #[typeshare(serialized_as = "string")]
+    #[typeshare(serialized_as = "Option<string>")]
     pub logs_dir: Option<PathBuf>,
 }