feature: add update modal and not show system prompt

Author: maparr

app/components/common/Version.tsx

@@ -21,6 +21,9 @@ import { getNetworkInfo } from '../../redux/network/selectors';
 import { checkUpdates as checkUpdatesIco } from '../../assets/images';
 import { AppThDispatch } from '../../types';
 import updaterSlice from '../../redux/updater/slice';
+import { SECOND } from '../../../shared/constants';
+import { Loader } from '../../basicComponents';
+import UpdateApplicationWarningModal from '../../screens/modal/UpdateApplicationWarningModal';
 import FeedbackButton from './Feedback';
 
 const Container = styled.div`
@@ -194,6 +197,29 @@ const UpdateStatus = () => {
   const isDownloading = useSelector(isUpdateDownloading);
   const isDownloaded = useSelector(isUpdateDownloaded);
   const error = useSelector(getError);
+  const [
+    isOpenUpdateApplicationWarningModal,
+    setIsOpenUpdateApplicationWarningModal,
+  ] = useState(false);
+  const [
+    showUpdateApplicationLoader,
+    setShowUpdateApplicationLoader,
+  ] = useState(false);
+
+  const handleRestartNow = () => {
+    setIsOpenUpdateApplicationWarningModal(false);
+    setShowUpdateApplicationLoader(true);
+    eventsService.installUpdate();
+
+    setTimeout(() => {
+      setShowUpdateApplicationLoader(false);
+    }, 10 * SECOND);
+  };
+
+  const handlePostpone = () => {
+    setIsOpenUpdateApplicationWarningModal(false);
+  };
+
   if (!isDownloading && !isDownloaded) return null;
 
   if (progress !== null && !isDownloaded) {
@@ -207,9 +233,19 @@ const UpdateStatus = () => {
     return (
       <>
         <ProgressChunk>Update is ready to install</ProgressChunk>
-        <PrimaryAction onClick={() => eventsService.installUpdate()}>
+        <PrimaryAction
+          onClick={() => setIsOpenUpdateApplicationWarningModal(true)}
+        >
           Restart Smapp
         </PrimaryAction>
+        <UpdateApplicationWarningModal
+          isOpen={isOpenUpdateApplicationWarningModal}
+          onApprove={handleRestartNow}
+          onCancel={handlePostpone}
+        />
+        {showUpdateApplicationLoader && (
+          <Loader size={Loader.sizes.BIG} note="UPDATE IN PROGESS..." />
+        )}
       </>
     );
   }

app/screens/modal/UpdateApplicationWarningModal.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+import Modal from '../../components/common/Modal';
+import { Button } from '../../basicComponents';
+import { smColors } from '../../vars';
+
+const ButtonsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: auto 0 15px 0;
+  padding-top: 30px;
+`;
+
+const Message = styled.pre`
+  font-size: 14px;
+  line-height: 1.33em;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  overflow-y: auto;
+  margin-top: 15px;
+
+  ul {
+    list-style: none;
+    margin-left: 10px;
+  }
+  li {
+    margin: 10px 0;
+  }
+  li:before {
+    content: '• ';
+    padding: 5px;
+  }
+`;
+
+const UpdateApplicationWarningModal = ({ isOpen, onApprove, onCancel }) => {
+  if (!isOpen) return null;
+
+  return (
+    <Modal header="Update SMAPP" height={380}>
+      <Message>
+        <p>
+          Restarting now is <b>CRITICAL</b> and may impact your node’s
+          performance and rewards.
+        </p>
+        <ul>
+          <li>
+            Click <b style={{ color: smColors.green }}>RESTART NOW</b> to apply
+            the update immediately. Delaying the update could result in
+            potential loss of rewards.
+          </li>
+          <li>
+            Click <b style={{ color: smColors.purple }}>POSTPONE</b> to delay
+            the update. Be aware that postponing may slow down your node’s
+            performance and future rewards.
+          </li>
+        </ul>
+      </Message>
+      <ButtonsWrapper>
+        <Button onClick={onCancel} isPrimary={false} text="POSTPONE" />
+        <Button onClick={onApprove} text="RESTART NOW" />
+      </ButtonsWrapper>
+    </Modal>
+  );
+};
+
+export default UpdateApplicationWarningModal;

desktop/main/createMainWindow.ts

