Onboarding & Network Tour

.tx/config

@@ -7,4 +7,3 @@ minimum_perc = 0
 source_file = src/i18n/en.po
 source_lang = en
 type = PO
-

package.json

@@ -49,6 +49,7 @@
     "vue-responsive-components": "^0.2.3",
     "vue-router": "^3.1.6",
     "vue-simple-markdown": "^1.1.4",
+    "vue-tour": "^2.0.0",
     "vue-virtual-scroller": "https://github.com/sisou/vue-virtual-scroller#nimiq/build",
     "webpack-i18n-tools": "https://github.com/nimiq/webpack-i18n-tools#master"
   },

src/App.vue

@@ -1,5 +1,9 @@
 <template>
     <div id="app" :class="{'value-masked': amountsHidden}">
+        <transition v-if="showTour" name="delay">
+            <Tour/>
+        </transition>
+
         <main :class="activeMobileColumn" ref="$main">
             <Sidebar/>
 
@@ -44,7 +48,19 @@ export default defineComponent({
 
         const { activeMobileColumn } = useActiveMobileColumn();
 
-        const { accountInfos } = useAccountStore();
+        const { accountInfos, state: accountState, setTour } = useAccountStore();
+        const path = context.root.$route.path as string || '';
+        const tourName = accountState.tour?.name || '';
+        if (
+            // if we are in onboarding tour and the path is NOT one of the path in the onboarding tour
+            // or if we are in network tour and the path is NOT one of the path in the network tour
+            // then remove tour state
+            (!['/', '/transactions', '/accounts'].includes(path) && tourName === 'onboarding')
+            || (!['/network'].includes(path) && tourName === 'network')) {
+            setTour(null);
+        }
+        const showTour = computed(() => !!accountState.tour);
+
         // Convert result of computation to boolean, to not trigger rerender when number of accounts changes above 0.
         const hasAccounts = computed(() => Boolean(Object.keys(accountInfos.value).length));
 
@@ -53,7 +69,7 @@ export default defineComponent({
         // Swiping
         const $main = ref<HTMLDivElement>(null);
         let $mobileTapArea: HTMLDivElement | null = null;
-        const { width, isMobile } = useWindowSize();
+        const { width, isSmallScreen } = useWindowSize();
 
         async function updateSwipeRestPosition(
             velocityDistance: number,
@@ -122,21 +138,22 @@ export default defineComponent({
             excludeSelector: '.scroller, .scroller *',
         });
 
-        watch([isMobile, swipingEnabled], ([isMobileNow, newSwiping], [wasMobile, oldSwiping]) => {
+        watch([isSmallScreen, swipingEnabled], ([isSmallScreenNow, newSwiping], [wasSmallScreen, oldSwiping]) => {
             if (!$main.value) return;
 
-            if ((isMobileNow && !wasMobile) || (newSwiping === 1 && oldSwiping !== 1)) {
+            if ((isSmallScreenNow && !wasSmallScreen) || (newSwiping === 1 && oldSwiping !== 1)) {
                 attachSwipe();
-            } else if (!isMobileNow || newSwiping !== 1) {
+            } else if (!isSmallScreenNow || newSwiping !== 1) {
                 detachSwipe();
             }
         }, { lazy: true });
 
         onMounted(() => {
-            if (isMobile.value && swipingEnabled.value === 1) attachSwipe();
+            if (isSmallScreen.value && swipingEnabled.value === 1) attachSwipe();
         });
 
         return {
+            showTour,
             activeMobileColumn,
             hasAccounts,
             amountsHidden,
@@ -148,6 +165,9 @@ export default defineComponent({
         SwapNotification,
         UpdateNotification,
         LoadingSpinner,
+
+        // lazy loading
+        Tour: () => import(/* webpackChunkName: "tour" */ './components/Tour.vue'),
     },
 });
 </script>
@@ -157,6 +177,7 @@ export default defineComponent({
 #app {
     @include flex-full-height;
     @include ios-flex;
+
     overflow: hidden; // To prevent horizontal scrollbars during panel sliding
     touch-action: pan-y;
 

src/components/AccountBalance.vue

@@ -63,8 +63,8 @@ export default defineComponent({
         const $fiatAmountContainer = ref<HTMLDivElement>(null);
         const $fiatAmount = ref<Vue>(null);
 
-        const { isFullDesktop } = useWindowSize();
-        const fiatAmountMaxSize = computed(() => isFullDesktop.value ? 7 : 5.5); // rem
+        const { isLargeScreen } = useWindowSize();
+        const fiatAmountMaxSize = computed(() => isLargeScreen.value ? 7 : 5.5); // rem
         const fiatAmountFontSize = ref(fiatAmountMaxSize.value);
 
         async function updateFontSize() {

src/components/AccountMenu.vue

@@ -37,6 +37,7 @@ import { useAccountStore, AccountType } from '../stores/Account';
 import { useAddressStore } from '../stores/Address';
 
 export default defineComponent({
+    name: 'account-menu',
     setup(props, context) {
         const { activeAccountInfo } = useAccountStore();
         const { state: addressState } = useAddressStore();

src/components/BalanceDistribution.vue

@@ -362,11 +362,9 @@ export default defineComponent({
             margin-left: -0.375rem;
             margin-right: -0.375rem;
             line-height: 1;
+            width: min-content;
 
-            position: absolute;
             z-index: 3;
-            top: 3rem;
-
             transition: all 200ms var(--nimiq-ease);
 
             &.exchange-is-close {

src/components/BtcTransactionList.vue

@@ -150,8 +150,8 @@ export default defineComponent({
         const scrollerBuffer = 300;
 
         // Height of items in pixel
-        const { isMobile } = useWindowSize();
-        const itemSize = computed(() => isMobile.value ? 68 : 72); // mobile: 64px + 4px margin between items
+        const { isSmallScreen } = useWindowSize();
+        const itemSize = computed(() => isSmallScreen.value ? 68 : 72); // mobile: 64px + 4px margin between items
 
         // Get all transactions for the active addresses
         const txsForActiveAddress = computed(() => Object.values(btcTransactions$.transactions)

src/components/CountrySelector.vue

@@ -42,7 +42,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from '@vue/composition-api';
 // @ts-expect-error Could not find a declaration file for module 'v-click-outside'.
-import vClickOutside from 'v-click-outside';
+import vClickOutside from 'v-click-outside'; // This is useless, this could be removed and use useOutsideClick instead
 import I18nDisplayNames from '../lib/I18nDisplayNames';
 import CountryFlag from './CountryFlag.vue';
 import { ALL_COUNTRY_CODES } from '../lib/Countries';

src/components/MobileActionBar.vue

@@ -30,7 +30,7 @@ export default defineComponent({
         const { activeAddressInfo, addressInfos } = useAddressStore();
         const { activeCurrency, activeAccountInfo, hasBitcoinAddresses } = useAccountStore();
         const { accountBalance } = useBtcAddressStore();
-        const { isMobile } = useWindowSize();
+        const { isSmallScreen } = useWindowSize();
         const { activeMobileColumn } = useActiveMobileColumn();
 
         function nimOrBtc<T>(nim: T, btc: T): T {
@@ -45,7 +45,7 @@ export default defineComponent({
             addressInfos.value.filter(({ type }) => type === AddressType.BASIC).length > 1));
 
         function receive() {
-            if (isMobile.value
+            if (isSmallScreen.value
                 && activeMobileColumn.value !== ColumnType.ADDRESS
                 && (hasMultipleReceivableAddresses.value || hasBitcoinAddresses.value)
             ) {
@@ -60,7 +60,7 @@ export default defineComponent({
             activeAccountInfo.value && activeAccountInfo.value.addresses.length > 1);
 
         function send() {
-            if (isMobile.value
+            if (isSmallScreen.value
                 && activeMobileColumn.value !== ColumnType.ADDRESS
                 && (hasMultipleSendableAddresses.value || hasBitcoinAddresses.value)
             ) {

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);