feat(gui, tauri): Save settings in Tauri storage (#102)

- Implemented dual persistence strategy:
  - **User Settings**: Persisted across app restarts using `tauri-plugin-store`.
  - **Transient State**: Persisted across page reloads using `sessionStorage`.
- Added `settingsSlice` reducer for managing persistent user settings.
- Updated Redux store configuration to handle multiple persistence layers.
- Added a new Settings page in the GUI where users can specify custom Electrum RPC URLs for Bitcoin and Monero node URLs.
  - Users can input their preferred Electrum server (`ssl://host:port`) and Monero daemon (`http://host:port`).
  - Input fields include validation to ensure correct URL formats.
  - Settings persist across application restarts using Tauri's storage plugin.
  - A reset option is available to revert to default settings.
- Improved the Daemon Controller in the Help page:
  - Renamed `RpcControlBox` to `DaemonControlBox` for clarity.
  - Users can now start the daemon manually if it isn't running or has failed.
  - Added a "Restart GUI" button to apply new settings immediately.
  - Displayed the daemon's status within the controller.
- Upgraded Tauri and related plugins to stable version `2.0.0`:
  - Updated `tauri`, `tauri-build`, and `tauri-utils` to `2.0.0`.
  - Ensured compatibility with the latest stable release.
- Updated Tauri plugins to version `2.0.0`:
  - `tauri-plugin-clipboard-manager`
  - `tauri-plugin-shell`
  - Added new plugins:
    - `tauri-plugin-store` for settings persistence.
    - `tauri-plugin-process` to enable application relaunch.
- Deferred Context initialization until explicitly triggered from the frontend.
  - Moved Context setup from the `setup` function to a new `initialize_context` Tauri command.
  - Allows the application to start without immediately initializing the backend context.
  - Context initialization now considers user-provided settings for Electrum and Monero nodes.
- Introduced a `ValidatedTextField` component for form inputs with validation logic.
  - Provides immediate feedback on input validity.
  - Used in the Settings page for Electrum and Monero node URLs.
- If the user provides an override Monero remote daemon, we check if it reachable and on the correct network before starting the `monero-wallet-rpc`
- Changed `bitcoin_confirmation_target` type from `usize` to `u16`.

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

@@ -1,44 +1,20 @@
-import { CircularProgress } from "@material-ui/core";
+import { Button, CircularProgress } from "@material-ui/core";
 import { Alert, AlertProps } from "@material-ui/lab";
 import { TauriContextInitializationProgress } from "models/tauriModel";
-import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "store/hooks";
 import { exhaustiveGuard } from "utils/typescriptUtils";
 
-const FUNNY_INIT_MESSAGES = [
-  "Initializing quantum entanglement...",
-  "Generating one-time pads from cosmic background radiation...",
-  "Negotiating key exchange with aliens...",
-  "Optimizing elliptic curves for maximum sneakiness...",
-  "Transforming plaintext into ciphertext via arcane XOR rituals...",
-  "Salting your hash with exotic mathematical seasonings...",
-  "Performing advanced modular arithmetic gymnastics...",
-  "Consulting the Oracle of Randomness...",
-  "Executing top-secret permutation protocols...",
-  "Summoning prime factors from the mathematical aether...",
-  "Deploying steganographic squirrels to hide your nuts of data...",
-  "Initializing the quantum superposition of your keys...",
-  "Applying post-quantum cryptographic voodoo...",
-  "Encrypting your data with the tears of frustrated regulators...",
-];
-
 function LoadingSpinnerAlert({ ...rest }: AlertProps) {
   return <Alert icon={<CircularProgress size={22} />} {...rest} />;
 }
 
 export default function DaemonStatusAlert() {
   const contextStatus = useAppSelector((s) => s.rpc.status);
+  const navigate = useNavigate();
 
-  const [initMessage] = useState(
-    FUNNY_INIT_MESSAGES[Math.floor(Math.random() * FUNNY_INIT_MESSAGES.length)],
-  );
-
-  if (contextStatus == null) {
-    return (
-      <LoadingSpinnerAlert severity="warning">
-        {initMessage}
-      </LoadingSpinnerAlert>
-    );
+  if (contextStatus === null) {
+    return <Alert severity="info">The daemon is not running</Alert>;
   }
 
   switch (contextStatus.type) {
@@ -68,7 +44,20 @@ export default function DaemonStatusAlert() {
       return <Alert severity="success">The daemon is running</Alert>;
     case "Failed":
       return (
-        <Alert severity="error">The daemon has stopped unexpectedly</Alert>
+        <Alert
+          severity="error"
+          action={
+            <Button
+              size="small"
+              variant="outlined"
+              onClick={() => navigate("/help")}
+            >
+              View Logs
+            </Button>
+          }
+        >
+          The daemon has stopped unexpectedly
+        </Alert>
       );
     default:
       return exhaustiveGuard(contextStatus);

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

@@ -14,7 +14,7 @@ export default function FundsLeftInWalletAlert() {
         severity="info"
         action={
           <Button
-            color="inherit"
+            variant="outlined"
             size="small"
             onClick={() => navigate("/wallet")}
           >

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

@@ -14,7 +14,7 @@ export default function UnfinishedSwapsAlert() {
         variant="filled"
         action={
           <Button
-            color="inherit"
+            variant="outlined"
             size="small"
             onClick={() => navigate("/history")}
           >

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

@@ -53,7 +53,9 @@ export default function ListSellersDialog({
   }
 
   function getMultiAddressError(): string | null {
-    return isValidMultiAddressWithPeerId(rendezvousAddress) ? null : "Address is invalid or missing peer ID";
+    return isValidMultiAddressWithPeerId(rendezvousAddress)
+      ? null
+      : "Address is invalid or missing peer ID";
   }
 
   function handleSuccess({ sellers }: ListSellersResponse) {

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

@@ -64,7 +64,7 @@ export default function SwapDialog({
         ) : (
           <>
             <SwapStatePage state={swap.state} />
-            <SwapStateStepper state={swap.state}/>
+            <SwapStateStepper state={swap.state} />
           </>
         )}
       </DialogContent>

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

@@ -15,12 +15,12 @@ type PathStep = [type: PathType, step: number, isError: boolean];
  * @param latestState - The latest state of the swap process
  * @returns A tuple containing [PathType, activeStep, errorFlag]
  */
-function getActiveStep(
-  state: SwapState | null
-): PathStep {
+function getActiveStep(state: SwapState | null): PathStep {
   // In case we cannot infer a correct step from the state
   function fallbackStep(reason: string) {
-    console.error(`Unable to choose correct stepper type (reason: ${reason}, state: ${JSON.stringify(state)}`);
+    console.error(
+      `Unable to choose correct stepper type (reason: ${reason}, state: ${JSON.stringify(state)}`,
+    );
     return [PathType.HAPPY_PATH, 0, true] as PathStep;
   }
 
@@ -36,12 +36,16 @@ function getActiveStep(
 
   // If the swap is released but we do not have a previous state we fallback
   if (latestState === null) {
-    return fallbackStep("Swap has been released but we do not have a previous state saved to display");
+    return fallbackStep(
+      "Swap has been released but we do not have a previous state saved to display",
+    );
   }
 
   // This should really never happen. For this statement to be true, the host has to submit a "Released" event twice
-  if(latestState.type === "Released") {
-    return fallbackStep("Both the current and previous states are both of type 'Released'.");
+  if (latestState.type === "Released") {
+    return fallbackStep(
+      "Both the current and previous states are both of type 'Released'.",
+    );
   }
 
   switch (latestState.type) {
@@ -111,8 +115,8 @@ function getActiveStep(
       return [PathType.UNHAPPY_PATH, 1, true];
     default:
       return fallbackStep("No step is assigned to the current state");
-      // TODO: Make this guard work. It should force the compiler to check if we have covered all possible cases.
-      // return exhaustiveGuard(latestState.type);
+    // TODO: Make this guard work. It should force the compiler to check if we have covered all possible cases.
+    // return exhaustiveGuard(latestState.type);
   }
 }
 
@@ -158,7 +162,7 @@ const UNHAPPY_PATH_STEP_LABELS = [
 export default function SwapStateStepper({
   state,
 }: {
-  state: SwapState | null
+  state: SwapState | null;
 }) {
   const [pathType, activeStep, error] = getActiveStep(state);
 

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

@@ -18,11 +18,7 @@ import InitiatedPage from "./init/InitiatedPage";
 import InitPage from "./init/InitPage";
 import WaitingForBitcoinDepositPage from "./init/WaitingForBitcoinDepositPage";
 
-export default function SwapStatePage({
-  state,
-}: {
-  state: SwapState | null
-}) {
+export default function SwapStatePage({ state }: { state: SwapState | null }) {
   // TODO: Reimplement this using tauri events
   /*
   const isSyncingMoneroWallet = useAppSelector(

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

@@ -0,0 +1,55 @@
+import { TextFieldProps, TextField } from "@material-ui/core";
+import { useState, useEffect, useCallback } from "react";
+
+interface ValidatedTextFieldProps extends Omit<TextFieldProps, "onChange" | "value"> {
+  value: string | null;
+  isValid: (value: string) => boolean;
+  onValidatedChange: (value: string | null) => void;
+  allowEmpty?: boolean;
+  helperText?: string;
+}
+
+export default function ValidatedTextField({
+  label,
+  value = "",
+  isValid,
+  onValidatedChange,
+  helperText = "Invalid input",
+  variant = "standard",
+  allowEmpty = false,
+  ...props
+}: ValidatedTextFieldProps) {
+  const [inputValue, setInputValue] = useState(value || "");
+
+  const handleChange = useCallback(
+    (newValue: string) => {
+      const trimmedValue = newValue.trim();
+      setInputValue(trimmedValue);
+
+      if (trimmedValue === "" && allowEmpty) {
+        onValidatedChange(null);
+      } else if (isValid(trimmedValue)) {
+        onValidatedChange(trimmedValue);
+      }
+    },
+    [allowEmpty, isValid, onValidatedChange]
+  );
+
+  useEffect(() => {
+    setInputValue(value || "");
+  }, [value]);
+
+  const isError = allowEmpty && inputValue === "" ? false : !isValid(inputValue);
+
+  return (
+    <TextField
+      label={label}
+      value={inputValue}
+      onChange={(e) => handleChange(e.target.value)}
+      error={isError}
+      helperText={isError ? helperText : ""}
+      variant={variant}
+      {...props}
+    />
+  );
+}

src-gui/src/renderer/components/pages/help/DaemonControlBox.tsx

@@ -1,11 +1,13 @@
 import { Box, makeStyles } from "@material-ui/core";
 import FolderOpenIcon from "@material-ui/icons/FolderOpen";
 import PlayArrowIcon from "@material-ui/icons/PlayArrow";
-import StopIcon from "@material-ui/icons/Stop";
 import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
-import { useAppSelector, useIsContextAvailable } from "store/hooks";
+import { useAppSelector } from "store/hooks";
 import InfoBox from "../../modal/swap/InfoBox";
 import CliLogsBox from "../../other/RenderedCliLog";
+import { initializeContext } from "renderer/rpc";
+import { relaunch } from "@tauri-apps/plugin-process";
+import RotateLeftIcon from "@material-ui/icons/RotateLeft";
 
 const useStyles = makeStyles((theme) => ({
   actionsOuter: {
@@ -15,17 +17,26 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function RpcControlBox() {
-  const isRunning = useIsContextAvailable();
+export default function DaemonControlBox() {
   const classes = useStyles();
   const logs = useAppSelector((s) => s.rpc.logs);
 
+  // The daemon can be manually started if it has failed or if it has not been started yet
+  const canContextBeManuallyStarted = useAppSelector(
+    (s) => s.rpc.status?.type === "Failed" || s.rpc.status === null,
+  );
+  const isContextInitializing = useAppSelector(
+    (s) => s.rpc.status?.type === "Initializing",
+  );
+
+  const stringifiedDaemonStatus = useAppSelector((s) => s.rpc.status?.type ?? "not started");
+
   return (
     <InfoBox
-      title={`Daemon Controller`}
+      title={`Daemon Controller (${stringifiedDaemonStatus})`}
       mainContent={
         <CliLogsBox
-          label="Swap Daemon Logs (current session only)"
+          label="Logs (current session only)"
           logs={logs}
         />
       }
@@ -34,22 +45,22 @@ export default function RpcControlBox() {
           <PromiseInvokeButton
             variant="contained"
             endIcon={<PlayArrowIcon />}
-            disabled={isRunning}
-            onInvoke={() => {
-              throw new Error("Not implemented");
-            }}
+            onInvoke={initializeContext}
+            requiresContext={false}
+            disabled={!canContextBeManuallyStarted}
+            isLoadingOverride={isContextInitializing}
+            displayErrorSnackbar
           >
             Start Daemon
           </PromiseInvokeButton>
           <PromiseInvokeButton
             variant="contained"
-            endIcon={<StopIcon />}
-            disabled={!isRunning}
-            onInvoke={() => {
-              throw new Error("Not implemented");
-            }}
+            endIcon={<RotateLeftIcon />}
+            onInvoke={relaunch}
+            requiresContext={false}
+            displayErrorSnackbar
           >
-            Stop Daemon
+            Restart GUI
           </PromiseInvokeButton>
           <PromiseInvokeButton
             endIcon={<FolderOpenIcon />}
@@ -57,6 +68,7 @@ export default function RpcControlBox() {
             size="small"
             tooltipTitle="Open the data directory of the Swap Daemon in your file explorer"
             onInvoke={() => {
+              // TODO: Implement this
               throw new Error("Not implemented");
             }}
           />

src-gui/src/renderer/components/pages/help/HelpPage.tsx

@@ -2,14 +2,15 @@ import { Box, makeStyles } from "@material-ui/core";
 import ContactInfoBox from "./ContactInfoBox";
 import DonateInfoBox from "./DonateInfoBox";
 import FeedbackInfoBox from "./FeedbackInfoBox";
-import RpcControlBox from "./RpcControlBox";
-import TorInfoBox from "./TorInfoBox";
+import DaemonControlBox from "./DaemonControlBox";
+import SettingsBox from "./SettingsBox";
 
 const useStyles = makeStyles((theme) => ({
   outer: {
     display: "flex",
     gap: theme.spacing(2),
     flexDirection: "column",
+    paddingBottom: theme.spacing(2),
   },
 }));
 
@@ -18,8 +19,8 @@ export default function HelpPage() {
 
   return (
     <Box className={classes.outer}>
-      <RpcControlBox />
-      <TorInfoBox />
+      <DaemonControlBox />
+      <SettingsBox />
       <FeedbackInfoBox />
       <ContactInfoBox />
       <DonateInfoBox />

src-gui/src/renderer/components/pages/help/SettingsBox.tsx

@@ -0,0 +1,153 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Typography,
+  IconButton,
+  Box,
+  makeStyles,
+  Tooltip,
+} from "@material-ui/core";
+import InfoBox from "renderer/components/modal/swap/InfoBox";
+import {
+  resetSettings,
+  setElectrumRpcUrl,
+  setMoneroNodeUrl,
+} from "store/features/settingsSlice";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import ValidatedTextField from "renderer/components/other/ValidatedTextField";
+import RefreshIcon from "@material-ui/icons/Refresh";
+import HelpIcon from '@material-ui/icons/HelpOutline';
+import { ReactNode } from "react";
+
+const PLACEHOLDER_ELECTRUM_RPC_URL = "ssl://blockstream.info:700";
+const PLACEHOLDER_MONERO_NODE_URL = "http://xmr-node.cakewallet.com:18081";
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+  }
+}));
+
+export default function SettingsBox() {
+  const dispatch = useAppDispatch();
+  const classes = useStyles();
+  
+  return (
+    <InfoBox
+      title={
+        <Box className={classes.title}>
+          Settings
+          <IconButton
+          size="small"
+          onClick={() => {
+            dispatch(resetSettings());
+          }}
+        >
+          <RefreshIcon />
+        </IconButton>
+        </Box>
+      }
+      additionalContent={
+        <TableContainer>
+          <Table>
+            <TableBody>
+              <ElectrumRpcUrlSetting />
+              <MoneroNodeUrlSetting />
+            </TableBody>
+          </Table>
+        </TableContainer>
+      }
+      mainContent={
+        <Typography variant="subtitle2">
+          Some of these settings require a restart to take effect.
+        </Typography>
+      }
+      icon={null}
+      loading={false}
+    />
+  );
+}
+
+// URL validation function, forces the URL to be in the format of "protocol://host:port/"
+function isValidUrl(url: string, allowedProtocols: string[]): boolean {
+  const urlPattern = new RegExp(`^(${allowedProtocols.join("|")})://[^\\s]+:\\d+/?$`);
+  return urlPattern.test(url);
+}
+
+function ElectrumRpcUrlSetting() {
+  const electrumRpcUrl = useAppSelector((s) => s.settings.electrum_rpc_url);
+  const dispatch = useAppDispatch();
+
+  function isValid(url: string): boolean {
+    return isValidUrl(url, ["ssl", "tcp"]);
+  }
+
+  return (
+    <TableRow>
+      <TableCell>
+        <SettingLabel label="Custom Electrum RPC URL" tooltip="This is the URL of the Electrum server that the GUI will connect to. It is used to sync Bitcoin transactions. If you leave this field empty, the GUI will choose from a list of known servers at random." />
+      </TableCell>
+      <TableCell>
+        <ValidatedTextField
+          label="Electrum RPC URL"
+          value={electrumRpcUrl}
+          isValid={isValid}
+          onValidatedChange={(value) => {
+            dispatch(setElectrumRpcUrl(value));
+          }}
+          fullWidth
+          placeholder={PLACEHOLDER_ELECTRUM_RPC_URL}
+          allowEmpty
+        />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function SettingLabel({ label, tooltip }: { label: ReactNode, tooltip: string | null }) {
+  return <Box style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+    <Box>
+      {label}
+    </Box>
+    <Tooltip title={tooltip}>
+      <IconButton size="small">
+        <HelpIcon />
+      </IconButton>
+    </Tooltip>
+  </Box>
+}
+
+function MoneroNodeUrlSetting() {
+  const moneroNodeUrl = useAppSelector((s) => s.settings.monero_node_url);
+  const dispatch = useAppDispatch();
+
+  function isValid(url: string): boolean {
+    return isValidUrl(url, ["http"]);
+  }
+
+  return (
+    <TableRow>
+      <TableCell>
+       <SettingLabel label="Custom Monero Node URL" tooltip="This is the URL of the Monero node that the GUI will connect to. Ensure the node is listening for RPC connections over HTTP. If you leave this field empty, the GUI will choose from a list of known nodes at random." />
+      </TableCell>
+      <TableCell>
+        <ValidatedTextField
+          label="Monero Node URL"
+          value={moneroNodeUrl}
+          isValid={isValid}
+          onValidatedChange={(value) => {
+            dispatch(setMoneroNodeUrl(value));
+          }}
+          fullWidth
+          placeholder={PLACEHOLDER_MONERO_NODE_URL}
+          allowEmpty
+        />
+      </TableCell>
+    </TableRow>
+  );
+}

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

@@ -1,21 +1,21 @@
 import {
-    Box,
-    Link,
-    makeStyles,
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableRow,
+  Box,
+  Link,
+  makeStyles,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
 } from "@material-ui/core";
 import { OpenInNew } from "@material-ui/icons";
 import { GetSwapInfoResponse } from "models/tauriModel";
 import CopyableMonospaceTextBox from "renderer/components/other/CopyableMonospaceTextBox";
 import MonospaceTextBox from "renderer/components/other/MonospaceTextBox";
 import {
-    MoneroBitcoinExchangeRate,
-    PiconeroAmount,
-    SatsAmount,
+  MoneroBitcoinExchangeRate,
+  PiconeroAmount,
+  SatsAmount,
 } from "renderer/components/other/Units";
 import { isTestnet } from "store/config";
 import { getBitcoinTxExplorerUrl } from "utils/conversionUtils";

src-gui/src/renderer/components/pages/swap/SwapWidget.tsx

@@ -176,9 +176,7 @@ function HasProviderSwapWidget({
 function HasNoProvidersSwapWidget() {
   const forceShowDialog = useAppSelector((state) => state.swap.state !== null);
   const isPublicRegistryDown = useAppSelector((state) =>
-    isRegistryDown(
-      state.providers.registry.connectionFailsCount,
-    ),
+    isRegistryDown(state.providers.registry.connectionFailsCount),
   );
   const classes = useStyles();
 
@@ -254,9 +252,7 @@ export default function SwapWidget() {
   const providerLoading = useAppSelector(
     (state) =>
       state.providers.registry.providers === null &&
-      !isRegistryDown(
-        state.providers.registry.connectionFailsCount,
-      ),
+      !isRegistryDown(state.providers.registry.connectionFailsCount),
   );
 
   if (providerLoading) {

src-gui/src/renderer/components/pages/wallet/WithdrawWidget.tsx

@@ -48,9 +48,7 @@ export default function WithdrawWidget() {
             endIcon={<SendIcon />}
             size="large"
             onClick={onShowDialog}
-            disabled={
-              walletBalance === null || walletBalance <= 0
-            }
+            disabled={walletBalance === null || walletBalance <= 0}
           >
             Withdraw
           </Button>