UIUX: Overhaul of UTXO list, handling of locked UTXOs and scrollbar added to tx-table web component

[moneymanolis]

Main

• Ensure that locked UTXO / UTXO used in unsigned transactions can't be used for transactions (fixes UX: Inconsistent behavior for "Create unsigned transaction" #1562)

• Overhaul of checkbox logic in UTXO list
  1. If a locked or "locked-unsigned" UTXO is chosen, only UTXO of the respective type can be selected anymore.
  2. Mouseover event for checkboxes added (flashing "Select checkboxes for actions.")
  3. Manage PSBT button action added
  4. Icon info popups added
  See the following video:
  https://user-images.githubusercontent.com/70536101/154949485-b7f45060-15f9-46a3-8b53-18268583720c.mov

• Locked UTXO or UTXO in unsigned transactions can't be chosen in the coin selection menu anymore, the checkbox is replaced by the snowflake image and the info text "Unsigned" is added to distinguish between locked and "unsigned-locked" UTXO:

Misc

• Fix rounding error in coin selection (fixes Bug: Rounding error when using coin selection #1568)
• Fix styling / text in general settings.
• Design changes to make the UTXO- / TX-list display quieter.

[netlify]

✅ Deploy Preview for specter-desktop-docs ready!

Name	Link
🔨 Latest commit	80a9d2a
🔍 Latest deploy log	https://app.netlify.com/sites/specter-desktop-docs/deploys/624ff51801a18d000879220e
😎 Deploy Preview	https://deploy-preview-1580--specter-desktop-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[moneymanolis]

@relativisticelectron if you want, you could test the PR to check whether you are happy with the overall UX. Would be great. I am happy to adapt it.

[relativisticelectron]

Hi, I think the freezing symbol is cute and the logic seems to work well.
I found however a way to still create multiple conflicting transactions:

• Create tx with a utxo
• Go to utxo overview. Unfreeze the utxo.
• Create a tx with the utxo again

I am actually not sure if this should be prevented (As I said in another issue, I actually want to create conflicting tx with differents fees). I just wanted to point it out, and let you decide if you want to close this loophole or not.

[moneymanolis]

Good point, I think we should add a little text in the front end to distinguish between UTXOs that are locked because they are used in an unsigned tx and UTXO that are locked by manually freezing them. Server sidewise, Specter lockes both via the lockunspent RPC call. Sth. like this:

[cypherhoodlum]

@cypherhoodlum would be great to get feedback from you on this PR regarding the scrollbar implementation for the main div, the tx table and the tx table used in the coin selection. (Of course, if you stumble upon anything else which you would improve UIUX-wise in this PR, let me know as well)

I think the scrollbars look and feel great. No issues there.

However, I think the new way of showing the balances is slightly harder to read than the original version.

Original:

Current:

I think it's good to unify the overall visual look by putting elements in boxes with rounded borders (new version) but the readability should not suffer. Maybe the first row could have a bigger font size than the others? Another thing worth trying out is to align the numbers/balances vertically. Maybe the whole box could be a bit bigger since it's probably the most important element on the whole page. It's at least the second most important element if the transaction history is the most important one. So I think the whole box and the total amount could be accentuated some more. What do you think @moneymanolis ?

[cypherhoodlum]

Maybe something like this? It's a mixture of the original style and the current one.

edit: I made a PR into your branch @moneymanolis.

[moneymanolis]

I think it's good to unify the overall visual look by putting elements in boxes with rounded borders (new version) but the readability should not suffer. Maybe the first row could have a bigger font size than the others? Another thing worth trying out is to align the numbers/balances vertically. Maybe the whole box could be a bit bigger since it's probably the most important element on the whole page. It's at least the second most important element if the transaction history is the most important one. So I think the whole box and the total amount could be accentuated some more. What do you think @moneymanolis ?

Thanks a lot for the feedback and the PR, @cypherhoodlum.
Good points!

Since I would like to wrap this PR up soon (it is already too big actually), though, I would keep the style for now and move the discussion and work on the balance box to this already opened issue: #1627

[k9ert]

@cypherhoodlum awesome feedback and thanks for your PR. It's yet a big improvement. But i also agree with @moneymanolis , let's not make that PR any bigger. We struggled now a lot with the UI-tests in this PR. The last 12 commits are only regarding improving testing. It's high likely your PR would break them (again). And even if not, this PR is a moving goal-post since almost the beginning.
There are people who think that feature-branches should only be open for a couple of hours. This one is now open for more than 40 days.

[cypherhoodlum]

But i also agree with @moneymanolis , let's not make that PR any bigger. We struggled now a lot with the UI-tests in this PR. The last 12 commits are only regarding improving testing. It's high likely your PR would break them (again).

Right, that's understandable. I will make a separate PR related to #1627.

[k9ert]

This is really an unlucky PR. After scratching our heads why the builds are not kicking in at all (probably an issue with the Google-cloud), now the linter is broken.

Traceback (most recent call last):
  File "/usr/local/bin/black", line 8, in <module>
    sys.exit(patched_main())
  File "src/black/__init__.py", line 1423, in patched_main
  File "src/black/__init__.py", line 1409, in patch_click
ImportError: cannot import name '_unicodefun' from 'click' (/usr/local/lib/python3.10/site-packages/click/__init__.py)

Investigating now ...

[k9ert]

Fixed in #1642
Build is now hopefully green.