finished network tour

src/components/NetworkMap.vue

@@ -60,6 +60,7 @@ import NetworkMap, {
 } from '../lib/NetworkMap';
 
 export default defineComponent({
+    name: 'network-map',
     setup(props, context) {
         const $container = ref<HTMLDivElement|null>(null);
         const $network = ref<HTMLCanvasElement|null>(null);

src/components/Tour.vue

@@ -24,7 +24,14 @@
                     <div slot="content" class="content">
                         <div v-for="(content, i) in tour.steps[tour.currentStep].content" :key="i">
                             <PartyConfettiIcon v-if="currentStep === nSteps - 1 && i === 0" />
-                            <p>{{ $t(content) }}</p>
+                            <hr v-if="content === 'HR'" />
+                            <p v-else-if="typeof content === 'string'" v-html="$t(content)"></p>
+                            <ul v-else-if="content.length">
+                                <li v-for="(item, i) in content" :key="i">
+                                    <span class="dash">-</span>
+                                    <span v-html="$t(item)"></span>
+                                </li>
+                            </ul>
                         </div>
                         <!-- TODO REMOVE ME -->
                         <div class="remove_me" v-if="currentStep === 1 && disableNextStep" @click="simulate()">
@@ -100,6 +107,7 @@ import {
     computed,
     defineComponent,
     onMounted,
+    onUnmounted,
     Ref,
     ref,
     watch,
@@ -142,16 +150,10 @@ export default defineComponent({
                 buttonNext: false,
                 buttonStop: false,
             },
-            labels: {
-                buttonSkip: 'Skip tour',
-                buttonPrevious: 'Previous',
-                buttonNext: 'Next',
-                buttonStop: 'Finish',
-            },
+            // TODO Add padding to arrow
             useKeyboardNavigation: false, // handled by us
         };
-        // TODO Go back to index
-        const steps = Object.values(getTour(tourStore.tour?.name, context));
+        let steps = Object.values(getTour(tourStore.tour?.name, context));
 
         // Initial state
         const isLoading = ref(true);
@@ -168,10 +170,12 @@ export default defineComponent({
 
             // REMOVE ME
             const { removeTransactions, addTransactions } = useTransactionsStore();
-            // removeTransactions([getFakeTx()]);
-            addTransactions([getFakeTx()]);
+            removeTransactions([getFakeTx()]);
+            // addTransactions([getFakeTx()]);
         });
 
+        onUnmounted(() => endTour());
+
         async function tourSetup() {
             await context.root.$nextTick(); // to ensure the DOM is ready
 
@@ -186,6 +190,11 @@ export default defineComponent({
                 await step.lifecycle.created({ goToNextStep, goingForward: true });
             }
 
+            if (context.root.$route.fullPath !== step.path) {
+                context.root.$router.push(step.path);
+                await context.root.$nextTick();
+            }
+
             _toggleDisabledButtons(step.ui.disabledButtons, true);
             _addAttributes(step.ui, currentStep.value);
 
@@ -209,6 +218,10 @@ export default defineComponent({
 
             window.addEventListener('keyup', _onKeyDown);
             window.addEventListener('click', _userClicked());
+            // window.addEventListener('resize', _OnResize(_OnResizeEnd)); TODO
+
+            const app = document.querySelector('#app');
+            app!.setAttribute('data-tour-active', '');
 
             _receiveEvents();
             _broadcast({
@@ -236,7 +249,9 @@ export default defineComponent({
             // it takes to render the button. I don't know how to fix it.
 
             // Ensure that we disabled 'Receive Free NIM' button
-            await sleep(500);
+            await sleep(500); // TODO
+            // TODO Remove this code for the network, find other way
+            // steps = Object.values(getTour(tourStore.tour?.name, context));
             _toggleDisabledButtons(steps[currentStep.value]?.ui.disabledButtons, true);
         });
 
@@ -326,7 +341,10 @@ export default defineComponent({
         }
 
         function _userClicked() {
-            const userCanClick = ['.tour', '.tour-manager'].map((s) => document.querySelector(s) as HTMLElement);
+            const userCanClick = ['.tour', '.tour-manager']
+                .map((s) => document.querySelector(s) as HTMLElement)
+                .filter((e) => !!e);
+
             return ({ target }: MouseEvent) => {
                 if (!target) return;
                 if (!userCanClick.some((el) => el.contains(target as Node))) {
@@ -399,26 +417,47 @@ export default defineComponent({
                 });
         }
 
-        async function endTour() {
-            _removeAttributes(currentStep.value);
-            _toggleDisabledButtons(steps[currentStep.value]?.ui.disabledButtons, false);
-
+        async function endTour(soft = false) {
             window.removeEventListener('keyup', _onKeyDown);
-            window.addEventListener('click', _userClicked());
-
-            context.root.$off('nimiq-tour-event');
+            window.removeEventListener('click', () => _userClicked());
 
             if (unmounted) {
                 await unmounted({ ending: true, goingForward: false });
             }
+            if (soft) {
+                return;
+            }
+
+            window.removeEventListener('resize', () => _OnResize(_OnResizeEnd));
+
+            _removeAttributes(currentStep.value);
+            _toggleDisabledButtons(steps[currentStep.value]?.ui.disabledButtons, false);
+
+            context.root.$off('nimiq-tour-event');
 
             // If user finalizes tour while it is loading, allow interaction again
-            const app = document.querySelector('#app main') as HTMLDivElement;
-            app.removeAttribute('data-non-interactable');
+            const app = document.querySelector('#app') as HTMLDivElement;
+            app.removeAttribute('data-tour-active');
+            app.querySelector('main')!.removeAttribute('data-non-interactable');
 
             setTour(null);
         }
 
+        function _OnResize(func: () => void) {
+            endTour(true);
+            tour!.stop();
+            let timer: ReturnType<typeof setTimeout> | null = null;
+            return () => {
+                if (timer) clearTimeout(timer);
+                timer = setTimeout(func, 100);
+            };
+        }
+
+        function _OnResizeEnd() {
+            steps = Object.values(getTour(tourStore.tour?.name, context));
+            tourSetup();
+        }
+
         function _onKeyDown(event: KeyboardEvent) {
             switch (event.key) {
                 case 'ArrowRight':
@@ -483,21 +522,21 @@ export default defineComponent({
 // updated with opacity and non-interactivity properties as data attributes allow to use a value like
 // [data-opaified="1"] although the CSS selector that we can use is [data-opacified]. @see _removeAttributes
 
-[data-opacified] {
+[data-tour-active] [data-opacified] {
   filter: opacity(0.3);
 }
 
-[data-non-interactable],
-[data-non-interactable] * {
+[data-tour-active] [data-non-interactable],
+[data-tour-active] [data-non-interactable] * {
   user-select: none !important;
   pointer-events: none !important;
 }
 
-#app > *:not(.tour):not(.tour-manager) {
+[data-tour-active]#app > *:not(.tour):not(.tour-manager) {
   cursor: not-allowed;
 }
 
-button.highlighted {
+[data-tour-active] button.highlighted {
     background: linear-gradient(
             274.28deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 27.6%, rgba(255, 255, 255, 0) 53.12%,
             rgba(255, 255, 255, 0.2) 81.25%, rgba(255, 255, 255, 0) 100%
@@ -542,7 +581,23 @@ button.highlighted {
                 display: flex;
                 align-items: center;
 
-                p {
+                ul {
+                    list-style-type: none;
+                    margin: 0;
+                    padding-left: 0;
+
+                    li {
+                        display: flex;
+                        gap: 1rem;
+                        margin-top: 1rem;
+
+                        .dash {
+                            user-select: none;
+                        }
+                    }
+                }
+
+                p, li {
                     margin: 0;
                     font-size: 15px;
                     line-height: 21px;
@@ -553,11 +608,17 @@ button.highlighted {
                     }
                 }
 
-                p::selection {
+                p::selection, li::selection {
                     color: var(--nimiq-light-blue);
                     background: var(--nimiq-light-gray);
                 }
 
+                hr {
+                    width: 100%;
+                    opacity: 0.2;
+                    height: 1.5px;
+                }
+
                 ::v-deep svg {
                     float: left;
                     margin-right: 2rem;
@@ -569,6 +630,7 @@ button.highlighted {
         .actions {
             margin-top: 2rem;
             display: flex;
+            gap: 1rem;
 
             button {
                 font-weight: 700;

src/components/TourLargeScreenManager.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isLargeScreen && isTourActive" class="tour-manager" ref="$originalManager">
+    <div class="tour-manager" ref="$originalManager">
         <p>
             {{$t('Use the tooltips to navigate your tour.')}}
         </p>
@@ -13,19 +13,12 @@
 </template>
 
 <script lang="ts">
-import { useWindowSize } from '@/composables/useWindowSize';
 import { TourBroadcast, TourBroadcastStepChanged, TourStepIndex, WalletHTMLElements } from '@/lib/tour';
-import { useAccountStore } from '@/stores/Account';
-import { computed, defineComponent, onMounted, Ref, ref } from '@vue/composition-api';
+import { defineComponent, onMounted, Ref, ref } from '@vue/composition-api';
 
 export default defineComponent({
     name: 'tour-large-screen-manager',
     setup(props, context) {
-        const { isLargeScreen } = useWindowSize();
-
-        const { state: accountState } = useAccountStore();
-        const isTourActive = computed(() => accountState.tour !== null);
-
         const nSteps: Ref<number> = ref(-1);
         const currentStep:Ref<TourStepIndex> = ref(-1);
 
@@ -37,10 +30,12 @@ export default defineComponent({
             });
         });
 
-        function _stepChanged({ nSteps: newNSteps, currentStep: newCurrentStep }:TourBroadcastStepChanged['payload']) {
+        async function _stepChanged(
+            { nSteps: newNSteps, currentStep: newCurrentStep }:TourBroadcastStepChanged['payload']) {
             nSteps.value = newNSteps;
             currentStep.value = newCurrentStep;
-            if (!isLargeScreen.value) return;
+
+            await context.root.$nextTick();
 
             const modalIsOpen = document.querySelector(WalletHTMLElements.MODAL_CONTAINER) !== null;
             if (modalIsOpen) {
@@ -102,8 +97,6 @@ export default defineComponent({
         }
 
         return {
-            isTourActive,
-            isLargeScreen,
             nSteps,
             currentStep,
             endTour,

src/components/layouts/Network.vue

@@ -48,8 +48,9 @@ import { useSettingsStore } from '../../stores/Settings';
 const LOCALSTORAGE_KEY = 'network-info-dismissed';
 
 export default defineComponent({
-    setup() {
-        const showNetworkInfo = ref(!window.localStorage.getItem(LOCALSTORAGE_KEY));
+    setup(props, context) {
+        const showNetworkInfo = ref(true // TOOD Remove me
+            || !window.localStorage.getItem(LOCALSTORAGE_KEY) || !!context.root.$route.params.showNetworkInfo);
 
         function onNetworkInfoClosed() {
             window.localStorage.setItem(LOCALSTORAGE_KEY, '1');
@@ -110,6 +111,7 @@ export default defineComponent({
 
 .scroller {
     max-width: 100vw;
+    scroll-behavior: smooth;
 
     &.map {
         width: 100%;

src/components/layouts/Settings.vue

@@ -276,6 +276,7 @@ import { CircleSpinner } from '@nimiq/vue-components';
 import { Portal } from '@linusborg/vue-simple-portal';
 
 import { useAccountStore } from '@/stores/Account';
+import { TourName } from '@/lib/tour';
 import MenuIcon from '../icons/MenuIcon.vue';
 import CrossCloseButton from '../CrossCloseButton.vue';
 import CountryFlag from '../CountryFlag.vue';
@@ -374,8 +375,7 @@ export default defineComponent({
         }
 
         function goToOnboardingTour() {
-            const { setTour } = useAccountStore();
-            setTour({ name: 'onboarding', isANewUser: false });
+            useAccountStore().setTour({ name: TourName.ONBOARDING, isANewUser: false });
             context.root.$router.push('/');
         }
 

src/components/layouts/Sidebar.vue

@@ -17,7 +17,7 @@
         </header>
 
         <AnnouncementBox/>
-        <TourLargeScreenManager/>
+        <TourLargeScreenManager v-if="isLargeScreen && isTourActive"/>
 
         <div class="price-chart-wrapper">
             <PriceChart currency="nim" @timespan="switchPriceChartTimeRange" :timeRange="priceChartTimeRange"/>
@@ -86,7 +86,7 @@ import { ENV_TEST, ENV_DEV } from '../../lib/Constants';
 export default defineComponent({
     name: 'sidebar',
     setup(props, context) {
-        const { isSmallScreen } = useWindowSize();
+        const { isSmallScreen, isLargeScreen } = useWindowSize();
 
         function navigateTo(path: string) {
             if (isSmallScreen.value) {
@@ -119,12 +119,14 @@ export default defineComponent({
 
         const { updateAvailable, trials, canUseSwaps } = useSettingsStore();
 
-        const { activeAccountInfo } = useAccountStore();
+        const { activeAccountInfo, state: accountState } = useAccountStore();
         const isLegacyAccount = computed(() => activeAccountInfo.value?.type === AccountType.LEGACY);
 
         const { activeSwap } = useSwapsStore();
         const hasActiveSwap = computed(() => activeSwap.value !== null);
 
+        const isTourActive = computed(() => accountState.tour !== null);
+
         return {
             navigateTo,
             resetState,
@@ -138,6 +140,8 @@ export default defineComponent({
             trials,
             Trial,
             canUseSwaps,
+            isLargeScreen,
+            isTourActive,
         };
     },
     components: {

src/components/modals/DiscoverTheNimiqWalletModal.vue

@@ -41,6 +41,7 @@ import { useAccountStore } from '@/stores/Account';
 import { useSettingsStore } from '@/stores/Settings';
 import { PageHeader } from '@nimiq/vue-components';
 import { defineComponent } from '@vue/composition-api';
+import { TourName } from '@/lib/tour';
 import { Languages } from '../../i18n/i18n-setup';
 import GreenNimiqLogoOutlineWithStars from '../icons/GreenNimiqLogoOutlineWithStars.vue';
 import CaretRightIcon from '../icons/CaretRightIcon.vue';
@@ -52,7 +53,7 @@ export default defineComponent({
         const { setTour } = useAccountStore();
 
         function startTour() {
-            setTour({ name: 'onboarding', isANewUser: true });
+            setTour({ name: TourName.ONBOARDING, isANewUser: true });
             context.root.$router.push('/');
         }