ui: Order submit button state management

[peterzen]

This PR modifies the behavior of the order submit button so that it prevents the user from submitting the order if it would fail due to the below conditions:

• quantity is 0
• buy or sell quantity is more than available balance

Closes #2527

[JoeGruffins]

Will also say insufficient balance if lots are set to zero but have balance.

[peterzen]

Will also say insufficient balance if lots are set to zero but have balance.

Thanks for catching that, it's fixed.

[martonp]

For other reasons why a user would not be able to trade, such as the bond pending or one of the wallets not yet being created, we are removing the order form completely. See resolveOrderFormVisibility in markets.ts. Instead of the order form, there is a large message displayed saying why the user cannot trade.

Personally, I don't think the order form should be shown if the user has no balance in either of the assets. Why should they be entering a rate and # of lots if they cannot trade anyways? Also, if only one of the assets has a balance, then you can just grey out the Buy/Sell button on top that switches to the other side of the market.

Thoughts? @buck54321 @JoeGruffins ?

[martonp]

For markets involving ETH/Tokens, if there is no ETH balance in the wallet, then the user will not be able to trade at all, even if they are buying ETH or the ETH token. The user needs ETH to redeem.

[peterzen]

Personally, I don't think the order form should be shown if the user has no balance in either of the assets. Why should they be entering a rate and # of lots if they cannot trade anyways? Also, if only one of the assets has a balance, then you can just grey out the Buy/Sell button on top that switches to the other side of the market.

A new user will most likely want to click around to discover the UI/UX before depositing funds - if they can't find the order form anywhere that's unusual/confusing and will likely to generate support questions.

What problem would the hidden form solve?

[martonp]

Never mind, you're right, it's better like this. I do notice a few issues though:

1. When I hover over the button, I see a question mark then the tooltip only shows up a few seconds later. Maybe the error message should be the text of the button?
2. When I switch markets, the button is not updated.
3. When I deposit funds, and the insufficient balance error is no longer true, the button should update.

Screen.Recording.2023-10-01.at.10.22.45.PM.mov

[peterzen]

Never mind, you're right, it's better like this. I do notice a few issues though:

1. When I hover over the button, I see a question mark then the tooltip only shows up a few seconds later. Maybe the error message should be the text of the button?

Fixed the cursor to not-allowed, the tooltip behaves correcly now.

2. When I switch markets, the button is not updated.

Solved - when switching markets the button changes to a disabled state as the form values are cleared.

3. When I deposit funds, and the insufficient balance error is no longer true, the button should update.

The button state updates correctly now, also refactored the update logic to make the changes more readable.

[martonp]

Screen.Recording.2023-10-06.at.12.20.48.AM.mov

Screen.Recording.2023-10-06.at.12.47.51.AM.mov

For me the tooltip still looks the same. Also, I noticed that the market order section is broken. For market buys, the button is always disabled, even if the balance is enough. The market sells button also has some strange behavior you can see in the videos.

[peterzen]

For me the tooltip still looks the same. Also, I noticed that the market order section is broken. For market buys, the button is always disabled, even if the balance is enough. The market sells button also has some strange behavior you can see in the videos.

Thanks for testing this, the bug causing those issues is fixed. I've also added a test for the rate field being non-zero, and sorted the problem of the UI not always being updated when a new balanceNote came in.

[martonp]

The logic looks good now. How do you feel about this clean up though? 0487795

Also, the hover over the button still has the same behavior for me. I see that error icon for a bit before the tooltip shows up. How do you feel about just updating the button text?

[peterzen]

The logic looks good now. How do you feel about this clean up though? 0487795

Thanks for that, added.

Also, the hover over the button still has the same behavior for me. I see that error icon for a bit before the tooltip shows up. How do you feel about just updating the button text?

Would it be clearer if the cursor stayed the default, instead of changing to the error icon on hover?

The button might break the layout if we changed the text, translated strings might be longer than the English default and even that is at the limits.

[martonp]

Would it be clearer if the cursor stayed the default, instead of changing to the error icon on hover?

Yeah I think the error icon is kind of confusing. I've never really seen that before.
I guess no need for the button text updating. It's clear enough.

[martonp]

I think a better UI would be to actually just allow the button, but when you click it, it does a form validation with error message(s) below the invalid fields.

[buck54321]

Is this right?

button-viz.mp4

[buck54321]

Hmm. Why?

[peterzen]

This way the max order panel and the order button update when the balance does.

[peterzen]

Is this right?
button-viz.mp4

Could you please repost the vid, it won't render:

[buck54321]

Hmm. Well basically, for a limit buy order, the button state was not reactive to changes in the lots field.

[peterzen]

Hmm. Well basically, for a limit buy order, the button state was not reactive to changes in the lots field.

Was there anything logged in the console? Was the button tooltip referring to no balance or empty order quantity?
I can't reproduce the problem.

[peterzen]

This commit is somewhat unrelated but feels like it belongs here