renamed tour interfaces and added icons in context

src/components/Tour.vue

@@ -5,7 +5,7 @@
       :steps="steps.map((s) => s.tooltip)"
       :options="tourOptions"
     >
-        <template slot-scope="tour">
+        <template v-slot="tour">
             <transition name="fade">
                 <v-step
                     class="tooltip"
@@ -24,7 +24,22 @@
                     <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" />
-                            <hr v-if="content === 'HR'" />
+                            <hr v-if="content === ContentSpecialItem.HR" />
+                            <i18n v-else-if="content.includes(ContentSpecialItem.ICON_NETWORK_WORLD)"
+                                :path="content" tag="p">
+                                <template v-slot:network)icon>
+                                    <WorldCheckIcon />
+                                </template>
+                                <template v-slot:account_icon>
+                                    <svg width="14" height="21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <g opacity=".7">
+                                            <rect x=".75" y=".75" width="12.5" height="19.5"
+                                                rx="2.5" stroke="#fff" stroke-width="1.5"/>
+                                            <circle cx="7" cy="7" r="2" fill="#fff"/>
+                                        </g>
+                                    </svg>
+                                </template>
+                            </i18n>
                             <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">
@@ -51,6 +66,7 @@
                                 class="right" v-if="tour.steps[tour.currentStep].button && !isLoading"
                                 @click="() => tour.steps[tour.currentStep].button.fn(endTour)"
                             >
+                                <!--  TODO Move $t to logic -->
                                 {{ $t(tour.steps[tour.currentStep].button.text) }}
                             </button>
                             <button
@@ -116,13 +132,15 @@ import Vue from 'vue';
 import VueTour from 'vue-tour';
 import { useWindowSize } from '../composables/useWindowSize';
 import {
+    ContentSpecialItem,
     getFakeTx,
     getTour,
     MountedReturnFn, TourBroadcast, TourStep,
     TourStepIndex,
 } from '../lib/tour';
 import PartyConfettiIcon from './icons/PartyConfettiIcon.vue';
 import TourPreviousLeftArrowIcon from './icons/TourPreviousLeftArrowIcon.vue';
+import WorldCheckIcon from './icons/WorldCheckIcon.vue';
 
 Vue.use(VueTour);
 
