Onboarding & Network Tour

[onmax]

Wallet Tours

This PR brings tours to the wallet.

For now, onboarding and network tour has been made, but the logic of the tour has been made in a way that it is easy to add new tour, even copy and paste it in other vue projects.

See it in action in PC

❗This PR simplifies useWindowSize logic and 4 other composables have been added which I believe are useful

Things that need to be done

• Review texts and wording
• Finish new WelcomeModal design (currently blocked by overnice)
• Check onboarding tour steps as there are some cases that might change (currently blocked by overnice)

Features

• Mobile responsive 📱
• Key navigation ⌨️
• On resize events 🏃
• Easy to create new tours 🏆
• Each step is very customizable 🪄
• Steps are reactive: The step will show different state/content depending on different conditions 🧲
• Steps have a custom lifecycle hooks 🪱
• The code made in this PR doesn't interfere or changes code in components already developed (except App.vue) 🏜️

Known limitations

This are some problems and limitations that I believe are not worth solving because they are time consuming and/or only happens in very specific scenarios.

• 😨 Sometimes, arrow tooltip is hidden and I don't know why. I have seen happening only in Brave in android and in Chrome in MacOS. I would say this is more common than it should be, but I have no clue how to solve it.
• 😱 If someone takes the onboarding tour without any transaction in their address, the tour forces the user to click on "Receive free NIM" to continue with the tour. This could be a problem, because we trust that the button will always give the user some NIM. If user is not able to get free NIM from faucet then we will allow user to go to next step but skipping the 'First transaction' step. All logic related to this issue can be improved if we integrate the Faucet into the wallet like we have in wallet.nimiq-testnet. This shouldn't happen anymore, but it has not been tested
• Legacy accounts will not have access to onboarding tour.
• Network tour is not optimized for mobile phones in landscape view. This is due in part, as the network page is not very good supported.
• Tab navigation with keyboard is quite poor. I didn't find a good way to disable tab navigation if the element has pointer-events: none
• Our translation extraction script have some issues if we try to translate strings from .ts files, a workaround can be seen here
• If user resizes during the tour to a small screen, it might happen that once he ends the tour, the buttons in the wallet don't react to events like on-click. This only happens in Chromium-based browsers, and not always! The probability of this is rare, that's why we won't fix it. To see this error, you MUST resize the window and not using "Device Tool Bar"

Technical explication

• New components: Tour.vue and TourLargeScreenManager.vue. New welcome modal named: DiscoverTheWalletModal.vue
• /lib/tour: Here are the types for the Tour and steps for each tour have been defined. A tour basically is composed by a series of steps. For now, only two tours have been developed: onboarding and network. Each step has:
  • tooltip: This is the configuration for the tooltip. Basically, it is using the API from Vue Tour under the hood with the only change that content MUST be an array of strings
  • ui: Which has:
    • fadedElements: Elements that we need to add opacity. This elements will not have interactivity. See "Disabling interactivity and adding opacity" section.
    • disabledElements: Elements that we need to remove interactivity. See "Disabling interactivity and adding opacity" section.
    • isNextStepDisabled
  • lifecycle: Custom functions that the developer can execute in different phases of the transition between steps. See "Steps lifecycle" section

Disabling interactivity and adding opacity

We are using data-attribute instead of CSS classes because it is easier to track which elements should be updated as data attributes allow to use a selector like [data-opaified="1"] and also selectors like [data-opacified]. See Tour.vue@_removeAttributes

Communication between Tour.vue and TourLargeScreenManager.vue

As these two component don't have any close relationship but the need to send data/actions to each other, they are using root instance to emit events. For example here

Getting data from other component

The idea is that the Tour function works as explicitly as possible, therefore, changing code of other original components have been avoided but sometimes the Tour logic needs a component's instance, so this function have been added:
searchComponentByName

Steps lifecycle

See Tour.vue@_moveToFutureStep()

            │   Compute future index using: goToNextStep() && goToPrevStep() which are the entrypoints
            │   tour.stop()
            ▼
 ┌───────────────────────────────┐
 │         unmounted()           │   - Old step unmounting function
 └──────────┬────────────────────┘  
 ┌───────────────────────────────┐
 │          created()            │   
 └──────────┬────────────────────┘
            │  change the path if neccessary 
            │  Update UI (fadedElements, non-interactable buttons/divs...) 
            ▼
┌────────────────────────────────┐
│          mounted()             │   - Returns the unmounted() function
└────────────────────────────────┘  
            │ tour.start()
            │
            ▼
WAITING FOR USER INTERACTION
FOR NEXT ACTION

New dependencies

• Vue Tour which uses Vue 2.
  In the future we could use Vue 3 Tour
• Vue Tour uses Popper JS

How it has been tested?

• Tested heavily in Windows 11: firefox, brave and edge
• Tested in Android: Chrome and brave
• Tested in iPhone 13

[onmax]

Just some questions I would like to solve 😶‍🌫️

[sisou]

Generally nice! 👍

I was a bit confused when reading through Tour.vue, but I think that is partly because of the functions and variables not being named optimally, so I think there's some potential to improve.

My advice is also in regards to this being "mobile-only". Don't push desktop size too far back, it might get hard to find where to split functionality if done too late.

[onmax]

This PR is mostly done. Although there are still some tasks that need to be finished:

• Review texts and wording
• Finish new WelcomeModal design (currently blocked by overnice)
• Check onboarding tour steps as there are some cases that might change (currently blocked by overnice)

[onmax]

Just realised a possible problem:

• 😱 If someone takes the tour without any transaction in their address, the tour forces the user to click on "Receive free NIM" to continue with the tour. This could be a problem, because we trust that the button will always give the user some NIM. But if this does not happen, then the user would get stuck in the tour and would not be able to finish it.

A possible solution could be to skip steps 2 (internally called TRANSACTION_LIST) and 3 (aka FIRST_TRANSACTION) and go straight to step 4 where the user is introduced to the bitcoin address.

Jumping from step 2 to 4 may be a bit out of place and not giving any feedback to the user may be strange, but perhaps not so much of a problem as the number of times this happens is low.

[onmax]

Just realised a possible problem:

• 😱 If someone takes the tour without any transaction in their address, the tour forces the user to click on "Receive free NIM" to continue with the tour. This could be a problem, because we trust that the button will always give the user some NIM. But if this does not happen, then the user would get stuck in the tour and would not be able to finish it.

A possible solution could be to skip steps 2 (internally called TRANSACTION_LIST) and 3 (aka FIRST_TRANSACTION) and go straight to step 4 where the user is introduced to the bitcoin address.

Jumping from step 2 to 4 may be a bit out of place and not giving any feedback to the user may be strange, but perhaps not so much of a problem as the number of times this happens is low.

You can see 35e8301

[onmax]

Onboarding tour is only meant for users who don't have a ledger.

Therefore, in /welcome, the modal should be different if the user has a ledger.