diff --git a/src/components/Tour.vue b/src/components/Tour.vue index c579fb6fc..905dbadf7 100644 --- a/src/components/Tour.vue +++ b/src/components/Tour.vue @@ -217,7 +217,7 @@ export default defineComponent({ setTourAsArray(); const isLoading = ref(true); - const currentStep: Ref = ref(0); + const currentStep: Ref = ref(accountStore.tour?.step || 0); const nSteps: Ref = ref(steps.value.length); const disableNextStep = ref(true); const showTour = ref(false); @@ -379,6 +379,8 @@ export default defineComponent({ nSteps: nSteps.value, }, }); + + accountStore.tour!.step = currentStep.value; } function _broadcast(data: ITourBroadcast) { @@ -522,14 +524,15 @@ export default defineComponent({ showTour.value = false; // This way, we can trigger the animation as v-step will be removed } + // Update UI + _toggleDisabledButtons(steps.value[currentStep.value].ui.disabledButtons, false); + _removeUIFromOldStep(currentStep.value); + if (!soft) { // wait until longest leave transition finishes await sleep(1150); } - // Update UI - _removeUIFromOldStep(currentStep.value); - if (!soft) { setTour(null); } @@ -664,8 +667,7 @@ export default defineComponent({ cursor: not-allowed; } -#app[data-tour-active] [data-scroll-locked], -#app[data-tour-active] [data-scroll-locked] * { +#app[data-tour-active] [data-scroll-locked] { overflow: hidden; } diff --git a/src/components/layouts/Settings.vue b/src/components/layouts/Settings.vue index ad685f2f7..f7fe7dd45 100644 --- a/src/components/layouts/Settings.vue +++ b/src/components/layouts/Settings.vue @@ -377,7 +377,7 @@ export default defineComponent({ } function goToOnboardingTour() { - useAccountStore().setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.SETTINGS }); + useAccountStore().setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.SETTINGS, step: 0 }); context.root.$router.push('/'); } diff --git a/src/components/modals/DiscoverTheNimiqWalletModal.vue b/src/components/modals/DiscoverTheNimiqWalletModal.vue index 2561d25eb..13b467deb 100644 --- a/src/components/modals/DiscoverTheNimiqWalletModal.vue +++ b/src/components/modals/DiscoverTheNimiqWalletModal.vue @@ -49,7 +49,7 @@ export default defineComponent({ const { setTour } = useAccountStore(); function startTour() { - setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.WELCOME_MODAL }); + setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.WELCOME_MODAL, step: 0 }); context.root.$router.push('/'); } diff --git a/src/components/modals/NetworkInfoModal.vue b/src/components/modals/NetworkInfoModal.vue index 64e0c655e..6e2c54346 100644 --- a/src/components/modals/NetworkInfoModal.vue +++ b/src/components/modals/NetworkInfoModal.vue @@ -56,7 +56,7 @@ export default defineComponent({ } function goToNetworkTour() { - useAccountStore().setTour({ name: TourName.NETWORK }); + useAccountStore().setTour({ name: TourName.NETWORK, step: 0 }); context.emit('close'); } diff --git a/src/lib/tour/onboarding/02_TransactionListStep.ts b/src/lib/tour/onboarding/02_TransactionListStep.ts index 0d8bf2e99..c6590fe16 100644 --- a/src/lib/tour/onboarding/02_TransactionListStep.ts +++ b/src/lib/tour/onboarding/02_TransactionListStep.ts @@ -41,7 +41,7 @@ export function getTransactionListStep( txsLen.value === 0 ? '' : IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_BUY, ], scrollLockedElements: [ - `${IWalletHTMLElements.ACCOUNT_OVERVIEW_ADDRESS_LIST} .vue-recycle-scroller`, + IWalletHTMLElements.ACCOUNT_OVERVIEW_ADDRESS_LIST, `${IWalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} .vue-recycle-scroller`, ], explicitInteractableElements: [ @@ -98,10 +98,11 @@ export function getTransactionListStep( }); // Add hightlight effect to 'Get Free NIM' button - toggleHighlightButton(IWalletHTMLElements.ADDRESS_OVERVIEW_ACTIONS, true, 'green'); + toggleHighlightButton(IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_RECEIVE_FREE_NIM, true, 'green'); return () => { unwatch(); - return toggleHighlightButton(IWalletHTMLElements.ADDRESS_OVERVIEW_ACTIONS, false, 'green'); + return toggleHighlightButton( + IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_RECEIVE_FREE_NIM, false, 'green'); }; }, }, diff --git a/src/stores/Account.ts b/src/stores/Account.ts index dea8cd372..116d00c54 100644 --- a/src/stores/Account.ts +++ b/src/stores/Account.ts @@ -1,14 +1,17 @@ -import { createStore } from 'pinia'; +import { ITourOrigin, TourName, TourStepIndex } from '@/lib/tour'; import { Account } from '@nimiq/hub-api'; -import { TourName, ITourOrigin } from '@/lib/tour'; -import { useAddressStore } from './Address'; +import { createStore } from 'pinia'; import { CryptoCurrency } from '../lib/Constants'; +import { useAddressStore } from './Address'; export type AccountState = { accountInfos: {[id: string]: AccountInfo}, activeAccountId: string | null, activeCurrency: CryptoCurrency, - tour: { name: TourName.NETWORK } | { name: TourName.ONBOARDING, startedFrom: ITourOrigin } | null, + tour: + { name: TourName.NETWORK, step: TourStepIndex } | + { name: TourName.ONBOARDING, step: TourStepIndex, startedFrom: ITourOrigin } | + null, } // Mirror of Hub WalletType, which is not exported