Milestone 1.2: Navigation

Status: Planning

Design milestone, Code milestone, Figma

The application flow in Milestone 1 is very simple. After a mostly linear onboarding flow, the user lands on the block clock. They can navigate into settings, and back.

In the future, the application will be more complex. There will be new distinct areas for viewing activity, sending, and receiving, each with sub-pages, nested user flows, modals, and more.

Goal with this milestone is to restructure the application, focusing on navigation. We can add empty placedholders for all new screens, only containing essential navigation components.

A central part of this will be the new navigation bars, which will differ in look and behavior across desktop and mobile.

One of the consideration is that the application can be built without wallet features, or a user may choose to only use the node features. In the first case, the UI will skip anything related to the wallet. In the second case, the node will be the primary focus point, with a subtle option to add a wallet.

The same states are required on mobile, along with other layout differences to account for the different form factor, interaction model and user needs.

Below are the various interactive states of elements in the navigation bar on desktop.

The wallet selector differs across device types. While the content is identical, it appears as a dropdown on desktop, and a modal that slides up from the bottom on mobile.

We are still investigating how much information the application has about closed wallets (only one wallet is open, or active, at a time). Here are some variations with different amounts of detail.

Below are interactive states of many of the individual elements. For all the visual details, see the Figma file linked above.

Another aspect is to implement navigation and transition patterns that are intuitive and consistent (in that order). Below are some basic patterns, most of which are already implemented in the application.

On desktop, users can also directly access various options through the application menu, which are slightly different across operating systems. Below is a first mock-up based on the existing QT application. We will refine these as we work through the remaining milestones as we detail the other features.

Everything on this page is a work-in-progress.