feat(gui): Preserve global state across page reloads (#48)

src-gui/package.json

@@ -26,6 +26,7 @@
     "react-qr-code": "^2.0.15",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.1",
+    "redux-persist": "^6.0.0",
     "semver": "^7.6.2",
     "virtua": "^0.33.2"
   },

src-gui/src/renderer/index.tsx

@@ -1,5 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
 import { setAlerts } from "store/features/alertsSlice";
 import { setRegistryProviders } from "store/features/providersSlice";
 import { setBtcPrice, setXmrPrice } from "store/features/ratesSlice";
@@ -12,7 +13,7 @@ import {
 } from "./api";
 import App from "./components/App";
 import { checkBitcoinBalance, getRawSwapInfos } from "./rpc";
-import { store } from "./store/storeRenderer";
+import { persistor, store } from "./store/storeRenderer";
 
 setInterval(() => {
   checkBitcoinBalance();
@@ -23,7 +24,9 @@ const container = document.getElementById("root");
 const root = createRoot(container!);
 root.render(
   <Provider store={store}>
-    <App />
+    <PersistGate loading={null} persistor={persistor}>
+      <App />
+    </PersistGate>
   </Provider>,
 );
 

src-gui/src/renderer/store/storeRenderer.ts

@@ -1,9 +1,28 @@
-import { configureStore } from "@reduxjs/toolkit";
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import { persistReducer, persistStore } from "redux-persist";
+import sessionStorage from "redux-persist/lib/storage/session";
 import { reducers } from "store/combinedReducer";
 
+// We persist the redux store in sessionStorage
+// The point of this is to preserve the store across reloads while not persisting it across GUI restarts
+//
+// If the user reloads the page, while a swap is running we want to
+// continue displaying the correct state of the swap
+const persistConfig = {
+  key: "gui-global-state-store",
+  storage: sessionStorage,
+};
+
+const persistedReducer = persistReducer(
+  persistConfig,
+  combineReducers(reducers),
+);
+
 export const store = configureStore({
-  reducer: reducers,
+  reducer: persistedReducer,
 });
 
+export const persistor = persistStore(store);
+
 export type AppDispatch = typeof store.dispatch;
 export type RootState = ReturnType<typeof store.getState>;

src-gui/yarn.lock

@@ -2803,6 +2803,11 @@ receptacle@^1.3.2:
   dependencies:
     ms "^2.1.1"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
 redux-thunk@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-3.1.0.tgz#94aa6e04977c30e14e892eae84978c1af6058ff3"

swap/src/cli/api/tauri_bindings.rs

@@ -1,14 +1,10 @@
-/**
+use crate::{monero, network::quote::BidQuote};
- * TOOD: Perhaps we should move this to the `src-tauri` package.
- */
 use anyhow::Result;
 use bitcoin::Txid;
 use serde::Serialize;
 use typeshare::typeshare;
 use uuid::Uuid;
 
-use crate::{monero, network::quote::BidQuote};
-
 static SWAP_PROGRESS_EVENT_NAME: &str = "swap-progress-update";
 
 #[derive(Debug, Clone)]
@@ -29,8 +25,8 @@ impl TauriHandle {
 
     #[allow(unused_variables)]
     pub fn emit_tauri_event<S: Serialize + Clone>(&self, event: &str, payload: S) -> Result<()> {
-        #[cfg(tauri)]
+        #[cfg(feature = "tauri")]
-        self.0.emit(event, payload).map_err(|e| e.into())?;
+        tauri::Emitter::emit(self.0.as_ref(), event, payload).map_err(anyhow::Error::from)?;
 
         Ok(())
     }