feat: utxo list

[ghost]

Resolves #338.

Still in draft as some cleanup, i18n, etc. is still missing. Should be ready to play around with, though. Let me know what you think. More advanced stuff like filtering the table by tags or so can be done later imo.

⚠️ The diff is only so huge because I installed a library to handle the table.

📸

[ghost]

Btw, since it came up in the ccommunity call: The tags are colored as follows:

• cj-out: 🟢 Green to indicate success. We want people to have lots of green UTXOs.
• change-out: 🟡 Yellow to indicate "be careful". Getting change out of a collaborative transaction is something completely normal (unless you sweep). So it's fine to have these UTXOs, but you have to be careful with them.
• reused: 🔴 Red to indicate danger. You're likely doing something wrong if you have a reused address.

All other tags (new, used, non-cj-change, etc.) won't have any color as they feel somewhat neutral to me. Thoughts on that? cc @dergigi

[theborakompanioni]

className also utxoListContainer here? Maybe just a semantic issue.

[theborakompanioni]

Dark mode issue in the "Account Details" view. This might have been introduced by my while updating bootstrap.

As I am the culprit, I will fix it myself later on. Just noting it down.

[ghost]

@theborakompanioni Added the confirmations to the table as discussed. ✅ Also added a refresh button that reloads the wallet info and thus refreshes the utxos.

[theborakompanioni]

utxo.locktime is also populated for time-locked utxos. Is there a specific reason why locktime is parsed from the status value? Would be nice to remove this special handling of "[LOCKED]". Just asking, because It has not been that reliable in the past.

[ghost]

That is a good point actually. Let me change that. 👍

[theborakompanioni]

What follows are some observations while playing with the UI. First of all: Great job. Amazing for a first iteration. It is very informative, functional, visually appealing, and hopefully quite useful for users. I'm eager to hear the feedback from the community.

Observations

• Currently, it is possible to unfreeze non-expired fidelity bonds.

  • It is prevented in current CurrentWalletAdvanced view. Cannot remember exactly right now what the issue is, but I think this leads to some problems. At best, it is handled in the backend, but till that is the case, we should keep this behaviour imho (was introduced in c68e4c5).

• Currently, freezing addresses is possible, if a taker or maker operation is running. In JM <=v0.9.6 the operation succeeds, but will lead to problems; in >v0.9.6 (still unreleased) this is prevent server-side. ("Action not allowed" alert is shown ✔️, but no further information on why that is ❌)

• If the overlay is opened, switched to tab "Jar Details" and subsequently closed. The next time the overlay is opened tab "UTXOs" is activated, but the contents of tab "Jar Details" are still shown. This also applies to the active Jar -> Open Jar#0 -> Switch to Jar#2 (active) -> Close overlay -> Click Jar#0 -> Jar#2 still shown ❌ .

---

What follows are things that can probably be addressed in follow-up PRs:

• Can sorting the utxo list by confirmations be added? I think there is a use case for users seeking to "spend my most recent coins" or "spend oldest coins".

Nits

• Hovering over addresses in "Jar Details" displays a border - is this intended? If so, a left padding is missing. I think it actually looks good.. Addressed in fix: text and border colors after bootstrap update #432

• "Wallet Info reload" function is great. But it feels like a visual feedback is missing (On reload success -> nothing changes -> user might not know what happened or are "unsatisfied"/).
  Thinking of two possible solutions:

  • showing a ✔️ icon like we do on successful "address copy" (simple and quick)
  • introducing toasts - e.g. "Successfully reloaded wallet information" (time-consuming and probably not needed yet)
    • However, they'd be useful in the future, e.g. displaying infos from websockets (incoming transaction, etc.)

• Now that the switching of Jars in the overlay looks nice, do you think it should switch places with the "close" button?

  • Thought: This is the only view having the close button on the left hand side. Would be more consistent to have it on the right, imho.

• If the first account in a jar is empty, the accordion body is visually empty (other show an xpub, but JM treats it specially and does not provide the xpub for the first account)

  • As a user, this would "surpise" me, or at least raise questions. What do you think, should some sort of message be shown?
    "e.g. internal account is empty"

• Should contents of column "Value" be aligned on the right hand side?

