[Enhancement] Create Stream start / Stop in Transaction Types in Transaction List

decentralauren commented 7 months ago

Business Description

In order to make on-chain transactions more approachable, we will have user-friendly transaction events in each GoodCollective page. These will make it easy for a lay person to see who has donated, when, and how much to the collective as well as who has benefitted / received money from the collective, when and how much.

Reference: See discussion in #167

Detailed Description of Functionality

User can see the relevant transaction items in any GoodCollective page.

Different types of transactions we display in GoodCollective:

One-Time Donation
Stream Started
Stream Ended (Includes Stream Cancelled)
Payout / Claim

Each of the above display the following values:

Icon of transaction type Description of transaction type

See design reference below for both of these

Sender or Recipient address or name

If we have the user's name (e.g. they are sending using their GW address), we display that
If we do not have the user's name, we display their address truncated, always displaying the first and last 4 digits

Transaction hash

Full transaction hash is shown.
For Streaming transactions (Stream Started & Stream Ended), clicking the hash will take the user to the Superfluid explorer for that transaction
For Non-Streaming transactions (One-Time donation, Payout / Claim), clicking the hash will take the user to the Celo Scan page for that transaction

Transaction amount

For Streaming transactions this should be the value of the transaction's stream in G$ / month (e.g. "G$ 100 / month")
For Non-Streaming transactions this should be the value of the transactions

Transaction Fee / Gas label

Says "Transaction Fee (Gas)" for all transactions that require gas.

Transaction Fee / Gas amount

Displays actual gas amount for all transactions that require gas.

When the transaction occurred

Displays when the transaction occurred, using the following logic:
"X Days Ago"

Technical Implementation

[ ] update or add theme.ts with the default design system defined
[ ] update TransactionListItem to align with new design
[ ] remove any desktop vs mobile structure
[ ] make sure any missing data is included, like
[ ] if new subgraph is deployed, update URL
[ ] if no new subgraph is deployed, refactor any calls to it and replace by explorer calls (any events like recent claims etc) or contract calls when we need eg. pool-data

Design Reference

See comments below for Figma designs from @sanajamm

Acceptance Criteria

Specify criteria that will be used to determine if the feature meets the requirements and functions correctly.

[ ] (Should include a list of testing points for QA how to verify design/functionality)

github-actions[bot] commented 5 months ago

Stale issue message

SanaJamm commented 4 months ago

@L03TJ3 @decentralauren

new transaction items design for GC

Screenshot:

Figma: https://www.figma.com/design/ihw1PxBvLxacTHnN2aj4lC/3.-Product?node-id=18287-79500&t=ctE9i3Rzu2RptOYF-1

sirpy commented 3 months ago

@decentralauren @SanaJamm A stream can also be updated. for example from 100G$/month to 50$/month

decentralauren commented 3 months ago

@sirpy we do not have a flow for that in the product now. The user would need to cancel their stream and start a new stream. Happy to add this as a future feature as it would improve usability, though prefer for now we focus on resolving existing issues with the superfluid donation flow.

sirpy commented 3 months ago

The user could possibly do it via the superfluid UI you direct to. but regardless we just need the ICON/design so we can include the update case.

decentralauren commented 3 months ago

@sirpy see the updated icon design in @SanaJamm's comment above.

sirpy commented 2 months ago

@decentralauren still dont see the update stream icon in the figma link

decentralauren commented 2 months ago

@sirpy right now the UI does not support updating a stream. The only thing that has been designed to somebody canceling a stream and then starting a new one. Therefore, there is not an update stream transaction type.

sirpy commented 2 months ago

@decentralauren As I wrote previously the user can possibly update the stream via the Superfluid UI app.superfluid.finance (which we also link to)

decentralauren commented 2 months ago

@sirpy as I wrote previously we don't have the flow (nor the UI design) for that now, and since the user can close a stream and start a new one the use case of "change my stream" is already covered :)

Are you requesting that we include "update stream" as a feature for release? If so then we'll need to prioritize design and product work for that in the coming 2 weeks.

sirpy commented 2 months ago

It doesnt matter that we don't have that flow, and i'm not asking to implement it. A stream can be updated via OTHER UIs. Since we link to the superfluid app from the transaction list (app.superfluid.finance), the user can go there and can update his stream there. In that case our app will list this "update" action as a "new" stream. Therefor i'm only asking for an icon for "update", so we can correctly show updated streams. Even if the stream wasn't updated through our UI.

decentralauren commented 2 months ago

@sirpy this is the first time you brought up that the streams could be updated from other interfaces, therefore we need to have the icon.

@SanaJamm can you please create one more icon for an updated stream? Please see the discussion above.

sirpy commented 2 months ago

@decentralauren i've actually mentioned superfluid app and ui in two more previous comments.

decentralauren commented 2 months ago

@sirpy I read your earlier comments as you telling me to reference the other UIs as an example of what we should build in the interface. So it seems we just had a communication breakdown. All clear.

decentralauren commented 1 month ago

@sirpy working on an updated transaction item type for "updated stream" - will let you know when ready.

GoodDollar / GoodCollective