feat(gui): Display progress of monero-wallet-rpc download (#170)

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

@@ -1,12 +1,22 @@
-import { Button } from "@material-ui/core";
+import { Box, Button, LinearProgress, makeStyles } from "@material-ui/core";
 import { Alert } from "@material-ui/lab";
 import { TauriContextInitializationProgress } from "models/tauriModel";
 import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "store/hooks";
 import { exhaustiveGuard } from "utils/typescriptUtils";
 import { LoadingSpinnerAlert } from "./LoadingSpinnerAlert";
+import { bytesToMb } from "utils/conversionUtils";
+
+const useStyles = makeStyles((theme) => ({
+  innerAlert: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2),
+  },
+}));
 
 export default function DaemonStatusAlert() {
+  const classes = useStyles();
   const contextStatus = useAppSelector((s) => s.rpc.status);
   const navigate = useNavigate();
 
@@ -16,20 +26,32 @@ export default function DaemonStatusAlert() {
 
   switch (contextStatus.type) {
     case "Initializing":
-      switch (contextStatus.content) {
-        case TauriContextInitializationProgress.OpeningBitcoinWallet:
+      switch (contextStatus.content.type) {
+        case "OpeningBitcoinWallet":
           return (
             <LoadingSpinnerAlert severity="warning">
               Connecting to the Bitcoin network
             </LoadingSpinnerAlert>
           );
-        case TauriContextInitializationProgress.OpeningMoneroWallet:
+        case "DownloadingMoneroWalletRpc":
+          return (
+            <LoadingSpinnerAlert severity="warning">
+              <Box className={classes.innerAlert}>
+                <Box>
+                  Downloading and verifying the Monero wallet RPC (
+                  {bytesToMb(contextStatus.content.content.size).toFixed(2)} MB)
+                </Box>
+                <LinearProgress variant="determinate" value={contextStatus.content.content.progress} />
+              </Box>
+            </LoadingSpinnerAlert >
+          );
+        case "OpeningMoneroWallet":
           return (
             <LoadingSpinnerAlert severity="warning">
               Connecting to the Monero network
             </LoadingSpinnerAlert>
           );
-        case TauriContextInitializationProgress.OpeningDatabase:
+        case "OpeningDatabase":
           return (
             <LoadingSpinnerAlert severity="warning">
               Opening the local database

src-gui/src/utils/conversionUtils.ts

@@ -30,9 +30,8 @@ export function isBtcAddressValid(address: string, testnet: boolean) {
 }
 
 export function getBitcoinTxExplorerUrl(txid: string, testnet: boolean) {
-  return `https://mempool.space/${
-    testnet ? "/testnet" : ""
-  }/tx/${txid}`;
+  return `https://mempool.space/${testnet ? "/testnet" : ""
+    }/tx/${txid}`;
 }
 
 export function getMoneroTxExplorerUrl(txid: string, stagenet: boolean) {
@@ -67,3 +66,7 @@ export function rendezvousSellerToProviderStatus(
     testnet: isTestnet(),
   };
 }
+
+export function bytesToMb(bytes: number): number {
+  return bytes / (1024 * 1024);
+}