feat: Display update dialog in React, store update infos in Redux

src/main/dev-app-update.yml

@@ -0,0 +1,5 @@
+owner: UnstoppableSwap
+repo: unstoppableswap-gui
+provider: github
+releaseType: prerelease
+updaterCacheDirName: unstoppableswap-gui-updater

src/main/main.ts

@@ -33,6 +33,7 @@ import {
   suspendCurrentSwap,
   withdrawAllBitcoin,
 } from './cli/rpc';
+import initAutoUpdater from './updater';
 
 let mainWindow: BrowserWindow | null = null;
 
@@ -140,6 +141,7 @@ if (gotTheLock) {
         await spawnTor();
       }
 
+      initAutoUpdater();
       return 0;
     })
     .catch((e) =>

src/main/updater.ts

@@ -1,20 +1,13 @@
-import { autoUpdater } from 'electron-updater';
-import { BrowserWindow, dialog } from 'electron';
+import { UpdateInfo, autoUpdater } from 'electron-updater';
 import logger from '../utils/logger';
+import { isDevelopment } from 'store/config';
+import { updateReceived } from 'store/features/updateSlice';
+import { store } from './store/mainStore';
 
-export default async function initAutoUpdater(mainWindow: BrowserWindow) {
-  autoUpdater.on('update-downloaded', (info: any) => {
-    logger.info({ info }, 'Update downloaded');
-  });
-  autoUpdater.on('update-available', (info: any) => {
-    if (mainWindow === null) {
-      return;
-    }
-    dialog.showMessageBoxSync(mainWindow, {
-      title: 'Update available',
-      message: `Version ${info.version} is available. We recommend you update now by downloading the latest release from https://unstoppableswap.net/`,
-      type: 'info',
-    });
+export default async function initAutoUpdater() {
+  autoUpdater.on('update-available', (info: UpdateInfo) => {
+    store.dispatch(updateReceived(info));
+    logger.info({ info }, 'Update available');
   });
   autoUpdater.on('update-not-available', (info: any) => {
     logger.info({ info }, 'Update not available');
@@ -29,7 +22,12 @@ export default async function initAutoUpdater(mainWindow: BrowserWindow) {
   autoUpdater.autoDownload = false;
   autoUpdater.allowPrerelease = false;
 
-  logger.info('Starting auto updater');
+  // This is for development purposes only. It will force the auto updater to use the dev-app-update.yml file for updates.
+  if(isDevelopment) {
+    autoUpdater.forceDevUpdateConfig = true;
+    autoUpdater.allowDowngrade = true;
+  }
 
-  await autoUpdater.checkForUpdatesAndNotify();
+  logger.info('Starting auto updater');
+  await autoUpdater.checkForUpdates();
 }

src/renderer/components/App.tsx

@@ -8,6 +8,7 @@ import SwapPage from './pages/swap/SwapPage';
 import WalletPage from './pages/wallet/WalletPage';
 import HelpPage from './pages/help/HelpPage';
 import GlobalSnackbarProvider from './snackbar/GlobalSnackbarProvider';
+import UpdaterDialog from './modal/updater/UpdaterDialog';
 
 const useStyles = makeStyles((theme) => ({
   innerContent: {
@@ -57,6 +58,7 @@ export default function App() {
     <ThemeProvider theme={theme}>
       <GlobalSnackbarProvider>
         <CssBaseline />
+        <UpdaterDialog />
         <Router>
           <Navigation />
           <InnerContent />

src/renderer/components/modal/updater/UpdaterDialog.tsx

@@ -0,0 +1,69 @@
+import SystemUpdateIcon from '@material-ui/icons/SystemUpdate';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Button,
+} from '@material-ui/core';
+import { UpdateInfo } from 'electron-updater';
+import { useAppDispatch, useAppSelector } from 'store/hooks';
+import { updateShownToUser } from 'store/features/updateSlice';
+
+export default function UpdaterDialog() {
+  const dispatch = useAppDispatch();
+  const updateNotification: UpdateInfo | null = useAppSelector(
+    (state) => state.update.updateNotification
+  );
+
+  if (updateNotification == null) return null;
+
+  function hideNotification() {
+    dispatch(updateShownToUser());
+  }
+
+  function openDownloadUrl() {
+    const downloadUrl = `https://github.com/UnstoppableSwap/unstoppableswap-gui/releases/tag/v${updateNotification!.version}`;
+    window.open(downloadUrl, '_blank');
+    hideNotification();
+  }
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="xs"
+      open={Boolean(updateNotification)}
+      onClose={() => hideNotification()}
+    >
+      <DialogTitle>Update Available</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          A new version (v{updateNotification.version}) of the software was
+          released on{' '}
+          {new Date(updateNotification.releaseDate).toLocaleDateString()}.
+          Please download and install the update manually to benefit from new
+          features and enhancements. Staying updated ensures you have the latest
+          improvements and security fixes.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="text"
+          color="default"
+          onClick={() => hideNotification()}
+        >
+          Remind me later
+        </Button>
+        <Button
+          endIcon={<SystemUpdateIcon />}
+          variant="contained"
+          onClick={openDownloadUrl}
+          color="primary"
+        >
+          Download
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/store/combinedReducer.ts

@@ -4,6 +4,7 @@ import torSlice from './features/torSlice';
 import rpcSlice from './features/rpcSlice';
 import alertsSlice from './features/alertsSlice';
 import ratesSlice from './features/ratesSlice';
+import updateSlice from './features/updateSlice';
 
 export const reducers = {
   swap: swapReducer,
@@ -12,4 +13,5 @@ export const reducers = {
   rpc: rpcSlice,
   alerts: alertsSlice,
   rates: ratesSlice,
+  update: updateSlice,
 };

src/store/features/updateSlice.ts

@@ -0,0 +1,27 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { UpdateInfo } from 'electron-updater';
+
+export interface UpdateState {
+  updateNotification: UpdateInfo | null;
+}
+
+const initialState: UpdateState = {
+  updateNotification: null,
+};
+
+const updateSlice = createSlice({
+  name: 'update',
+  initialState,
+  reducers: {
+    updateReceived: (state, action: PayloadAction<UpdateInfo>) => {
+      state.updateNotification = action.payload;
+    },
+    updateShownToUser: (state) => {
+      state.updateNotification = null;
+    },
+  },
+});
+
+export const { updateReceived, updateShownToUser } = updateSlice.actions;
+
+export default updateSlice.reducer;