Create mock for the `Manage DAI in VAT` flow

valiafetisov commented 2 years ago

Goal

A mock for managing DAI in VAT

Context

Mock started in #96 proposed a possibility to manage DAI in VAT, therefore we want to outline how it may look like.

Assets

https://whimsical.com/makerdao-7jmkXyT32KBtY4nQ56WARx

Tasks

[x] Create new mock
[x] Discuss, iterate
[x] Finalize

valiafetisov commented 2 years ago

Initial idea:

Create a Wallet popup which opens up by clicking on the Manage DAI in VAT or the wallet address in the header (since disconnect is dysfunctional and should be removed)
Always prefill input with total value

Initial mock, but it misses explanations as well as authorisations

![MakerDAO@2x (18)](https://user-images.githubusercontent.com/3393626/156028695-8e290f74-d827-4987-91db-efbb68aa294d.png)

valiafetisov commented 2 years ago

Initial mock

![MakerDAO@2x (20)](https://user-images.githubusercontent.com/3393626/156142021-2f6dd75e-e988-4b9f-b184-f8d0218d5631.png)

@LukSteib what do you think? Would you write the text for the full popup? I think we may wait a little bit before finalizing the mock to see if it's actually enough to have one auth step here or if we need two (which I am starting to suspect 🙂)

LukSteib commented 2 years ago

opens up by clicking on the Manage DAI in VAT or the wallet address in the header

The latter might be confusing for a user that is not engaging in the Dai bidding but swapping flow and is then provided with the wallet popup. Right now I would vouch to only show on clicking Manage Dai in VAT

what do you think?

I like the general idea of having this wallet popup
Besides providing Refresh button to update balance indicators would we also provide automatic refreshs or only on user action? Would like to have an automatic refresh as well
What is the idea behind the moving funds logic regarding input fields and buttons? Enter amount to deposit on left hand side input field and execute by clicking button below (same for right hand side withdraw logic)?
- I'd prefer the other mock you created first where the user can select between deposit and withdrawal -> enter amount -> press button
- What was your reasoning to switch? :)

I think we may wait a little bit before finalizing the mock to see if it's actually enough to have one auth step here or if we need two

Fine for me. No matter how many auth steps there will be, do you propose to have the auth steps for VAT interaction both inside this wallet popup and on our basic page layout?

valiafetisov commented 2 years ago

Besides providing Refresh button to update balance indicators would we also provide automatic refreshs or only on user action? Would like to have an automatic refresh as well

Yes, of course. It's just that user looking on that popup may realize that there is not enough DAI in their wallet and move to another UI, eg uniswap to fix this problem. We then wouldn't know when to fetch it (otherwise we can refetch that periodically, but still I want to be transparent here, so the user wouldn't need to refresh the page)

I'd prefer the other mock you created first where the user can select between deposit and withdrawal -> enter amount -> press button. What was your reasoning to switch?

I wanted to present both options together, since I find switch confusing for the user:

they may even not figure out that the other option exists
we need to suggest "primary" action, I am not sure what would it be? deposit or withdrawal?

LukSteib commented 2 years ago

(otherwise we can refetch that periodically, but still I want to be transparent here, so the user wouldn't need to refresh the page)

Periodically refetching and refresh option for user for transparency sounds good

I wanted to present both options together, since I find switch confusing for the user

I see your point. We might find a way to make the distinction more obvious (straight forward proposal: Include some sort of divider line to the UI) -> Just want to prevent the user to thinking that both input fields are relevant at the same time

we need to suggest "primary" action, I am not sure what would it be? deposit or withdrawal?

Hard one. I have a tendency for deposit as the primary action assuming that the main flow will be to deposit dai -> bid with all deposited day -> deposit new dai when there is an attractive auction. We could also argue that we have the "shortcut" way via the main transaction page for the main flow described above and a user rather clicks on Manage Dai in VAT when trying to withdraw Dai.

valiafetisov commented 2 years ago

Periodically refetching and refresh option for user for transparency sounds good

Alright, maybe we should also add refresh button to the transaction panel Deposit block.

No matter how many auth steps there will be, do you propose to have the auth steps for VAT interaction both inside this wallet popup and on our basic page layout?

Yes, also popup should account for the state when the wallet is not connected (providing text + connect button instead of the table)

We could also argue that we have the "shortcut" way via the main transaction page for the main flow described above and a user rather clicks on Manage Dai in VAT when trying to withdraw Dai.

Yeah, I was also thinking about triggering this popup via url parameter (eg ?wallet=deposit) then it will be possible to also send it over via url.

Updated mock

![MakerDAO@2x (22)](https://user-images.githubusercontent.com/3393626/156178734-2e668225-d61d-4d1c-ac2c-19713cf3b4cf.png)

Do you want to provide the final copy in the same issue here?

LukSteib commented 2 years ago