(ui) Implement UTXO Selection Modal

[amitx13]

subtask of #689
Aim : (ui) Quick freeze/unfreeze UTXOs from selected source Jar

Description: Users should have the ability to select specific UTXOs when performing a direct-send or participating in a coin-join. This functionality aims to give users greater control over their UTXOs. We will implement a modal that allows users to select specific UTXOs. This modal should open when the user clicks on the source jar, similar to the interface in /wallet within the Jam application.

Objective:
Provide a quick and simple way for users to freeze or unfreeze UTXOs. Note that this is not full coin control but a simplified version to meet user needs for basic UTXO management.

[amitx13]

@editwentyone What do you think? Should I use the same modal, or is there something else in your mind to make the UI flow more intuitive and user-friendly?

[editwentyone]

@amitx13 what do you think about this?

behavior: the lower area should be closed when loading the modal, default all green utxos are preselected, the user can now deselect some when needed. the blue area is just for the complete picture

https://www.figma.com/design/kfejZJFlwBywvLEnPEmJo1/JoinMarket-UI?node-id=6913-17541&t=CTiV3pSEDEFVU3ba-11

[editwentyone]

when selecting the jar we can hint coin control by opening up the Jar and the user can click the jar to start the modal
https://www.figma.com/design/kfejZJFlwBywvLEnPEmJo1/JoinMarket-UI?node-id=5276-74107&t=CTiV3pSEDEFVU3ba-11

[amitx13]

Wow, the UI flow looks way cooler now. Thanks for the suggestions, @editwentyone . 

[amitx13]

Hey , @editwentyone and @theborakompanioni I am done with the flow and also added some checks to give user a bigger picture
1. If none of the UTXO's are selected and user tries to proceed

2. If the user tries to Unfreeze UTXO, which is used to create a Fidelity Bond

3. In case all the UTXO's are frozen in a jar

[editwentyone]

case 2 and 3 are solid! good thinking. just add some margin left and right to the whole container, its a little to close to the border

for case 1: instead of a "warning" in red, we could just disable the next button until the user selects minimum one valid UTXO. if that's not enough then lets keep the message but in yellow as a warning (yellow) or info (grey), not an error (red) + and the disabled button mechanic

what do you think? awesome work so far

[amitx13]

Thanks for the feedback! Yeah, it's a warning, so going with yellow and disabling the next button is a pretty good idea, tho. Thanks!

[editwentyone]

2 other notes:

• the checkboxes are not square and looks "different"? hard to understand if they are selected or not (dark mode tested, easier in light mode)
• if there are no frozen utxos, we don't need the collapse line
• more padding on div.modal-body: from 16 up to ~40?

[theborakompanioni]

Just for my understanding.. the goal is "Quick freeze/unfreeze UTXOs from selected source Jar", it is? It feels this comes across like a real "Coin Control" feature, which it is not, right?

[editwentyone]

also you are right, its opening immediately when source is selected. the Figma example above shows how the jar should change after selection to preview that there is a function hidden (by clicking the jar) to bring up the modal

flow:

• first user selects the source (radio button)
• when A is selected than the JAR changes to an open state with "select UTXOs" tooltip again and stays like this
• the user can't look into other jars when not preselected by radio
• so the modal is just for the preselected JAR (example here is A)
• if user selects another jar B, that opens up with "select UTXOs" tooltip above and A closes again

[editwentyone]

update with new wording to emphasize its not coin control (open to other text suggestions), also please consider the labeling of both buttons at the bottom

https://www.figma.com/design/kfejZJFlwBywvLEnPEmJo1/JoinMarket-UI?node-id=6913-17541&t=CnX9tjp55Ds1Y2VB-11