Improve balances UX

[314159265359879]

With this enhancement #3525

Users can see the error in the image below (insufficient balance...):
When they have 350 STX in their wallet, and a pending transaction that will use 150 STX (100 STX transfer and 50 STX fee). There is only 200 STX available.

Showing two different values will lead to questions. Lets answer the likely question (A) or prevent the questions (B)?
A. By explaining the difference between available balance (shown on error) and the balance shown in the lower right corner.
I.e "Available balance takes into account pending transfers of STX and pending fees"
B. Or by showing available balance instead?
(...and other transactions with postconditions that suggest outgoing STX - #3568).

Because of a pending transaction like this (100 STX going out, and 50 STX fee)

[markmhendrickson]

@mica000 It seems most intuitive we just show available balance throughout the wallet?

[markmhendrickson]

We've started a document to better define the various balance types here: https://www.notion.so/Balances-UX-905c93b633b84e05a1428c1a9087ab82

Related design exploration: https://www.figma.com/file/aIhESuca3xWkJ7efpaivbV/Balances?node-id=0-1&t=hPcsHgJuzC0wTsea-0