fix: updated device update and authentication flow in onboarding as per mainapp

.changeset/bright-buses-allow.md

@@ -0,0 +1,6 @@
+---
+'@cypherock/cysync-core': patch
+'@cypherock/cysync-desktop': patch
+---
+
+updated device update and authentication flow in onboarding as per mainap

packages/cysync-core/src/constants/i18n/en.ts

@@ -727,15 +727,9 @@ const en = {
     },
     deviceAuth: {
       heading: 'Device Authentication',
-      title:
-        'Your X1 Vault will now be authenticated\nthrough Cypherock server to check its\nauthenticity ',
-      subtext:
-        'Do not disconnect your device while the operation is being done',
       success: {
-        title: 'Your X1 Vault is successfully authenticated',
         subtext: 'Wait while we take you to the next screen',
       },
-      error: 'X1 Vault authentication has failed',
     },
     joystickTraining: {
       heading: 'Joystick Instructions',
@@ -855,7 +849,6 @@ const en = {
           subtext: 'Please wait while we update your X1 Vault',
         },
         updateSuccessful: {
-          heading: 'X1 Vault updated successfully',
           headingWithVersion: 'X1 Vault updated to v${version} successfully',
           subtext: 'Your device is now operating on the latest firmware',
         },

packages/cysync-core/src/pages/OnBoarding/DeviceAuthentication/Dialogs/index.tsx

@@ -1,16 +1,22 @@
-import { SuccessDialog } from '@cypherock/cysync-ui';
+import { SuccessDialog, parseLangTemplate } from '@cypherock/cysync-ui';
 import { ManagerApp } from '@cypherock/sdk-app-manager';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { ErrorHandlerDialog, DeviceAuthenticating } from '~/components';
 import { routes } from '~/constants';
-import { DeviceTask, useDeviceTask, useNavigateTo } from '~/hooks';
+import {
+  DeviceTask,
+  useDeviceTask,
+  useDeviceUpdate,
+  useNavigateTo,
+} from '~/hooks';
 import { selectLanguage, useAppSelector } from '~/store';
 import { getCloseAppMethod, keyValueStore } from '~/utils';
 
 export const DeviceAuthDialog: React.FC = () => {
   const lang = useAppSelector(selectLanguage);
   const navigateTo = useNavigateTo();
+  const { version } = useDeviceUpdate();
 
   const deviceAuth: DeviceTask<boolean> = async connection => {
     const app = await ManagerApp.create(connection);
@@ -36,6 +42,16 @@ export const DeviceAuthDialog: React.FC = () => {
     }
   }, [task.result]);
 
+  const successTitle = useMemo(
+    () =>
+      parseLangTemplate(
+        lang.strings.onboarding.deviceUpdate.dialogs.updateSuccessful
+          .headingWithVersion,
+        { version },
+      ),
+    [version],
+  );
+
   return (
     <ErrorHandlerDialog
       error={task.error}
@@ -45,13 +61,13 @@ export const DeviceAuthDialog: React.FC = () => {
     >
       {task.result === undefined && (
         <DeviceAuthenticating
-          title={lang.strings.onboarding.deviceAuth.title}
-          subtitle={lang.strings.onboarding.deviceAuth.subtext}
+          title={lang.strings.deviceAuthentication.loading.title}
+          subtitle={lang.strings.deviceAuthentication.loading.subtitle}
         />
       )}
       {task.result && (
         <SuccessDialog
-          title={lang.strings.onboarding.deviceAuth.success.title}
+          title={successTitle}
           subtext={lang.strings.onboarding.deviceAuth.success.subtext}
         />
       )}

packages/cysync-core/src/pages/OnBoarding/DeviceUpdate/Dialogs/index.tsx

@@ -2,22 +2,24 @@ import {
   ConfirmationDialog,
   FirmwareDownloadGreenIcon,
   ProgressDialog,
-  SuccessDialog,
 } from '@cypherock/cysync-ui';
-import React, { FC, useEffect, ReactElement } from 'react';
+import React, { FC, ReactElement, useEffect, useRef } from 'react';
 
-import { ErrorHandlerDialog } from '~/components';
+import { ErrorHandlerDialog, LoaderDialog } from '~/components';
 import { routes } from '~/constants';
-import { useNavigateTo, useDeviceUpdate, DeviceUpdateState } from '~/hooks';
-import { useAppSelector, selectLanguage } from '~/store';
+import { DeviceConnectionStatus, useDevice } from '~/context';
+import { DeviceUpdateState, useDeviceUpdate, useNavigateTo } from '~/hooks';
+import { selectLanguage, useAppSelector } from '~/store';
 import { getCloseAppMethod } from '~/utils';
 
 import { DeviceUpdateLoading } from './DeviceUpdateLoading';
 
 export const DeviceUpdateDialogBox: FC = () => {
   const lang = useAppSelector(selectLanguage);
+  const { deviceUpdate } = lang.strings.onboarding;
 
   const navigateTo = useNavigateTo();
+  const { connection } = useDevice();
 
   const toNextPage = () => {
     navigateTo(routes.onboarding.deviceAuthentication.path);
@@ -26,65 +28,58 @@ export const DeviceUpdateDialogBox: FC = () => {
   const { state, downloadProgress, version, errorToShow, onRetry } =
     useDeviceUpdate();
 
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
   useEffect(() => {
-    if (state === DeviceUpdateState.NotRequired) {
-      toNextPage();
+    if (state === DeviceUpdateState.Successful) {
+      timeoutRef.current = setTimeout(toNextPage, 10000);
     }
+    if (state === DeviceUpdateState.NotRequired) toNextPage();
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
   }, [state]);
 
+  useEffect(() => {
+    if (
+      state === DeviceUpdateState.Successful &&
+      connection?.status === DeviceConnectionStatus.CONNECTED
+    ) {
+      clearTimeout(timeoutRef.current);
+      toNextPage();
+    }
+  }, [state, connection?.status]);
+
   const DeviceUpdateDialogs: Partial<Record<DeviceUpdateState, ReactElement>> =
     {
       [DeviceUpdateState.Checking]: (
-        <DeviceUpdateLoading
-          text={lang.strings.onboarding.deviceUpdate.dialogs.checking.title}
-        />
+        <DeviceUpdateLoading text={deviceUpdate.dialogs.checking.title} />
       ),
       [DeviceUpdateState.Confirmation]: (
         <ConfirmationDialog
-          title={
-            lang.strings.onboarding.deviceUpdate.dialogs.confirmation.title
-          }
+          title={deviceUpdate.dialogs.confirmation.title}
           icon={<FirmwareDownloadGreenIcon />}
-          subtext={
-            lang.strings.onboarding.deviceUpdate.dialogs.confirmation.subtext
-          }
+          subtext={deviceUpdate.dialogs.confirmation.subtext}
           textVariables={{ version }}
         />
       ),
       [DeviceUpdateState.Updating]: (
         <ProgressDialog
-          title={lang.strings.onboarding.deviceUpdate.dialogs.updating.heading}
-          subtext={
-            lang.strings.onboarding.deviceUpdate.dialogs.updating.subtext
-          }
+          title={deviceUpdate.dialogs.updating.heading}
+          subtext={deviceUpdate.dialogs.updating.subtext}
           icon={<FirmwareDownloadGreenIcon />}
           progress={Number(downloadProgress.toFixed(0))}
+          versionText={deviceUpdate.version}
           versionTextVariables={{ version }}
         />
       ),
-      [DeviceUpdateState.Successful]: (
-        <SuccessDialog
-          title={
-            lang.strings.onboarding.deviceUpdate.dialogs.updateSuccessful
-              .heading
-          }
-          subtext={
-            lang.strings.onboarding.deviceUpdate.dialogs.updateSuccessful
-              .subtext
-          }
-          buttonText={lang.strings.buttons.continue}
-          handleClick={toNextPage}
-        />
-      ),
+      [DeviceUpdateState.Successful]: <LoaderDialog />,
     };
 
   return (
     <ErrorHandlerDialog
       error={errorToShow}
       noDelay
-      defaultMsg={
-        lang.strings.onboarding.deviceUpdate.dialogs.updateFailed.subtext
-      }
+      defaultMsg={deviceUpdate.dialogs.updateFailed.subtext}
       onRetry={onRetry}
       textVariables={{ version }}
       isOnboarding