Light-client: I want to know how many transfers are pending

[christianbrb]

User Story

As Chris I want to know how many transfers are pending so that I know how many MetaMask pop-ups I need to sign.

Acceptance criteria

• Badge shows how many transfers are not completed (completed=false)
• Counter is reactive
• Counter is not clickable yet

• The counter is explained with a tool-tip

• Extra wish for Christmas ;) (if possible in a reasonable time and makes fun): If we close the transfer modal window it should become a circle, gets smaller and flies to the badge

Screen Proposal

Tasks

[taleldayekh]

A prettier version of what @christianbrb tried to illustrate above. 😜

[christianbrb]

@andrevmatos Does this needs any new implementation within the SDK?

[andrevmatos]

I don't think so, transfers$ already contains all the needed info.
But if this issue is about how many messages are left to be signed, this can be problematic, as it depends on a lot of factors. We can know how many messages are left on the happy case, but depending on who/what/where something goes wrong in the protocol, we may have different number of signature prompts before "completion" (success or error) of a transfer.
Again, with #172, no prompts are shown, so this may not be that relevant.

IMO this issue/counter/badge should be more about how many transfers are currently pending (not completed), and when clicking on the dropdown, one can see each pending on the top (with the completed history below), and an expando (default opened for pending) with a stepper for each, indicating on which step of the protocol a transfer is currently at, which both indicates the next message prompt that may show up, as well as when/why it got stuck (even for transfers completed with errors).
e.g.: if a past transfer has values completed=false, success=undefined, status='RECEIVED', it means the hub acknowledged the valid transfer being sent, but the target didn't (yet?) ask for the secret, and the lock is still valid.

Here's the list of possible transfer statuses, and they're in linear order from top to bottom, even though some of them are skipped on success or error cases:
https://github.com/raiden-network/light-client/blob/2b498386bce9f184054af04311dd2a9bc690ee41/raiden-ts/src/transfers/state.ts#L82-L127

• Success case: PENDING -> RECEIVED -> REVEALED -> UNLOCKING -> UNLOCKED (completed, succeeded)
• Example of error case (e.g. mediators take more fees than they can): PENDING -> RECEIVED -> (2*reveal blocks later) EXPIRING -> EXPIRED (completed, failed)

The time left available for a transfer to succeed before it expires can be calculated from current blockNumber and expirationBlock property (could be an useful ETA timer on the pending list).