List of UI improvements and optimisations.

dchernokur commented 2 months ago

To improve the consistency of how we show the tokens and names, I suggest couple of places to change.

[ ] #75
[ ] #76
[x] Our selects across the app do not show selected value, would be nice to add this functionality.
[x] Add loading states on buttons for CA calls, considering MM popup is showing with small delay, this should indicate that we've started working and prevent from additional clicks for eager users.
[x] Sidebar menu is not highlighted anymore on the "start-operating" pages.

[x] User Area select token. We show only token name. Let's use this as our baseline.
[x] Admin Area select token. We show both token name and address, lets keep only the name.
[x] Manage identities. Rename "Select tokens to manage identities" -> "Select token to manage identities"
[x] Manage identities. Show selected token name and address below "Select token to manage identities" after selecting. Right now its not obvious if something is selected.
[x] Manage identities. We should switch to the table and show the main information about the identity - current setup with select is a bit limiting. Separating out the current form so the 3 parts would be more distinct. This would allow admins to see the list of identities and perform actions right away.

identity address | wallet address + input and button to change it | identity country + select and update button | remove identity

[x] Manage identities. Selecting "Select country" should not call the contract automatically, this is not obvious for user interaction. Let it select the country and make up

[x] User Area. Select vault asset. Switch to showing the underlying HTS token name in the select. Right now we show the proxy CA.
[x] User Area. Show asset name under the select, right now we show only HTS token CA.
[x] User Area. Disable select vault if there are no vaults available. Suggest to deploy new vault in admin area.
[x] Admin Area. Select Vault for operation. For consistency with suggested changes to selects across the app, lets show only share token name i the select. Show the CA address below the select.
[x] Admin Area. After selecting the vault, on "Update fee config" screen add "Cancel" button to return to the select vault step.
[x] Admin Area. Add helper text to all the inputs with explanations for each field - what is it and how its gonna be used.

maryjanyes commented 2 months ago

dchernokur commented 2 months ago

[ ] Fix render block with UI freezing when we select tokens in dropdown. Noticed in eip3643 / Admin Area, but potentially similar optimisation if needed everywhere. Use some loading states until the data arrives.

dchernokur commented 2 months ago

[x] When the select dropdown is too long - when I hover the values I cant scroll the page to the very bottom to see the last entries, it bounces up. We should consider switching to native ChakraUI dropdown is possible to avoid as much issues as possible.
[x] the order of tokens appearing in the lists is not consistent, even though it should read from the events consequentially. Noticed in eip3643 user area, but please check all the other places too.

dchernokur commented 2 months ago

dchernokur commented 2 months ago

[x] Looks like MenuSelect from ChakraUI we are using does not have "show current selected value" out of the box, we should consider switching to Select component, I think it fits more into our purpose and can help eliminate some of the visual issues from the list above. https://v2.chakra-ui.com/docs/components/select

dchernokur commented 2 months ago

[x] we should refresh the list of agents in "identity mgmt page" after adding/ewmoving new agent. This can be done by invalidating the respective queries by keys after success tx.

web3-nomad / accelerator-defi-EIP-ui