@@ -155,7 +173,7 @@ export default defineComponent({
 
         // Initial state
         const isLoading = ref(true);
-        const currentStep: Ref<TourStepIndex> = ref(0);
+        const currentStep: Ref<TourStepIndex> = ref(7);
         const nSteps: Ref<number> = ref(0);
         const disableNextStep = ref(true);
 
@@ -523,6 +541,7 @@ export default defineComponent({
             isSmallScreen,
             isMediumScreen,
             isLargeScreen,
+            ContentSpecialItem,
 
             // tour
             tourOptions,
@@ -549,6 +568,7 @@ export default defineComponent({
         TourPreviousLeftArrowIcon,
         PartyConfettiIcon,
         CircleSpinner,
+        WorldCheckIcon,
     },
 });
 </script>
@@ -597,7 +617,7 @@ export default defineComponent({
 
     position: absolute;
     width: 100vw;
-    height: 100vh;
+    height: 100%;
     pointer-events: none;
 
     > * {

src/components/UpdateNotification.vue

@@ -18,6 +18,7 @@
 <script lang="ts">
 import { defineComponent, ref, watch } from '@vue/composition-api';
 import { BottomOverlay, CircleSpinner } from '@nimiq/vue-components';
+import { useAccountStore } from '@/stores/Account';
 import { useSettingsStore } from '../stores/Settings';
 import { updateServiceWorker } from '../registerServiceWorker';
 
@@ -26,8 +27,9 @@ export default defineComponent({
         const isShown = ref(false);
 
         const { updateAvailable } = useSettingsStore();
+        const { state } = useAccountStore();
         watch(updateAvailable, (isAvailable) => {
-            if (isAvailable) isShown.value = true;
+            if (isAvailable) isShown.value = state.tour !== null; // Only show if the user is not in the tour
         });
 
         const applyingWalletUpdate = ref(false);

src/components/icons/TourPreviousLeftArrowIcon.vue

@@ -1,4 +1,4 @@
-<template>
+<template functional>
     <svg width="12" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4.5 8.125 1 4.625l3.5-3.5M2.25 4.593h8.499" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>

src/lib/tour/index.ts

@@ -3,10 +3,10 @@ import { Transaction } from '@/stores/Transactions';
 import { SetupContext } from '@vue/composition-api';
 import { getNetworkTourSteps } from './network';
 import { getOnboardingTourSteps } from './onboarding';
-import { NetworkTourStep, OnboardingTourStep, TourName, TourSteps } from './types';
+import { NetworkTourStep, OnboardingTourStep, TourName, ITourSteps } from './types';
 
 export function getTour(tour: TourName | undefined, context: SetupContext)
-    : TourSteps<OnboardingTourStep> | TourSteps<NetworkTourStep> {
+    : ITourSteps<OnboardingTourStep> | ITourSteps<NetworkTourStep> {
     switch (tour) {
         case 'onboarding':
             return getOnboardingTourSteps(context);

src/lib/tour/network/01_YourLocationStep.ts

@@ -1,34 +1,34 @@
 import { SCALING_FACTOR } from '@/lib/NetworkMap';
-import { NetworkGetStepFnArgs, NetworkTourStep, TourStep, WalletHTMLElements } from '..';
+import { INetworkGetStepFnArgs, NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
 import { getNetworkTexts } from './NetworkTourTexts';
 
-export function getYourLocationStep({ nodes, scrollIntoView, sleep, selfNodeIndex }: NetworkGetStepFnArgs): TourStep {
+export function getYourLocationStep({ nodes, scrollIntoView, sleep, selfNodeIndex }: INetworkGetStepFnArgs): ITourStep {
     return {
         path: '/network',
         tooltip: {
-            target: `${WalletHTMLElements.NETWORK_NODES} span:nth-child(${selfNodeIndex + 1})`,
-            content: getNetworkTexts(NetworkTourStep.YOUR_LOCATION),
+            target: `${IWalletHTMLElements.NETWORK_NODES} span:nth-child(${selfNodeIndex + 1})`,
+            content: getNetworkTexts(NetworkTourStep.YOUR_LOCATION).default,
             params: {
                 // TODO On mobile phones if the node is in the south, the tooltip might break the web
                 placement: 'bottom',
             },
         },
         ui: {
             fadedElements: [
-                WalletHTMLElements.SIDEBAR_TESTNET,
-                WalletHTMLElements.SIDEBAR_LOGO,
-                WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
-                WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
-                WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
-                WalletHTMLElements.SIDEBAR_NETWORK,
-                WalletHTMLElements.SIDEBAR_SETTINGS,
-                WalletHTMLElements.NETWORK_STATS,
+                IWalletHTMLElements.SIDEBAR_TESTNET,
+                IWalletHTMLElements.SIDEBAR_LOGO,
+                IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
+                IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
+                IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
+                IWalletHTMLElements.SIDEBAR_NETWORK,
+                IWalletHTMLElements.SIDEBAR_SETTINGS,
+                IWalletHTMLElements.NETWORK_STATS,
             ],
             disabledElements: [
-                WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
-                WalletHTMLElements.NETWORK_MAP,
+                IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
+                IWalletHTMLElements.NETWORK_MAP,
             ],
-            disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
+            disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
         },
         lifecycle: {
             created: (async ({ goingForward }) => {
@@ -38,5 +38,5 @@ export function getYourLocationStep({ nodes, scrollIntoView, sleep, selfNodeInde
                 }
             }),
         },
-    } as TourStep;
+    } as ITourStep;
 }

src/lib/tour/network/02_BackboneNodeStep.ts

@@ -1,39 +1,39 @@
 import { SCALING_FACTOR } from '@/lib/NetworkMap';
 import { ref } from '@vue/composition-api';
-import { NetworkGetStepFnArgs, NetworkTourStep, TourStep, WalletHTMLElements } from '..';
+import { INetworkGetStepFnArgs, NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
 import { getNetworkTexts } from './NetworkTourTexts';
 
 export function getBackboneNodeStep(
-    { nodes, selfNodeIndex, isLargeScreen, scrollIntoView, sleep }: NetworkGetStepFnArgs): TourStep {
+    { nodes, selfNodeIndex, isLargeScreen, scrollIntoView, sleep }: INetworkGetStepFnArgs): ITourStep {
     const selectedNode = ref(-1);
     return {
         path: '/network',
         tooltip: {
             get target() {
-                return `${WalletHTMLElements.NETWORK_NODES} span:nth-child(${selectedNode.value + 1})`;
+                return `${IWalletHTMLElements.NETWORK_NODES} span:nth-child(${selectedNode.value + 1})`;
             },
-            content: getNetworkTexts(NetworkTourStep.BACKBONE_NODE),
+            content: getNetworkTexts(NetworkTourStep.BACKBONE_NODE).default,
             params: {
                 // TODO On mobile phones if the node is in the south, the tooltip might break the web
                 placement: isLargeScreen.value ? 'right' : 'bottom',
             },
         },
         ui: {
             fadedElements: [
-                WalletHTMLElements.SIDEBAR_TESTNET,
-                WalletHTMLElements.SIDEBAR_LOGO,
-                WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
-                WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
-                WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
-                WalletHTMLElements.SIDEBAR_NETWORK,
-                WalletHTMLElements.SIDEBAR_SETTINGS,
-                WalletHTMLElements.NETWORK_STATS,
+                IWalletHTMLElements.SIDEBAR_TESTNET,
+                IWalletHTMLElements.SIDEBAR_LOGO,
+                IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
+                IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
+                IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
+                IWalletHTMLElements.SIDEBAR_NETWORK,
+                IWalletHTMLElements.SIDEBAR_SETTINGS,
+                IWalletHTMLElements.NETWORK_STATS,
             ],
             disabledElements: [
-                WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
-                WalletHTMLElements.NETWORK_MAP,
+                IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
+                IWalletHTMLElements.NETWORK_MAP,
             ],
-            disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
+            disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
         },
         lifecycle: {
             created: (async () => {
@@ -53,5 +53,5 @@ export function getBackboneNodeStep(
                 await sleep(500);
             }),
         },
-    } as TourStep;
+    } as ITourStep;
 }

src/lib/tour/network/03_NetworkMetricsStep.ts

@@ -1,32 +1,32 @@
-import { NetworkTourStep, TourStep, WalletHTMLElements } from '..';
+import { NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
 import { getNetworkTexts } from './NetworkTourTexts';
 
-export function getNetworkMetricsStep(): TourStep {
+export function getNetworkMetricsStep(): ITourStep {
     return {
         path: '/network',
         tooltip: {
-            target: WalletHTMLElements.NETWORK_STATS,
-            content: getNetworkTexts(NetworkTourStep.METRICS),
+            target: IWalletHTMLElements.NETWORK_STATS,
+            content: getNetworkTexts(NetworkTourStep.METRICS).default,
             params: {
                 placement: 'top',
             },
         },
         ui: {
             fadedElements: [
-                WalletHTMLElements.SIDEBAR_TESTNET,
-                WalletHTMLElements.SIDEBAR_LOGO,
-                WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
-                WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
-                WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
-                WalletHTMLElements.SIDEBAR_NETWORK,
-                WalletHTMLElements.SIDEBAR_SETTINGS,
+                IWalletHTMLElements.SIDEBAR_TESTNET,
+                IWalletHTMLElements.SIDEBAR_LOGO,
+                IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
+                IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
+                IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
+                IWalletHTMLElements.SIDEBAR_NETWORK,
+                IWalletHTMLElements.SIDEBAR_SETTINGS,
             ],
             disabledElements: [
-                WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
-                WalletHTMLElements.NETWORK_MAP,
-                WalletHTMLElements.NETWORK_STATS,
+                IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
+                IWalletHTMLElements.NETWORK_MAP,
+                IWalletHTMLElements.NETWORK_STATS,
             ],
-            disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
+            disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
         },
-    } as TourStep;
+    } as ITourStep;
 }

src/lib/tour/network/04_NetworkCompletedStep.ts

@@ -1,16 +1,17 @@
-import { NetworkGetStepFnArgs, NetworkTourStep, TourStep, WalletHTMLElements } from '..';
+import { INetworkGetStepFnArgs, NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
 import { getNetworkTexts } from './NetworkTourTexts';
 
-export function getNetworkCompletedStep({ isLargeScreen }: NetworkGetStepFnArgs): TourStep {
+export function getNetworkCompletedStep({ isLargeScreen }: INetworkGetStepFnArgs): ITourStep {
     return {
         path: '/network',
         tooltip: {
             get target() {
                 return isLargeScreen.value
-                    ? WalletHTMLElements.SIDEBAR_ACCOUNT_MENU
-                    : `${WalletHTMLElements.NETWORK_TABLET_MENU_BAR} .account-button`;
+                    ? IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU
+                    : `${IWalletHTMLElements.NETWORK_TABLET_MENU_BAR} .account-button`;
             },
-            content: getNetworkTexts(NetworkTourStep.NETWORK_COMPLETED, isLargeScreen.value),
+            content: getNetworkTexts(NetworkTourStep.NETWORK_COMPLETED)[
+                isLargeScreen.value ? 'alternative' : 'default'],
             params: {
                 get placement() {
                     return isLargeScreen.value ? 'right' : 'top';
@@ -27,20 +28,20 @@ export function getNetworkCompletedStep({ isLargeScreen }: NetworkGetStepFnArgs)
         },
         ui: {
             fadedElements: [
-                WalletHTMLElements.SIDEBAR_TESTNET,
-                WalletHTMLElements.SIDEBAR_LOGO,
-                WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
-                WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
-                WalletHTMLElements.SIDEBAR_NETWORK,
-                WalletHTMLElements.SIDEBAR_SETTINGS,
+                IWalletHTMLElements.SIDEBAR_TESTNET,
+                IWalletHTMLElements.SIDEBAR_LOGO,
+                IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
+                IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
+                IWalletHTMLElements.SIDEBAR_NETWORK,
+                IWalletHTMLElements.SIDEBAR_SETTINGS,
             ],
             disabledElements: [
-                WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
-                WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
-                WalletHTMLElements.NETWORK_MAP,
-                WalletHTMLElements.NETWORK_STATS,
+                IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
+                IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
+                IWalletHTMLElements.NETWORK_MAP,
+                IWalletHTMLElements.NETWORK_STATS,
             ],
-            disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
+            disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
         },
-    } as TourStep;
+    } as ITourStep;
 }