Show locked/stacked Stacks balances

[kyranjamie]

The UI only shows available balance, and not what is stacked.

[markmhendrickson]

Is this the case only for Ledger-connected accounts or even software ones?

[kyranjamie]

I suppose this is not specific to Ledger. (Just happened to discover using my stacking Ledger).

[markmhendrickson]

Cool, makes sense 👍

[mica000]

This design proposal includes changes the web wallet that aims to not only show the locked/stacked stacks balance but also increase the visibility of the Stacking feature.

Goal 1: Bridge the existing gap that exists on the web wallet;
Goal 2: Increase feature visibility;
Goal 3: Increase amount of Stacking users;

Web.wallet.mov

Prototype

Figma

[markmhendrickson]

Looking good! A few notes:

• If the user has only partially locked their balance, do we want to show both "locked" and "unlocked" sub-balances? Or just "locked" and the user has to deduce the remaining unlocked amount? I believe in the desktop wallet we show both, with the unlocked labeled "10 STX available"
• We can create a new tab for Stacking in the wallet here (and I like the idea!), though I'm not sure we can embed the Stacking app / UX entirely there since it'll live in a separate code base for the hosted site. Perhaps we can start with a simple prompt to "get started with Stacking" that would take the user to the separate app, then enhance from there inside the wallet itself?
• Should we perhaps show the top-level balance on the home screen in USD with the STX shown further below? We should perhaps consider that approach, placing the locked/unlocked UI under "Balances" in the STX row itself so it's specific to that asset and not others.
• I might recommend a different icon for the Stacking tab, something that connotes earning / yield? The current graph-like icon could connote "visualize your assets over time" as easily.

Note as well that we could leverage the addition of token-specific screens for displaying detailed info about STX (and other tokens) such as locked/unlocked status. The user could click on a token listing under "Balances" and get taken to another full-view screen that's specific to the token, with various details about it for the user (and even view its specific activity history, without other token activity shown).

[markmhendrickson]

@mica000 I'm thinking that short-term until we add the new token-specific screens, we should just push a hotfix for locked vs. unlocked (because right now we show just the unlocked amount so it appears as though you've lost all the locked STX 😱)

wdyt of this simple parenthesis?

[mica000]

@markmhx Seems like a good idea. Let's give it a try!

[mica000]

This is related to #3569

Figma in progress: https://www.figma.com/file/aIhESuca3xWkJ7efpaivbV/Balances?node-id=0%3A1&t=uNgCPD24CgnpFIrM-1