Balance page GUI

[speqtr]

Objective:

Application should have a page that users can use to check wallet balance, latest transactions, quick actions (transfer/receive funds, etc.) and go to supported markets, exchanges and explore QWC network.

NOTE: this is the page that users will see (and use) most frequently, so all the most important information and actions should be there. At the same time, we should not overcomplicate this page in order to keep things simple for new users.

Solution:

Develop Balance page:

• display "Total balance" (available funds in user's wallet);
• list of recent transactions (and an option to quickly switch to all transactions view);
• row of buttons for quick actions (send/receive funds, etc.);
• list of available markets;
• list of available exchanges;
• list of links to explore QWC network.

Value (for developers, product and/or users):

Provide a set of frequently used features that user would normally expect from any cryptowallet or bank application.

DoD (Definition of Done):

Balance page GUI is implemented in QML with all the described features.

[speqtr]

Preview:

[speqtr]

Dark mode:

[speqtr]

Extra notes and comments:

[speqtr]

@exploshot, @nnian, @Xecute0101 and others are invited to comment and discuss current Balance page GUI and propose improvements.

PS: questions are also welcome 🙂

[exploshot]

I would prefer that our services are at the top instead of the markets.
the Addresses should have the latest 16 chars and the first 6.
The dark mode is a bit too bright :D.
Will there be a possibility to insert styles?
Otherwise, I am quite satisfied.

[speqtr]

@exploshot thanks for great and quick feedback! 🙂

1. I would prefer that our services are at the top instead of the markets.

Consider it done 👍

2. the Addresses should have the latest 16 chars and the first 6.

Done.

3. The dark mode is a bit too bright :D.

Agree! This colors are copied from default Google Material dark theme. In one of the next updates I'll make dark theme truly dark 😈

4. Will there be a possibility to insert styles?

Yes, sure! But not in the first release.

[nnian]

I like it a bit darker too 😈
People are able to set the Currency from USD to EUR, CNY... ? or is USD and BTC a static value?

Received Tab:
There is a "received from 0xQWC..." hm?

[ghostx1x]

More Dark like this :) with these colors in the right side

[speqtr]

@nnian

People are able to set the Currency from USD to EUR, CNY... ? or is USD and BTC a static value?

At the moment USD, EUR, CNY, BTC values will be just static QWC rates from one of the exchanges. In one of the future versions I think we should add an option to set amount in one of those currencies and convert it to QWC automatically.

Received Tab: There is a "received from 0xQWC..." hm?

Some of the text lables are still just static placeholders and will be changed in future versions 🙂

[Xecute0101]

Thanks for the update. The main purpose is shown here.

I have compared the size of the screen GUI to that of iPhone 10 and Samsung S10 Large Screen.

1. For each outer rectangular outline, can we change the sharp edges to the rounded edge? That will provide more soft feelings to users.

2. For recent transactions, I wish to include # of confirmation info in a round icon like our desktop wallet and when a transaction detail is selected, a link to block explorer information for this transaction?

3. Can you change the font to Open Sans or Source Sans Pro and reproduce the images?

4. I think UI would look much cleaner if the descriptions of buttons go inside of the circles or removed.

5. Under the bright theme, please consider removing the smudge of buttons into the background.

[speqtr]

@Xecute0101

I have compared the size of the screen GUI to that of iPhone 10 and Samsung S10 Large Screen.

On phones with larger screens all spacings and sizes of elements will be automatically adjusted in order to make use of all available space. At the same time current screenshot shows that the GUI will look nice even on a small iPhone 5 screen. Basically, application remains usable as long as screen resolution is 320 by 480 pixels or higher.

For each outer rectangular outline, can we change the sharp edges to the rounded edge? That will provide more soft feelings to users.

🆗

For recent transactions, I wish to include # of confirmation info in a round icon like our desktop wallet and when a transaction detail is selected, a link to block explorer information for this transaction?

Nice catch! I'll add that feature in one of the next updates.

Can you change the font to Open Sans or Source Sans Pro and reproduce the images?

Sure, will do. However, we should take into an account that selected font should look nice on different screen resolutions with different dpi/ppi values and in various languages. And (unfortunately for us) there are not so many fonts that can handle this case. In other words... we should not select a font only because it looks nice in cyrillic on a high resolution screen.

I think UI would look much cleaner if the descriptions of buttons go inside of the circles or removed.

OK, I'll update this part of Balance page in order to make it cleaner.

Under the bright theme, please consider removing the smudge of buttons into the background.

Consider it done 🙂

[speqtr]

All feedback was taken into an account and updated GUI is already implemented. Further requests can be sent to #1 or by opening a separate issue on GitHub.