chips-blockchain / pangea-poker

This is the reference GUI for Pangea Poker, blackchain based decentralised game.
https://chips.cash/
25 stars 17 forks source link

Design Cashier feature #82

Closed norbertdragan closed 4 years ago

norbertdragan commented 4 years ago

The cashier protocol has been implemented by @sg777. The frontend needs to catch up, however, there are still some clarifications that are needed.

See the Design Proposal.

norbertdragan commented 4 years ago

A few questions @sg777:

  1. What happens if the player doesn't have enough funds? What is the error message?
  2. How to know to which address the player needs to deposit the funds to? (step 3.2 in the cashier protocol documentation
  3. How can a player withdraw these funds later?
sg777 commented 4 years ago
  1. If the players don't have enough funds, in the backend I'm displaying the message can't afford to fund this transaction but this needs to be pushed on to the GUI to let the users know about it.
  2. Players can deposit funds to any new address or the existing address that belongs to the wallet of running backend chips node. As we go by, we can provide some efficient mechanism such that when the player connects to the backend, we can display some address on to the GUI along with the funds the player has.
  3. If the player wins the funds will automatically gets deposited to the players backend wallet, and to withdraw these funds from the backend wallet, player has to withdraw by creating a tx using chips-cli, to ease this process if you can provide some option in the GUI where the user can enter the chips address to which he wants to withdraw and just by clicking withdraw he can withdraw the amount to any desired address.[Though here we need to add some security check to prevent false withdrawls and I'll think of it later]
norbertdragan commented 4 years ago

Cool, thanks for clarification. I have edited the first comment with some new TODOs on how we can move forward.

norbertdragan commented 4 years ago

Cashier design proposal

I have created a couple diagrams to demonstrate my suggestion for the user flow and the flow of funds. I am looking for feedback on how this could be improved, whether it is technically feasible (@sg777) and if I have missed something (or any other feedback).

The Flow of the Funds

funds-flow

Deposit/Withdrawal User Flow

user-flow-funds-deposit-withdraw

Click to enlarge diagram

The above diagram shows my recommendation for the user flow. Please let me know if any of the steps need further clarification.

norbertdragan commented 4 years ago

Screens

They are showing a 9-max table, since the UI designs were originally designed to target that. The same principles will apply to the heads-up game as well.

1. Seat selection, after the player joined the table

Adds balance display, a button to get to the cashier, and a prompt to the player on what to do.

01-join-table

image

2. Set buy-in

The Buy-In component re-uses the pattern of the Controls component to reduce additional work. We also display to the other players that a new player is in the process of joining the table.

02-set-buy-in

image

3. Balance is too low

In case the balance is too low, we prompt the user to deposit. When they click on the Deposit Funds button, the cashier opens up with the Deposit tab active.

03-balance-is-too-low

image

4. Cashier - Deposit

The player can see the available balance, the address to deposit to, and some additional information to help them top up. We might also display the minimum and maximum buy-in for the table.

The player can also click on the address to copy it to the clipboard. We can think about implementing a QR code feature in future iterations.

04-deposit

image

5. Cashier - Withdraw

The player can withdraw funds to any specified address. A Max button helps to set the input field to all of the available Pangea wallet balance (which does not include any funds currently at the table).

@sg777 mentioned that developing this feature has some security implications that we need to work out, therefore it probably will be implemented at a later stage.

We will also need to think about states here, and possibly a second layer of confirmation ("Are you sure to withdraw X to Y?") to avoid accidental wrong withdrawals.

05-withdraw

image

6. Leave table

The player needs to have a method of leaving the table without closing the browser window. This feature and the screens are TBD (To Be Designed).

Please let me know what feedback you have regarding these screens. Is everything clear? What am I missing?

imylomylo commented 4 years ago

Remove “Deposit Funds” button. Seems redundant if the “Cashier” button were moved to the bottom permanently & it then remains in the line-of-sight of the user when setting buy in, because they may not have enough for calling or raising.

norbertdragan commented 4 years ago

@imylomylo you mean if the "Cashier" button were moved to the top right permanently? Yes, you might be right that displaying both buttons might be a bit redundant, but I think it also makes it easier for the player to take the right action, and it doesn't have any other negative implications I can think of.

imylomylo commented 4 years ago

Bottom right.

On Wed, Feb 5, 2020 at 8:41 AM Norbert Dragán notifications@github.com wrote:

@imylomylo https://github.com/imylomylo you mean if the "Cashier" button were moved to the top right permanently? Yes, you might be right that displaying both buttons might be a bit redundant, but I think it also makes it easier for the player to take the right action, and it doesn't have any other negative implications I can think of.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/chips-blockchain/pangea-poker/issues/82?email_source=notifications&email_token=AEUADPVQ7JC6GEPAAYARRJLRBIKOBA5CNFSM4KL3VQFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKZ3AYQ#issuecomment-582201442, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEUADPTBX6YMUG7ULTP5ZZLRBIKOBANCNFSM4KL3VQFA .

norbertdragan commented 4 years ago

We already have the Controls component at the bottom right (see screenshot below), therefore, keeping the Cashier button there all the time is not feasible.

Also, it's a totally legit scenario that a player wants to access the Cashier before they run out of chips, so we need to have it displayed somewhere in the UI at all times. But I wouldn't put it to the same level as the Controls, as it the Cashier is only needed rather infrequently.

Flop - Bet

imylomylo commented 4 years ago

OK cool. Yeah all times definitely. I thought maybe it could have been displayed at bottom right at all times, but seems not.

Thanks for taking time to consider :+1:

norbertdragan commented 4 years ago

Closing as the design has been completed.