Treasury – Dashboard Page Balance History (Historical Graph & Transactions)

[ori-near]

Background

For V1, we introduced a basic Dashboard page as part of #16. This story is the continuation of that to better capture the rolling history of the wallet's balance – both in terms of each transaction & the history graph bar.

User Story

As a treasury user (community member or admin), I want to see a comprehensive overview of the DAO's treasury, including detailed balances for both the SputnikDAO and Lockup account (if available), along with an interactive graph and transaction details, so I can gain a complete understanding of the DAO's balances and funds over time.

Acceptance Criteria

Account Balances

General Presentation

• Display all account balances and their details within a left sidebar on the dashboard with separate sections (e.g. cards) for:
  • Total Balance: Display the total balance across all accounts and tokens in USD
  • SputnikDAO Account: Show the wallet address and balances for each token held in this account (e.g. NEAR, USDC, USDT)
  • Lockup Account: Show the wallet address and balances for the NEAR tokens held in this account
• Display all balances with both:
  • The number of tokens, along with the corresponding token symbol (e.g. 100 NEAR)
  • The USD equivalent of that token amount (e.g. $700 USD)
• Include an info button (e.g. tooltip) for each balance type. When a user hovers over the info button, they see a definition (see copy for info buttons sections below)
  • Note: Need to update this section
• Update the balances in real-time to reflect the latest account details and value of the tokens (or leverage refresh button for this)
• Line items with expandable arrows in the Figma (e.g. Staking) are collapsible. By default, these line items are collapsed. Users can click on the arrow again to collapse or expand the item, with the arrows visually indicating their current state.

SputnikDAO Account Details

• NEAR Tokens (Expandable section)
  • Available balance
  • Staking (Expandable section)
    • Staked
    • Pending Release
  • Reserved for storage
  • Available for withdrawl
  • For tokens other than NEAR, display:
    • Available balance
    • Available for withdrawl

Lockup Account Details

• NEAR tokens ONLY (Expandable section)
  • Available balance
  • Locked
  • Staking (Expandable section)
    • Staked
    • Pending Release
    • Available for withdrawl

Balance History Graph

• User sees the Balance History card on the right side of the Dashboard page which will display the historical USD value of the selected treasury assets over time.
• Above the graph, the user will see Treasury Assets along with the combined total USD value of the selected assets held in both the SputnikDAO and Lockup accounts.
• Users can filter the graph by timeframe (1H, 24H, 1W, 1M, 1Y, ALL) and token types (e.g. NEAR, USDC, USDT)
• For the graph itself, the y-axis shows the USD value for the selected asset, while the x-axis shows the timeframe.
• When the dashboard loads initially,
  • The default view is one month and default selected assets is NEAR or the first available token
  • The graph defaults to the current point in time
  • A visual indicator (e.g. dot) marks the current point in time, but the actual value is not display on the graph itself until the user interacts with it
• When a user hovers over the graph:
  • A tool tip displays X (Need to discuss this)
  • The "Treasury Assets" value at the top updates to reflect the hovered point's value
  • The date and time of the hovered point are displays below

Transaction History

• User sees the Transaction History card on the right side of the Dashboard page below the Balance History Graph. This card will display a detailed list of recent transactions, including:
  • Icon
  • Type (e.g. transfer, deposit, etc) & date and time (UTC)
  • Sender (From) with a link to the sender's account/address
  • Recipient (To) with a link to the recipient's account/address
  • Transaction Hash (clickable link to transaction details)
  • Amount (with token symbol)
• Transactions are displayed most recent first
• Show more button allows users to load additional transactions
• Search button allows users to search through transactions

Copy for info buttons

• Available balance: [Add definition]
• Staked: [Add definition]
• Pending release: [Add definition]
• Available for withdrawl: [Add definition]
• Locked: [Add definition]

Attachments

Figma

[ori-near]

@FREZZZBE Can you please update this ticket with the latest Dashboard design?

[ori-near]

@FREZZZBE Can you please update the latest design in this ticket? Please ping me once you do so, so I can add a more detailed list of AC.

[ori-near]

@rubycop – made quite a bit of updates to the AC based on the latest Figma. That said – I did come across a few questions/considerations. So would like to sidebar on those tomorrow at our standup with you and @FREZZZBE.

[ori-near]

@rubycop @Tguntenaar please create a dependency ticket for the REF Finance SDK issue that's blocking this ticket.
https://github.com/NEAR-DevHub/ref-sdk-api

[ori-near]

We will do search as part of #70