diff --git a/.changeset/good-boats-breathe.md b/.changeset/good-boats-breathe.md new file mode 100644 index 000000000000..190b1a234f17 --- /dev/null +++ b/.changeset/good-boats-breathe.md @@ -0,0 +1,9 @@ +--- +"ledger-live-desktop": minor +"live-mobile": minor +"@ledgerhq/live-wallet": minor +"@ledgerhq/trustchain": minor +"@ledgerhq/web-tools": minor +--- + +Ledger Sync - Added a Loading screen on LLM and LLD when initializing ledger sync while accounts are synchronizing diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useAddMember.ts b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useAddMember.ts index ee1fe3701d99..2bff58d10c50 100644 --- a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useAddMember.ts +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useAddMember.ts @@ -34,10 +34,12 @@ export function useAddMember({ device }: { device: Device | null }) { dispatch( setFlow({ flow: Flow.Activation, - step: + step: Step.ActivationLoading, + nextStep: trustchainResult.type === TrustchainResultType.created ? Step.ActivationFinal : Step.SynchronizationFinal, + hasTrustchainBeenCreated: trustchainResult.type === TrustchainResultType.created, }), ); }, diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useFlows.ts b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useFlows.ts index 23b813d7b5ab..187b41c72902 100644 --- a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useFlows.ts +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useFlows.ts @@ -23,9 +23,10 @@ export const FlowOptions: Record< 1: Step.CreateOrSynchronize, 2: Step.DeviceAction, 3: Step.CreateOrSynchronizeTrustChain, - 4: Step.ActivationFinal, - 5: Step.SynchronizationFinal, - 6: Step.SynchronizationError, + 4: Step.ActivationLoading, + 5: Step.ActivationFinal, + 6: Step.SynchronizationFinal, + 7: Step.SynchronizationError, }, }, [Flow.Synchronize]: { @@ -33,7 +34,8 @@ export const FlowOptions: Record< 1: Step.SynchronizeMode, 2: Step.SynchronizeWithQRCode, 3: Step.PinCode, - 4: Step.Synchronized, + 4: Step.SynchronizeLoading, + 5: Step.Synchronized, }, }, [Flow.ManageBackup]: { diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts index 4e44acbc349f..a7f8c5a2d09e 100644 --- a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts @@ -25,6 +25,7 @@ export enum AnalyticsPage { DesktopSync = "Sync from a desktop", KeyCreated = "Backup creation success", KeyUpdated = "Sync apps success", + Loading = "Loading", SyncWithQR = "Sync with QR code", PinCode = "Pin code", @@ -60,6 +61,7 @@ export const StepMappedToAnalytics: Record = { [Step.CreateOrSynchronize]: AnalyticsPage.Activation, [Step.DeviceAction]: AnalyticsPage.DeviceActionActivation, [Step.CreateOrSynchronizeTrustChain]: AnalyticsPage.CreateOrSynchronizeTrustChain, + [Step.ActivationLoading]: AnalyticsPage.Loading, [Step.ActivationFinal]: AnalyticsPage.KeyCreated, [Step.SynchronizationFinal]: AnalyticsPage.KeyUpdated, [Step.SynchronizationError]: AnalyticsPage.SynchronizationError, @@ -69,6 +71,7 @@ export const StepMappedToAnalytics: Record = { //Synchronize [Step.SynchronizeMode]: AnalyticsPage.SyncMethod, [Step.SynchronizeWithQRCode]: AnalyticsPage.SyncWithQR, + [Step.SynchronizeLoading]: AnalyticsPage.Loading, [Step.PinCode]: AnalyticsPage.PinCode, [Step.PinCodeError]: AnalyticsPage.PinCodeError, [Step.Synchronized]: AnalyticsPage.KeyUpdated, diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useLoadingStep.ts b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useLoadingStep.ts new file mode 100644 index 000000000000..75b9c1a1b592 --- /dev/null +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useLoadingStep.ts @@ -0,0 +1,43 @@ +import { useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { setFlow } from "~/renderer/actions/walletSync"; +import { walletSyncFlowSelector, walletSyncNextStepSelector } from "~/renderer/reducers/walletSync"; +import { useWalletSyncUserState } from "../components/WalletSyncContext"; +import { useFeature } from "@ledgerhq/live-common/featureFlags/index"; + +export function useLoadingStep() { + const dispatch = useDispatch(); + const [waitedWatchLoop, setWaitedWatchLoop] = useState(false); + const { visualPending } = useWalletSyncUserState(); + const nextStep = useSelector(walletSyncNextStepSelector); + const flow = useSelector(walletSyncFlowSelector); + const featureWalletSync = useFeature("lldWalletSync"); + const initialTimeout = featureWalletSync?.params?.watchConfig?.initialTimeout || 1000; + const visualPendingTimeout = 1000; + + useEffect(() => { + const timeout = setTimeout( + () => { + setWaitedWatchLoop(true); + }, + initialTimeout + visualPendingTimeout + 500, + ); + + return () => { + clearTimeout(timeout); + }; + }, [initialTimeout]); + + useEffect(() => { + if (waitedWatchLoop && !visualPending && nextStep) { + dispatch( + setFlow({ + flow, + step: nextStep, + nextStep: null, + hasTrustchainBeenCreated: null, + }), + ); + } + }, [waitedWatchLoop, visualPending, dispatch, flow, nextStep]); +} diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useQRCode.ts b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useQRCode.ts index 255190e7ed8f..1bff7965d274 100644 --- a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useQRCode.ts +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useQRCode.ts @@ -73,7 +73,14 @@ export function useQRCode() { if (newTrustchain) { dispatch(setTrustchain(newTrustchain)); } - dispatch(setFlow({ flow: Flow.Synchronize, step: Step.Synchronized })); + dispatch( + setFlow({ + flow: Flow.Synchronize, + step: Step.SynchronizeLoading, + nextStep: Step.Synchronized, + hasTrustchainBeenCreated: false, + }), + ); queryClient.invalidateQueries({ queryKey: [QueryKey.getMembers] }); setUrl(null); dispatch(setQrCodePinCode(null)); diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useWatchWalletSync.ts b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useWatchWalletSync.ts index 18dd0a23192d..48260ce2bca6 100644 --- a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useWatchWalletSync.ts +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useWatchWalletSync.ts @@ -129,7 +129,6 @@ export function useWatchWalletSync(): WalletSyncUserState { // pull and push wallet sync loop useEffect(() => { const canNotRunWatchLoop = !featureWalletSync?.enabled || !trustchain || !memberCredentials; - if (canNotRunWatchLoop) { onUserRefreshRef.current = noop; setVisualPending(false); diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/04-LoadingStep.tsx b/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/04-LoadingStep.tsx new file mode 100644 index 000000000000..95d6b36eca72 --- /dev/null +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/04-LoadingStep.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import Loading from "../../components/LoadingStep"; +import { useTranslation } from "react-i18next"; +import { AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics"; +import TrackPage from "~/renderer/analytics/TrackPage"; +import { useLoadingStep } from "../../hooks/useLoadingStep"; +import { walletSyncHasTrustchainBeenCreatedSelector } from "~/renderer/reducers/walletSync"; +import { useSelector } from "react-redux"; + +export default function ActivationLoadingStep() { + useLoadingStep(); + const hasTrustchainBeenCreated = useSelector(walletSyncHasTrustchainBeenCreatedSelector); + const { t } = useTranslation(); + const title = "walletSync.loading.title"; + const subtitle = hasTrustchainBeenCreated + ? "walletSync.loading.activation" + : "walletSync.loading.synch"; + + return ( + <> + + + + ); +} diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/04-ActivationFinalStep.tsx b/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/05-ActivationFinalStep.tsx similarity index 100% rename from apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/04-ActivationFinalStep.tsx rename to apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/05-ActivationFinalStep.tsx diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/05-ActivationOrSyncError.tsx b/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/06-ActivationOrSyncError.tsx similarity index 100% rename from apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/05-ActivationOrSyncError.tsx rename to apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/06-ActivationOrSyncError.tsx diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/index.tsx b/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/index.tsx index 0094cbda03d0..ecf2fa2a1792 100644 --- a/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/index.tsx +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/index.tsx @@ -8,9 +8,10 @@ import { FlowOptions, useFlows } from "../../hooks/useFlows"; import CreateOrSynchronizeStep from "./01-CreateOrSynchronizeStep"; import DeviceActionStep from "./02-DeviceActionStep"; import ActivationOrSynchroWithTrustchain from "./03-ActivationOrSynchroWithTrustchain"; -import ActivationFinalStep from "./04-ActivationFinalStep"; +import LoadingStep from "./04-LoadingStep"; +import ActivationFinalStep from "./05-ActivationFinalStep"; import { Device } from "@ledgerhq/live-common/hw/actions/types"; -import ErrorStep from "./05-ActivationOrSyncError"; +import ErrorStep from "./06-ActivationOrSyncError"; import { AnalyticsPage, useLedgerSyncAnalytics, @@ -70,6 +71,8 @@ const WalletSyncActivation = forwardRef((_props, ref) => { return ; case Step.CreateOrSynchronizeTrustChain: return ; + case Step.ActivationLoading: + return ; case Step.ActivationFinal: return ; case Step.SynchronizationFinal: diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Synchronize/index.tsx b/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Synchronize/index.tsx index a3a5dcd0d0f9..b81e76218a68 100644 --- a/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Synchronize/index.tsx +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Synchronize/index.tsx @@ -18,6 +18,7 @@ import UnbackedErrorStep from "./05-UnbackedError"; import { BackProps, BackRef } from "../router"; import AlreadyCreatedWithSameSeedStep from "./06-ActivationAlreadyCreatedSame"; import AlreadyCreatedOtherSeedStep from "./07-ActivationAlreadyCreatedOther"; +import ActivationLoadingStep from "../Activation/04-LoadingStep"; const SynchronizeWallet = forwardRef((_props, ref) => { const dispatch = useDispatch(); @@ -80,6 +81,8 @@ const SynchronizeWallet = forwardRef((_props, ref) => { return ; case Step.AlreadySecuredOtherSeed: return ; + case Step.SynchronizeLoading: + return ; case Step.Synchronized: return ; diff --git a/apps/ledger-live-desktop/src/renderer/actions/walletSync.ts b/apps/ledger-live-desktop/src/renderer/actions/walletSync.ts index 70d274509d8b..6c857dc5e9f6 100644 --- a/apps/ledger-live-desktop/src/renderer/actions/walletSync.ts +++ b/apps/ledger-live-desktop/src/renderer/actions/walletSync.ts @@ -1,7 +1,7 @@ import { TrustchainMember } from "@ledgerhq/trustchain/types"; -import { Flow, Step } from "../reducers/walletSync"; +import { ChangeFlowPayload } from "../reducers/walletSync"; -export const setFlow = (payload: { flow: Flow; step: Step }) => ({ +export const setFlow = (payload: ChangeFlowPayload) => ({ type: "WALLET_SYNC_CHANGE_FLOW", payload, }); diff --git a/apps/ledger-live-desktop/src/renderer/reducers/walletSync.ts b/apps/ledger-live-desktop/src/renderer/reducers/walletSync.ts index 14734ae73e27..49bca4bb680a 100644 --- a/apps/ledger-live-desktop/src/renderer/reducers/walletSync.ts +++ b/apps/ledger-live-desktop/src/renderer/reducers/walletSync.ts @@ -21,6 +21,7 @@ export enum Step { CreateOrSynchronize = "CreateOrSynchronize", DeviceAction = "DeviceAction", CreateOrSynchronizeTrustChain = "CreateOrSynchronizeTrustChain", + ActivationLoading = "ActivationLoading", ActivationFinal = "ActivationFinal", SynchronizationFinal = "SynchronizationFinal", SynchronizationError = "SynchronizationError", @@ -32,6 +33,7 @@ export enum Step { SynchronizeWithQRCode = "SynchronizeWithQRCode", PinCode = "PinCode", PinCodeError = "PinCodeError", + SynchronizeLoading = "SynchronizeLoading", UnbackedError = "UnbackedError", Synchronized = "Synchronized", @@ -52,6 +54,8 @@ export type WalletSyncState = { isDrawerOpen: boolean; flow: Flow; step: Step; + nextStep: Step | null; + hasTrustchainBeenCreated: boolean | null; instances: TrustchainMember[]; hasBeenfaked: boolean; qrCodeUrl: string | null; @@ -62,15 +66,24 @@ export const initialStateWalletSync: WalletSyncState = { isDrawerOpen: false, flow: Flow.Activation, step: Step.CreateOrSynchronize, + nextStep: null, + hasTrustchainBeenCreated: null, instances: [], hasBeenfaked: false, qrCodePinCode: null, qrCodeUrl: null, }; +export type ChangeFlowPayload = { + flow: Flow; + step: Step; + nextStep?: Step | null; + hasTrustchainBeenCreated?: boolean | null; +}; + type HandlersPayloads = { WALLET_SYNC_CHANGE_DRAWER_VISIBILITY: boolean; - WALLET_SYNC_CHANGE_FLOW: { flow: Flow; step: Step }; + WALLET_SYNC_CHANGE_FLOW: ChangeFlowPayload; WALLET_SYNC_CHANGE_ADD_INSTANCE: TrustchainMember; WALLET_SYNC_CHANGE_REMOVE_INSTANCE: TrustchainMember; WALLET_SYNC_CHANGE_CLEAN_INSTANCES: undefined; @@ -96,11 +109,15 @@ const handlers: WalletSyncHandlers = { }), WALLET_SYNC_CHANGE_FLOW: ( state: WalletSyncState, - { payload: { flow, step } }: { payload: { flow: Flow; step: Step } }, + { + payload: { flow, step, nextStep = null, hasTrustchainBeenCreated = null }, + }: { payload: ChangeFlowPayload }, ) => ({ ...state, flow, step, + nextStep, + hasTrustchainBeenCreated, }), WALLET_SYNC_CHANGE_ADD_INSTANCE: ( state: WalletSyncState, @@ -151,6 +168,11 @@ export const walletSyncFlowSelector = (state: { walletSync: WalletSyncState }) = state.walletSync.flow; export const walletSyncStepSelector = (state: { walletSync: WalletSyncState }) => state.walletSync.step; +export const walletSyncNextStepSelector = (state: { walletSync: WalletSyncState }) => + state.walletSync.nextStep; +export const walletSyncHasTrustchainBeenCreatedSelector = (state: { + walletSync: WalletSyncState; +}) => state.walletSync.hasTrustchainBeenCreated; export const walletSyncInstancesSelector = (state: { walletSync: WalletSyncState }) => state.walletSync.instances; diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/types/WalletSyncNavigator.ts b/apps/ledger-live-mobile/src/components/RootNavigator/types/WalletSyncNavigator.ts index 7e823a4d5672..3c235e807c66 100644 --- a/apps/ledger-live-mobile/src/components/RootNavigator/types/WalletSyncNavigator.ts +++ b/apps/ledger-live-mobile/src/components/RootNavigator/types/WalletSyncNavigator.ts @@ -8,6 +8,10 @@ export type WalletSyncNavigatorStackParamList = { created: boolean; }; + [ScreenName.WalletSyncLoading]: { + created: boolean; + }; + [ScreenName.WalletSyncActivationProcess]: undefined; [ScreenName.WalletSyncActivated]: undefined; diff --git a/apps/ledger-live-mobile/src/const/navigation.ts b/apps/ledger-live-mobile/src/const/navigation.ts index 29aa26204fee..18276c9d3d7b 100644 --- a/apps/ledger-live-mobile/src/const/navigation.ts +++ b/apps/ledger-live-mobile/src/const/navigation.ts @@ -514,6 +514,7 @@ export enum ScreenName { WalletSyncActivationInit = "WalletSyncActivationInit", WalletSyncActivationProcess = "WalletSyncActivationProcess", WalletSyncSuccess = "WalletSyncSuccess", + WalletSyncLoading = "WalletSyncLoading", WalletSyncActivated = "WalletSyncActivated", WalletSyncManageKeyDeleteSuccess = "WalletSyncManageKeyDeleteSuccess", WalletSyncUnSynchSuccess = "WalletSyncUnSynchSuccess", diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json index ce63fc761d40..7c761ca6e0ed 100644 --- a/apps/ledger-live-mobile/src/locales/en/common.json +++ b/apps/ledger-live-mobile/src/locales/en/common.json @@ -6746,6 +6746,11 @@ "title": "Continue on your Ledger {{wording}}", "description": "Follow the instruction which appear on your Ledger’s Trusted Display." }, + "loading": { + "title": "Hang tight...", + "activation": "Your data is being end-to-end encrypted... ", + "synch": "We are updating the synched instances..." + }, "success": { "sync": "Synchronization successful!", "syncDesc": "Changes in your accounts will now automatically appear across all apps and platforms.", diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/WalletSyncNavigator.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/WalletSyncNavigator.tsx index cc979921e68d..4569adcf6a7c 100644 --- a/apps/ledger-live-mobile/src/newArch/features/WalletSync/WalletSyncNavigator.tsx +++ b/apps/ledger-live-mobile/src/newArch/features/WalletSync/WalletSyncNavigator.tsx @@ -7,12 +7,14 @@ import { WalletSyncNavigatorStackParamList } from "../../../components/RootNavig import WalletSyncActivation from "LLM/features/WalletSync/screens/Activation"; import { ActivationProcess } from "./screens/Activation/ActivationProcess"; import { ActivationSuccess } from "./screens/Activation/ActivationSuccess"; +import { ActivationLoading } from "./screens/Activation/ActivationLoading"; import { useInitMemberCredentials } from "./hooks/useInitMemberCredentials"; import WalletSyncManage from "./screens/Manage"; import { useTranslation } from "react-i18next"; import { WalletSyncManageKeyDeletionSuccess } from "./screens/ManageKey/DeletionSuccess"; import { ManageInstancesProcess } from "./screens/ManageInstances/ManageInstancesProcess"; import { WalletSyncManageInstanceDeletionSuccess } from "./screens/ManageInstances/DeletionSuccess"; +import { NavigationHeaderCloseButton } from "~/components/NavigationHeaderCloseButton"; const Stack = createStackNavigator(); @@ -40,6 +42,15 @@ export default function WalletSyncNavigator() { headerRight: () => null, }} /> + null, + headerRight: () => , + }} + /> { dispatch(setTrustchain(trustchainResult.trustchain)); - navigation.navigate(ScreenName.WalletSyncSuccess, { + navigation.navigate(ScreenName.WalletSyncLoading, { created: trustchainResult.type === TrustchainResultType.created, }); }, diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts index 1a1538e9b6cb..73488470b292 100644 --- a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts +++ b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts @@ -9,6 +9,7 @@ export enum AnalyticsPage { SyncWithQrCode = "Sync with QR code", PinCode = "Pin code", PinCodesDoNotMatch = "Pin codes don't match", + Loading = "Loading", SettingsGeneral = "Settings General", LedgerSyncSettings = "Ledger Sync Settings", ManageSyncInstances = "Manage synchronized instances", diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useLoadingStep.ts b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useLoadingStep.ts new file mode 100644 index 000000000000..db5811dc387a --- /dev/null +++ b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useLoadingStep.ts @@ -0,0 +1,38 @@ +import { useEffect, useState } from "react"; +import { useWalletSyncUserState } from "../components/WalletSyncContext"; +import { useFeature } from "@ledgerhq/live-common/featureFlags/index"; +import { NavigatorName, ScreenName } from "~/const"; +import { useNavigation } from "@react-navigation/core"; + +export function useLoadingStep(created: boolean) { + const [waitedWatchLoop, setWaitedWatchLoop] = useState(false); + const { visualPending } = useWalletSyncUserState(); + const featureWalletSync = useFeature("llmWalletSync"); + const initialTimeout = featureWalletSync?.params?.watchConfig?.initialTimeout || 1000; + const visualPendingTimeout = 1000; + const navigation = useNavigation(); + + useEffect(() => { + const timeout = setTimeout( + () => { + setWaitedWatchLoop(true); + }, + initialTimeout + visualPendingTimeout + 500, + ); + + return () => { + clearTimeout(timeout); + }; + }, [initialTimeout]); + + useEffect(() => { + if (waitedWatchLoop && !visualPending) { + navigation.navigate(NavigatorName.WalletSync, { + screen: ScreenName.WalletSyncSuccess, + params: { + created, + }, + }); + } + }, [waitedWatchLoop, visualPending, navigation, created]); +} diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useQRCodeHost.ts b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useQRCodeHost.ts index fa314a197dad..2930b58249f5 100644 --- a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useQRCodeHost.ts +++ b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useQRCodeHost.ts @@ -74,7 +74,7 @@ export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Pr } queryClient.invalidateQueries({ queryKey: [QueryKey.getMembers] }); navigation.navigate(NavigatorName.WalletSync, { - screen: ScreenName.WalletSyncSuccess, + screen: ScreenName.WalletSyncLoading, params: { created: false, }, diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useSyncWithQrCode.ts b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useSyncWithQrCode.ts index 66a613cde89e..475eb22f71e4 100644 --- a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useSyncWithQrCode.ts +++ b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useSyncWithQrCode.ts @@ -35,7 +35,7 @@ export const useSyncWithQrCode = () => { setInput(null); setInputCallback(null); navigation.navigate(NavigatorName.WalletSync, { - screen: ScreenName.WalletSyncSuccess, + screen: ScreenName.WalletSyncLoading, params: { created: false, }, diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Activation/ActivationLoading.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Activation/ActivationLoading.tsx new file mode 100644 index 000000000000..ea78ef6bc97c --- /dev/null +++ b/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Activation/ActivationLoading.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator"; +import { ScreenName } from "~/const"; +import { BaseComposite, StackNavigatorProps } from "~/components/RootNavigator/types/helpers"; +import { useLoadingStep } from "../../hooks/useLoadingStep"; +import { TrackScreen } from "~/analytics"; +import { AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics"; +import GradientContainer from "~/components/GradientContainer"; +import Animation from "~/components/Animation"; +import { Flex, Text } from "@ledgerhq/native-ui"; +import lottie from "~/screens/ReceiveFunds/assets/lottie.json"; +import { useTheme } from "styled-components/native"; +import { useTranslation } from "react-i18next"; + +type Props = BaseComposite< + StackNavigatorProps +>; + +export function ActivationLoading({ route }: Props) { + const { created } = route.params; + const { colors } = useTheme(); + const { t } = useTranslation(); + const title = "walletSync.loading.title"; + const subtitle = created ? "walletSync.loading.activation" : "walletSync.loading.synch"; + useLoadingStep(created); + + return ( + <> + + + + + + + + {t(title)} + + + {t(subtitle)} + + + + + ); +} diff --git a/libs/live-wallet/src/walletsync/createWalletSyncWatchLoop.ts b/libs/live-wallet/src/walletsync/createWalletSyncWatchLoop.ts index a1e54dba9ab4..60c9de17f14c 100644 --- a/libs/live-wallet/src/walletsync/createWalletSyncWatchLoop.ts +++ b/libs/live-wallet/src/walletsync/createWalletSyncWatchLoop.ts @@ -171,7 +171,7 @@ export function createWalletSyncWatchLoop