Light-client: I want get more feedback when opening a channel, etc.

[christianbrb]

User Story

As Chris I want get more feedback when opening a channel, etc. so that I can trust the system and don't get confused or bored.

Derived from https://github.com/raiden-network/light-client/issues/1773#issuecomment-648674946

Acceptance criteria

Remarks

With the experience on mainnet (#1426) and the latest bugs, I think this is a critical point in the user experience. We have tried to implement something in a linear and synchronous fashion which is asynchronous and takes a lot of time to complete. This leads to long waiting times and confusion.

Some ideas:

• Using the snack bar and notification panel
• Using the approach we have taken for the transfers (which would be synchronous as well)
• Showing the number of blocks to show, that the dApp is still reacting

[christianbrb]

Discussed with @kelsos and we think it is valuable to go with the snackbar and notification panel approach (see WebUI).

[christianbrb]

@taleldayekh This includes all blockchain transactions like

• Open Channel
• Mint and Deposit
• Deposit
• Withdraw
• Close Channel
• Settle Channel
• Withdraw tokens
• Transfer ETH

Can you create separate issues, that we can prioritize? Please also prioritize the design. Maybe just start with the first 4 dialogues.

[christianbrb]

Looked at the issue with @taleldayekh

MetaMask shows if a transaction is pending or has been completed.

What problems do we have?

• The user does not know how many blocks they need to wait until the action is finished?
• The user does not know how many blocks he needs to wait after the transaction has been confirmed on the blockchain.

Potential solution:

• Show the status of the transaction in the notification panel with the number of blocks ("Waiting for blockchain transaction to be completed)
  
  
  
  • Show snackbar
  
  
  • Push to the notification area
  
  

Question:

• Is it technically feasible to show the number of blocks in the notification area?

[christianbrb]

@sashseurat to support with the design

Next step: Meeting with @taleldayekh

[sashseurat]

@christianbrb Click dummy ready for review:
https://www.figma.com/proto/mlx2gtgx2BHvdnsdGdwtdQ/LC-Logger?node-id=193%3A0&viewport=235%2C316%2C0.8725243806838989&scaling=min-zoom

Please review the following:

• Snackbar or Toast message at the bottom of the screen triggered by clicking "transfer" : this message is a small notification letting the user know there is an action in progress. This component can be animated, with a simple block icon turning to illustrate progress, with the block being filled once a block has been created. Here is another file to illustrate the idea of the animation:
  https://www.figma.com/proto/cXL4W7HdNvMUtcT0RJvVNd/LC-Animated-Toast?node-id=199%3A246&viewport=510%2C604%2C0.2820788621902466&scaling=min-zoom

The component is clickable and opens the notifications panel to show user where this progress can be viewed.

• The notifications panel:
  This component has a dedicated space for the visualization and showcasing of the details of an in-progress notification.

Let me know if you'd like to discuss these!
Looking forward to your input.

[christianbrb]

@sashseurat Thanks for your design

1. We should take the clickable snackbar message, but there is no animation needed within this snackbar
2. The progress bar for the notification within the notification panel looks nice:
   

@taleldayekh Could you split this issue into separate ones? (see https://github.com/raiden-network/light-client/issues/1798#issuecomment-652457231)

[taleldayekh]

Let's briefly discuss this after the daily today @christianbrb

[kelsos]

That design looks really nice :+1:

[christianbrb]

Individual issues have been created. Closing.