From c0552fdc3139a5f85b326c8b75b23242ebb3a22b Mon Sep 17 00:00:00 2001 From: jhasuraj01 <44930179+jhasuraj01@users.noreply.github.com> Date: Tue, 5 Mar 2024 12:48:05 +0530 Subject: [PATCH] fix: updated device update and authentication flow in onboarding as per mainap --- .changeset/bright-buses-allow.md | 6 ++ packages/cysync-core/src/constants/i18n/en.ts | 7 -- .../DeviceAuthentication/Dialogs/index.tsx | 28 ++++++-- .../OnBoarding/DeviceUpdate/Dialogs/index.tsx | 69 +++++++++---------- 4 files changed, 60 insertions(+), 50 deletions(-) create mode 100644 .changeset/bright-buses-allow.md diff --git a/.changeset/bright-buses-allow.md b/.changeset/bright-buses-allow.md new file mode 100644 index 000000000..f7a9fb60a --- /dev/null +++ b/.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 diff --git a/packages/cysync-core/src/constants/i18n/en.ts b/packages/cysync-core/src/constants/i18n/en.ts index 4f07d9b49..2cef18942 100644 --- a/packages/cysync-core/src/constants/i18n/en.ts +++ b/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', }, diff --git a/packages/cysync-core/src/pages/OnBoarding/DeviceAuthentication/Dialogs/index.tsx b/packages/cysync-core/src/pages/OnBoarding/DeviceAuthentication/Dialogs/index.tsx index 87062115b..b1267e45d 100644 --- a/packages/cysync-core/src/pages/OnBoarding/DeviceAuthentication/Dialogs/index.tsx +++ b/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 = 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 ( { > {task.result === undefined && ( )} {task.result && ( )} diff --git a/packages/cysync-core/src/pages/OnBoarding/DeviceUpdate/Dialogs/index.tsx b/packages/cysync-core/src/pages/OnBoarding/DeviceUpdate/Dialogs/index.tsx index e96d8e74d..33959bb57 100644 --- a/packages/cysync-core/src/pages/OnBoarding/DeviceUpdate/Dialogs/index.tsx +++ b/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>(); 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> = { [DeviceUpdateState.Checking]: ( - + ), [DeviceUpdateState.Confirmation]: ( } - subtext={ - lang.strings.onboarding.deviceUpdate.dialogs.confirmation.subtext - } + subtext={deviceUpdate.dialogs.confirmation.subtext} textVariables={{ version }} /> ), [DeviceUpdateState.Updating]: ( } progress={Number(downloadProgress.toFixed(0))} + versionText={deviceUpdate.version} versionTextVariables={{ version }} /> ), - [DeviceUpdateState.Successful]: ( - - ), + [DeviceUpdateState.Successful]: , }; return (