refactor(gui): Swap state stepper to use Tauri events (#77)

Previously we used the data we fetched via the rpc (`GetSwapInfo` call, saved in redux in `rpc.swapInfos`) to decide what to display in the state stepper to the user. The state stepper is displayed at the bottom of the `SwapDialog`. However, we are moving away from our depedence on periodic rpc calls and towards relying more and more on the events we receive from the Host (from Tauri). Our goal is to rely solely on the Tauri events for everything displayed about the currently running swap. This PR includes the following changes: - refactor the `SwapStateStepper` such that it relies only on the Tauri events - emit two new Tauri events (`EncryptedSignatureSent`, `CancelTimelockExpired`) in the state machine - correctly emit `BtcRefunded` Tauri event after Bitcoin refund transaction is published - differentiate between `"Waiting for them to redeem the Bitcoin"` and `"Revealing encrypted signature to the other party"` on the `SwapStatePage` (content displayed in the center of the `SwapDialog`)
UnstoppableSwap · Sep 22, 2024 · 97510a8 · 97510a8
1 parent f91255f
commit 97510a8
Show file tree

Hide file tree

Showing 21 changed files with 608 additions and 206 deletions.
diff --git a/src-gui/index.html b/src-gui/index.html
@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + React + Typescript</title>
+    <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+      />
   </head>
 
   <body>

diff --git a/src-gui/package.json b/src-gui/package.json
@@ -6,6 +6,8 @@
   "scripts": {
     "check-bindings": "typeshare --lang=typescript --output-file __temp_bindings.ts ../swap/src && dprint fmt __temp_bindings.ts && diff -wbB __temp_bindings.ts ./src/models/tauriModel.ts && rm __temp_bindings.ts",
     "gen-bindings": "typeshare --lang=typescript --output-file ./src/models/tauriModel.ts ../swap/src && dprint fmt ./src/models/tauriModel.ts",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
     "dev": "vite",
     "prebuild": "yarn run gen-bindings",
     "build": "vite build --mode dev",
@@ -38,6 +40,8 @@
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@tauri-apps/cli": ">=2.0.0-beta.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/humanize-duration": "^3.27.4",
     "@types/lodash": "^4.17.6",
     "@types/node": "^20.14.10",
@@ -53,6 +57,7 @@
     "typescript-eslint": "^8.1.0",
     "vite": "^5.3.1",
     "vite-plugin-watch": "^0.3.1",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^2.1.1"
   }
 }
diff --git a/src-gui/src/models/storeModel.ts b/src-gui/src/models/storeModel.ts
@@ -1,12 +1,14 @@
 import { CliLog, SwapSpawnType } from "./cliModel";
 import { TauriSwapProgressEvent } from "./tauriModel";
 
+export type SwapState = {
+  curr: TauriSwapProgressEvent;
+  prev: TauriSwapProgressEvent | null;
+  swapId: string;
+};
+
 export interface SwapSlice {
-  state: {
-    curr: TauriSwapProgressEvent;
-    prev: TauriSwapProgressEvent | null;
-    swapId: string;
-  } | null;
+  state: SwapState | null;
   logs: CliLog[];
   spawnType: SwapSpawnType | null;
 }
diff --git a/src-gui/src/models/tauriModelExt.ts b/src-gui/src/models/tauriModelExt.ts
@@ -4,8 +4,10 @@ import {
   TauriSwapProgressEvent,
 } from "./tauriModel";
 
+export type TauriSwapProgressEventType = TauriSwapProgressEvent["type"];
+
 export type TauriSwapProgressEventContent<
-  T extends TauriSwapProgressEvent["type"],
+  T extends TauriSwapProgressEventType,
 > = Extract<TauriSwapProgressEvent, { type: T }>["content"];
 
 // See /swap/src/protocol/bob/state.rs#L57

diff --git a/src-gui/src/renderer/components/modal/swap/SwapDialog.tsx b/src-gui/src/renderer/components/modal/swap/SwapDialog.tsx
@@ -33,6 +33,7 @@ export default function SwapDialog({
   const classes = useStyles();
   const swap = useAppSelector((state) => state.swap);
   const isSwapRunning = useIsSwapRunning();
+
   const [debug, setDebug] = useState(false);
   const [openSuspendAlert, setOpenSuspendAlert] = useState(false);
   const dispatch = useAppDispatch();
@@ -63,7 +64,7 @@ export default function SwapDialog({
         ) : (
           <>
             <SwapStatePage state={swap.state} />
-            <SwapStateStepper />
+            <SwapStateStepper state={swap.state}/>
           </>
         )}
       </DialogContent>
@@ -76,7 +77,7 @@ export default function SwapDialog({
           color="primary"
           variant="contained"
           onClick={onCancel}
-          disabled={isSwapRunning}
+          disabled={isSwapRunning || swap.state === null}
         >
           Done
         </Button>