@@ -1,5 +1,4 @@
-import { app, BrowserWindow, ipcMain } from 'electron';
-import { autoUpdater } from 'electron-updater';
+import { app, BrowserWindow, ipcMain, autoUpdater } from 'electron';
 import {
   BehaviorSubject,
   combineLatest,
@@ -35,6 +34,7 @@ export default () => {
   const $quit = new Subject<Electron.IpcMainEvent>();
   const $activate = fromAppEvent('activate');
   const $secondInstance = fromAppEvent('second-instance');
+  const $isUpdateInProgress = new BehaviorSubject<boolean>(false);
 
   //
   // Subscriptions & Reactions
@@ -84,5 +84,6 @@ export default () => {
     $showWindowOnLoad,
     $isWindowReady,
     $isSmappActivated: $activate,
+    $isUpdateInProgress,
   };
 };

desktop/main/promptBeforeClose.ts

@@ -19,7 +19,8 @@ const promptBeforeClose = (
   mainWindow: BrowserWindow,
   managers: Partial<Managers>,
   $isAppClosing: BehaviorSubject<boolean>,
-  $showWindowOnLoad: Subject<boolean>
+  $showWindowOnLoad: Subject<boolean>,
+  $isUpdateInProgress: BehaviorSubject<boolean>
 ) => {
   const showPrompt = async () => {
     if (!mainWindow) return CloseAppPromptResult.KEEP_SMESHING;
@@ -64,8 +65,10 @@ const promptBeforeClose = (
   };
 
   const handleClosingApp = async (event: Electron.Event) => {
-    event.preventDefault();
-    if (!mainWindow) {
+    // in case of autoUpdater before-quit-for-update event, the event may be undefined
+    event?.preventDefault();
+    // if user requested update or no mainWindow, do not show the prompt
+    if ($isUpdateInProgress.value || !mainWindow) {
       await quit();
       return;
     }

desktop/main/reactions/handleCloseApp.ts

@@ -12,7 +12,8 @@ export default (
   $managers: Subject<Managers>,
   $mainWindow: Subject<BrowserWindow>,
   $isAppClosing: BehaviorSubject<boolean>,
-  $showWindowOnLoad: Subject<boolean>
+  $showWindowOnLoad: Subject<boolean>,
+  $isUpdateInProgress: BehaviorSubject<boolean>
 ) =>
   makeSubscription(
     $quit.pipe(withLatestFrom($mainWindow, $managers)),
@@ -22,6 +23,7 @@ export default (
         mw,
         managers || {},
         $isAppClosing,
-        $showWindowOnLoad
+        $showWindowOnLoad,
+        $isUpdateInProgress
       )(event).catch((err) => logger.error('promptBeforeClose', err))
   );

desktop/main/sources/autoUpdate.ts

@@ -1,6 +1,7 @@
 import { BrowserWindow } from 'electron';
 import { UpdateInfo } from 'electron-updater';
 import {
+  BehaviorSubject,
   combineLatest,
   filter,
   first,
@@ -40,7 +41,8 @@ const handleAutoUpdates = (
   everyMs: number,
   $mainWindow: Observable<BrowserWindow>,
   $managers: Observable<Managers>,
-  $currentNetwork: Observable<Network | null>
+  $currentNetwork: Observable<Network | null>,
+  $isUpdateInProgress: BehaviorSubject<boolean>
 ) => {
   type DoDownload = boolean;
   type Data = [BrowserWindow, Network, DoDownload];
@@ -136,9 +138,10 @@ const handleAutoUpdates = (
       $request.next(true);
     }),
     // Trigger installation
-    fromIPC<void>(ipcConsts.AU_REQUEST_INSTALL).subscribe(() =>
-      installUpdate()
-    ),
+    fromIPC<void>(ipcConsts.AU_REQUEST_INSTALL).subscribe(() => {
+      $isUpdateInProgress.next(true);
+      return installUpdate();
+    }),
   ];
 
   return () => subs.forEach((sub) => sub.unsubscribe());

desktop/main/startApp.ts

@@ -133,6 +133,7 @@ const startApp = (): AppStore => {
     $isAppClosing,
     $showWindowOnLoad,
     $isWindowReady,
+    $isUpdateInProgress,
   } = createMainWindow();
   // Store
   const $storeService = observeStoreService();
@@ -218,7 +219,8 @@ const startApp = (): AppStore => {
       $managers,
       $mainWindow,
       $isAppClosing,
-      $showWindowOnLoad
+      $showWindowOnLoad,
+      $isUpdateInProgress
     ),
     // Unlock / Create wallet
     // Switch network
@@ -264,7 +266,8 @@ const startApp = (): AppStore => {
       CHECK_UPDATES_INTERVAL,
       $mainWindow,
       $managers,
-      $currentNetwork
+      $currentNetwork,
+      $isUpdateInProgress
     ),
     handleOpenDashboard($mainWindow, $currentNetwork),
     sendWarningsToRenderer($warnings, $mainWindow, $isWindowReady),

shared/constants.ts

@@ -47,8 +47,8 @@ export enum ExternalLinks {
 }
 
 export const BITS_PER_LABEL = 128;
-
-export const MINUTE = 60 * 1000;
+export const SECOND = 1000;
+export const MINUTE = 60 * SECOND;
 
 export const HOUR = MINUTE * 60;