• Current max. confirmations is 99999999, then the value is visually cut off. We have time until year ~3909 till block 99,999,999 is mined.. so maybe this can be fixed later.

Questions

• Have you considered showing the sum of all selected utxos? That (in combination with "freeze all non-selected"; see below) is one of the most useful features I can think of. Use case is e.g. to sweep an approximate amount to cold storage or spend the funds otherwise as payment. As a user, I do not want to sum it up manually. What do you think?

• Do you think "freeze all non-selected coins" is a common use case in general?

• Should the same visual representation of tags as in the "UTXOs" tab be used in the "Jar Details" tab?

• Have you seen or tried SortToggleType.AlternateWithReset? Would it be beneficial?

• Can advanced mode be removed? Maybe the flag useAdvancedWalletMode can be kept, but maybe the actual "CurrentWalletAdvanced" view (and "DisplayAccount" respectively) is not needed anymore?

  • Moving all used sub-views into jar_details directory (e.g. DisplayBranch.tsx)

[dergigi]

Nice! Great job, that looks really awesome already. Love the confirmation indicator.

All other tags (new, used, non-cj-change, etc.) won't have any color as they feel somewhat neutral to me. Thoughts on that?

I like the green/yellow/red distinction, and I think having no colors on the other tags is fine. Let's keep it like that and see how it is perceived by users.

---

Only thing I found during testing is that there can be a label/text overlap in the "Jar Details" view, but I guess that's unrelated to this PR. Just bringing it up here so we don't forget.

---

Jam is a web UI for JoinMarket with focus on user-friendliness. It aims to provide sensible defaults and be easy to use for beginners while still having the features advanced users expect.

We're getting there! 😊 🚀

[ghost]

Awesome, thanks for all the detailed feedback! 🙌 🙏 It's great to know that everything's been thoroughly tested. 👌

I think I addressed everything that needs immediate attention. Please have another look. @theborakompanioni.

Below my comments on the things I didn't address yet.

"Wallet Info reload" function is great. But it feels like a visual feedback is missing

There's some feedback in terms of a loading spinner being shown and hidden again after loading. I personally don't think much more feedback is required (cf. a reload button in a browser which also only has two states usually: loading and not loading.)

If the first account in a jar is empty, the accordion body is visually empty

Jar details needs a redesign and rewrite imo. Haven't touched it beyond some obvious issues.

Current max. confirmations is 99999999

Let's push that fix to an upcoming version. 😄

Have you considered showing the sum of all selected utxos?

Good idea, let's track that as an improvement: #440.

Do you think "freeze all non-selected coins" is a common use case in general?

No I think that'd be confusing to be honest. 😄 Is that a common pattern elsewhere -- performing an operation on non-selected items?

Should the same visual representation of tags as in the "UTXOs" tab be used in the "Jar Details" tab?

Yes. As mentioned, the Jar Details tab needs a redesign.

Can advanced mode be removed? Maybe the flag useAdvancedWalletMode can be kept, but maybe the actual "CurrentWalletAdvanced" view (and "DisplayAccount" respectively) is not needed anymore?

Yes I think we're ready to finally remove it now. I tracked #441.

[theborakompanioni]

Added two suggestions, one is a tiny visual "improvement", the other fixes a display bug in dark-mode. (Another one was introduced by me and is fixed in #442)

Please fix and/or merge on your own will. Approved ✔️
This feature rocks 🪨 🪨 🪨

[editwentyone]

https://www.figma.com/file/kfejZJFlwBywvLEnPEmJo1/JoinMarket-UI?node-id=5071%3A87607

Bildschirmaufnahme.2022-08-12.um.14.07.26.mov

[editwentyone]

There's some feedback in terms of a loading spinner being shown and hidden again after loading. I personally don't think much more feedback is required (cf. a reload button in a browser which also only has two states usually: loading and not loading.)

I think its better to have a green Checkmark replacing the spinning loader / refresh icon for 2 seconds as an indicator.
your example with a reload for a browser window has a visual feedback on success: the whole window goes blank and rebuilds when you do a browser refresh. because we don't do that, a little success indicator (also possible as a toast) in our case would be helpful