Streams balance in Userhub

[arrenv]

Teamwork task: Streams balance in Userhub

Specification

Story

• As a USER, I want to be able to easily see my currently owed streaming funds in the Userhub.
• As a USER, I want to be able to claim all owed streaming funds in the current colony from the Userhub.

Description

The purpose of the the Streams tab is to provide users with a quick and easy way to see and claim streaming funds they are owed in the current colony. This includes an update the Userhub, moving reputation from the bottom of the Balances tab to it's own dedicated tab and replacing it with a user's streaming balances and claim button.

Design

Figma link - Streaming balances

Acceptance Criteria

• General

  • Should be in alignment with desktop/tablet/mobile design from Designs.
  • Should use existing components and styles where possible for consistency.
  • Should use skeleton loaders.

• User’s Streams overview

  • Shows a user an overview of their streams, including total claimed all time and total available to claim.
  • “View streams” button
    • Should navigate to the Streaming page.
    • Should not be visible if there is no Streaming page, based on the logic of the streaming page.
  • Total claimed
    • Should be in the user’s nominated currency.
    • If there is no value, then there should be a fallback to the colony’s native token.
  • Available to claim
    • Should be in the user’s nominated currency.
    • Should show up to 5 decimal places.
    • Should animate with the value increasing every second based on the combined rate of all streams.
    • If there is no value, then there should be a fallback to the colony’s native token.
  • “Claim all streams” button (NOTE: This was originally discussed to be added at a later day, but it would be good if this could be reviewed again for feasibility as a grouped transaction in the meantime)
    • Active when there is at least one stream with claimable funds. Otherwise, it is in a disabled state, with a tooltip.
      • Tooltip copy: “No available funds to claim”.
    • Will trigger the collective claim of all streams that have funds available to claim in one transaction.
    • If a team funds are being claimed from does not have enough funds to cover the claim, then there should be a validation message that appears.
    • On claiming, the total claimed and available to claim values should be updated to reflect the new claim. i.e. the Total should increase, and the available to claim should reset, accounting for any unclaimable team funds, which could mean not fully resetting.

• Loading

  • Use skeleton loader for fields.

• Empty state

  • Empty state should be as of design.
    • With 0 values and CLNY as the token.
    • With the empty state for the list.

• Additional:

  • As a part of incorporating the steams info on the balances tab, it is also required to move the reputation details to their own dedicated tab as of the design here - https://www.figma.com/design/l1dOM5qiQYwF0ElvKDqqjg/Design-System---Colony-v3?node-id=5088-2435&t=Ie7EHVcRlc7sbHdr-4