feat(tauri, gui): Send event on changes to details, timelocks and tx_lock confirmations (#100)

- Send event when new swap state is inserated into database. The event only has the `swap_id` attached. The frontend then sends a request to the `get_swap_info` command to retrieve the updated version
- Send event when the Bitcoin lock transaction gets a new confirmation 
- A new `watcher` daemon runs contineously and sends an event when the timelock updated. The event has the the `swap_id` and the timelock attached
- Display logs on `ProcessExitedPage` (if swap was stopped prematurely)
- Rename `CliLogEmittedEvent` to `TauriLogEvent`
- Apply env_filter to tracing terminal writer to silence logging from other crates
- Add `.env.*` files in `src-gui` to `.gitingore`

Closes #93 and #12

src-gui/src/renderer/components/modal/swap/SwapStateStepper.tsx

@@ -61,7 +61,11 @@ function getActiveStep(state: SwapState | null): PathStep {
     // Step 1: Waiting for Bitcoin lock confirmation
     // Bitcoin has been locked, waiting for the counterparty to lock their XMR
     case "BtcLockTxInMempool":
-      return [PathType.HAPPY_PATH, 1, isReleased];
+      // We only display the first step as completed if the Bitcoin lock has been confirmed
+      if(latestState.content.btc_lock_confirmations > 0) {
+        return [PathType.HAPPY_PATH, 1, isReleased];
+      }
+      return [PathType.HAPPY_PATH, 0, isReleased];
 
     // Still Step 1: Both Bitcoin and XMR have been locked, waiting for Monero lock to be confirmed
     case "XmrLockTxInMempool":

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

@@ -1,11 +1,15 @@
 import { Box, DialogContentText } from "@material-ui/core";
-import { useActiveSwapInfo, useAppSelector } from "store/hooks";
+import {
+  useActiveSwapInfo,
+  useActiveSwapLogs,
+  useAppSelector,
+} from "store/hooks";
 import JsonTreeView from "../../../other/JSONViewTree";
 import CliLogsBox from "../../../other/RenderedCliLog";
 
 export default function DebugPage() {
   const torStdOut = useAppSelector((s) => s.tor.stdOut);
-  const logs = useAppSelector((s) => s.swap.logs);
+  const logs = useActiveSwapLogs();
   const guiState = useAppSelector((s) => s);
   const cliState = useActiveSwapInfo();
 
@@ -19,7 +23,10 @@ export default function DebugPage() {
             gap: "8px",
           }}
         >
-          <CliLogsBox logs={logs} label="Logs relevant to the swap" />
+          <CliLogsBox
+            logs={logs}
+            label="Logs relevant to the swap (only current session)"
+          />
           <JsonTreeView
             data={guiState}
             label="Internal GUI State (inferred from Logs)"

src-gui/src/renderer/components/modal/swap/pages/SwapStatePage.tsx

@@ -19,20 +19,10 @@ import InitPage from "./init/InitPage";
 import WaitingForBitcoinDepositPage from "./init/WaitingForBitcoinDepositPage";
 
 export default function SwapStatePage({ state }: { state: SwapState | null }) {
-  // TODO: Reimplement this using tauri events
-  /*
-  const isSyncingMoneroWallet = useAppSelector(
-    (state) => state.rpc.state.moneroWallet.isSyncing,
-  );
-
-  if (isSyncingMoneroWallet) {
-    return <SyncingMoneroWalletPage />;
-  }
-  */
-
   if (state === null) {
     return <InitPage />;
   }
+  
   switch (state.curr.type) {
     case "Initiated":
       return <InitiatedPage />;

src-gui/src/renderer/components/modal/swap/pages/exited/ProcessExitedAndNotDonePage.tsx

@@ -1,71 +0,0 @@
-import { Box, DialogContentText } from "@material-ui/core";
-import { SwapSpawnType } from "models/cliModel";
-import { SwapStateProcessExited } from "models/storeModel";
-import { useActiveSwapInfo, useAppSelector } from "store/hooks";
-import CliLogsBox from "../../../../other/RenderedCliLog";
-
-export default function ProcessExitedAndNotDonePage({
-  state,
-}: {
-  state: SwapStateProcessExited;
-}) {
-  const swap = useActiveSwapInfo();
-  const logs = useAppSelector((s) => s.swap.logs);
-  const spawnType = useAppSelector((s) => s.swap.spawnType);
-
-  function getText() {
-    const isCancelRefund = spawnType === SwapSpawnType.CANCEL_REFUND;
-    const hasRpcError = state.rpcError != null;
-    const hasSwap = swap != null;
-
-    const messages = [];
-
-    messages.push(
-      isCancelRefund
-        ? "The manual cancel and refund was unsuccessful."
-        : "The swap exited unexpectedly without completing.",
-    );
-
-    if (!hasSwap && !isCancelRefund) {
-      messages.push("No funds were locked.");
-    }
-
-    messages.push(
-      hasRpcError
-        ? "Check the error and the logs below for more information."
-        : "Check the logs below for more information.",
-    );
-
-    if (hasSwap) {
-      messages.push(`The swap is in the "${swap.state_name}" state.`);
-      if (!isCancelRefund) {
-        messages.push(
-          "Try resuming the swap or attempt to initiate a manual cancel and refund.",
-        );
-      }
-    }
-
-    return messages.join(" ");
-  }
-
-  return (
-    <Box>
-      <DialogContentText>{getText()}</DialogContentText>
-      <Box
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "0.5rem",
-        }}
-      >
-        {state.rpcError && (
-          <CliLogsBox
-            logs={[state.rpcError]}
-            label="Error returned by the Swap Daemon"
-          />
-        )}
-        <CliLogsBox logs={logs} label="Logs relevant to the swap" />
-      </Box>
-    </Box>
-  );
-}

src-gui/src/renderer/components/modal/swap/pages/exited/ProcessExitedPage.tsx

@@ -1,4 +1,7 @@
+import { Box, DialogContentText } from "@material-ui/core";
 import { TauriSwapProgressEvent } from "models/tauriModel";
+import CliLogsBox from "renderer/components/other/RenderedCliLog";
+import { useActiveSwapInfo, useActiveSwapLogs } from "store/hooks";
 import SwapStatePage from "../SwapStatePage";
 
 export default function ProcessExitedPage({
@@ -8,8 +11,11 @@ export default function ProcessExitedPage({
   prevState: TauriSwapProgressEvent | null;
   swapId: string;
 }) {
+  const swap = useActiveSwapInfo();
+  const logs = useActiveSwapLogs();
+
   // If we have a previous state, we can show the user the last state of the swap
-  // We only show the last state if its a final state (XmrRedeemInMempool, BtcRefunded, BtcPunished)
+  // We only show the last state if its a final state (XmrRedeemInMempool, BtcRefunded, BtcPunished, CooperativeRedeemRejected)
   if (
     prevState != null &&
     (prevState.type === "XmrRedeemInMempool" ||
@@ -28,15 +34,17 @@ export default function ProcessExitedPage({
     );
   }
 
-  // TODO: Display something useful here
   return (
-    <>
-      If the swap is not a "done" state (or we don't have a db state because the
-      swap did complete the SwapSetup yet) we should tell the user and show logs
-      Not implemented yet
-    </>
+    <Box>
+      <DialogContentText>
+        The swap was stopped but it has not been completed yet. Check the logs
+        below for more information. The current GUI state is{" "}
+        {prevState?.type ?? "unknown"}. The current database state is{" "}
+        {swap?.state_name ?? "unknown"}.
+      </DialogContentText>
+      <Box>
+        <CliLogsBox logs={logs} label="Logs relevant to the swap" />
+      </Box>
+    </Box>
   );
-
-  // If the swap is not a "done" state (or we don't have a db state because the swap did complete the SwapSetup yet) we should tell the user and show logs
-  // return <ProcessExitedAndNotDonePage state={state} />;
 }

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

@@ -81,7 +81,9 @@ export default function CliLogsBox({
       setSearchQuery={setSearchQuery}
       rows={memoizedLogs.map((log) =>
         typeof log === "string" ? (
-          <Typography component="pre">{log}</Typography>
+          <Typography key={log} component="pre">
+            {log}
+          </Typography>
         ) : (
           <RenderedCliLog log={log} key={JSON.stringify(log)} />
         ),

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

@@ -21,7 +21,7 @@ export default function ScrollablePaperTextBox({
   copyValue: string;
   searchQuery: string | null;
   setSearchQuery?: ((query: string) => void) | null;
-  minHeight: string;
+  minHeight?: string;
 }) {
   const virtuaEl = useRef<VListHandle | null>(null);
 

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

@@ -15,15 +15,13 @@ export function AmountWithUnit({
   fixedPrecision: number;
   dollarRate?: Amount;
 }) {
+  const title =
+    dollarRate != null && amount != null
+      ? `≈ $${(dollarRate * amount).toFixed(2)}`
+      : "";
+
   return (
-    <Tooltip
-      arrow
-      title={
-        dollarRate != null && amount != null
-          ? `≈ $${(dollarRate * amount).toFixed(2)}`
-          : ""
-      }
-    >
+    <Tooltip arrow title={title}>
       <span>
         {amount != null
           ? Number.parseFloat(amount.toFixed(fixedPrecision))

src-gui/src/renderer/rpc.ts

@@ -5,7 +5,7 @@ import {
   BalanceResponse,
   BuyXmrArgs,
   BuyXmrResponse,
-  CliLogEmittedEvent,
+  TauriLogEvent,
   GetLogsArgs,
   GetLogsResponse,
   GetSwapInfoResponse,
@@ -18,14 +18,18 @@ import {
   TauriSwapProgressEventWrapper,
   WithdrawBtcArgs,
   WithdrawBtcResponse,
+  TauriDatabaseStateEvent,
+  TauriTimelockChangeEvent,
+  GetSwapInfoArgs,
 } from "models/tauriModel";
 import {
   contextStatusEventReceived,
   receivedCliLog,
   rpcSetBalance,
   rpcSetSwapInfo,
+  timelockChangeEventReceived,
 } from "store/features/rpcSlice";
-import { swapTauriEventReceived } from "store/features/swapSlice";
+import { swapProgressEventReceived } from "store/features/swapSlice";
 import { store } from "./store/storeRenderer";
 import { Provider } from "models/apiModel";
 import { providerToConcatenatedMultiAddr } from "utils/multiAddrUtils";
@@ -49,7 +53,7 @@ export async function initEventListeners() {
 
   listen<TauriSwapProgressEventWrapper>("swap-progress-update", (event) => {
     console.log("Received swap progress event", event.payload);
-    store.dispatch(swapTauriEventReceived(event.payload));
+    store.dispatch(swapProgressEventReceived(event.payload));
   });
 
   listen<TauriContextStatusEvent>("context-init-progress-update", (event) => {
@@ -57,10 +61,25 @@ export async function initEventListeners() {
     store.dispatch(contextStatusEventReceived(event.payload));
   });
 
-  listen<CliLogEmittedEvent>("cli-log-emitted", (event) => {
+  listen<TauriLogEvent>("cli-log-emitted", (event) => {
     console.log("Received cli log event", event.payload);
     store.dispatch(receivedCliLog(event.payload));
   });
+
+  listen<TauriDatabaseStateEvent>("swap-database-state-update", (event) => {
+    console.log("Received swap database state update event", event.payload);
+    getSwapInfo(event.payload.swap_id);
+
+    // This is ugly but it's the best we can do for now
+    // Sometimes we are too quick to fetch the swap info and the new state is not yet reflected
+    // in the database. So we wait a bit before fetching the new state
+    setTimeout(() => getSwapInfo(event.payload.swap_id), 3000);
+  });
+
+  listen<TauriTimelockChangeEvent>('timelock-change', (event) => {
+    console.log('Received timelock change event', event.payload);
+    store.dispatch(timelockChangeEventReceived(event.payload));
+  })
 }
 
 async function invoke<ARGS, RESPONSE>(
@@ -93,6 +112,17 @@ export async function getAllSwapInfos() {
   });
 }
 
+export async function getSwapInfo(swapId: string) {
+  const response = await invoke<GetSwapInfoArgs, GetSwapInfoResponse>(
+    "get_swap_info",
+    {
+      swap_id: swapId,
+    },
+  );
+
+  store.dispatch(rpcSetSwapInfo(response));
+}
+
 export async function withdrawBtc(address: string): Promise<string> {
   const response = await invoke<WithdrawBtcArgs, WithdrawBtcResponse>(
     "withdraw_btc",