Refactor: SingleUserPicker in Control Safe dialog
Description
This PR improves the user experience of SingleUserPicker used in Target contract address field in the Control Safe Dialog by addressing the following issues raised in #3865:
When clicking on the target contract address input field without someone writing anything, the message “it looks like I couldn’t find what you are looking for” pops up. The expectation is that there wouldn’t be any dropdown message until the user had a chance to write or paste something into the input.
If you paste the target contract address into the input field but you don’t actually select the address from the given drop down option but instead move to the ABI/JSON field and start typing or try to paste something, you will notice immediately after you can't do any other actions. The expectation would be the user won't need to select the address only from the drop down options, the user should be able to paste any contract address.
There's a new prop in SingleUserPicker controlling whether the currently entered value should be set on blur (by default it's only set after clicking an item)
When you do actually select the target contract address from the drop down, the address appears in red, which could confuse the user into thinking there is an error.
https://user-images.githubusercontent.com/112586815/192036354-1c4cb1f7-440c-40ed-80be-d76b18102990.mov
Changes 🏗
- New props in
SingleUserPicker:renderEmptyandsetValueOnBlur - Tweaks in
ContractInteractionSection
Resolves #3865
As discussed on this PR. The work done here can be used in the future when the refactoring of the SingleUserPicker resumes.
Apply the changes in this PR to the core component itself so that every instance of the picker is not only consistent but has improved UX.
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
2 out of 3 committers have signed the CLA.
:white_check_mark: ArmandoGraterol
:white_check_mark: jakubcolony
:x: willm30
You have signed the CLA already but the status is still pending? Let us recheck it.