Skip to main content

Portfolio

Overview​

The Portfolio page provides users with a comprehensive view of their DeFi assets, positions, and rewards across the platform. It combines wallet balances, liquidity positions, staking positions, and available rewards in a single dashboard.

Portfolio Header​

Portfolio Image

Total Value Display​

  • Central Circular Graph: Visual representation of portfolio allocation
  • Total Value: Prominent display of total portfolio value (e.g., "$783,089,844.80")
  • Label: "Your Portfolio"

Asset Allocation Breakdown​

  • Tokens: Value of tokens held in wallet (e.g., "$783,088,537.19") - 100.00%
  • Pools: Value of liquidity pool positions (e.g., "$0.00") - 0.00%
  • Staking: Value of staked tokens (e.g., "$0.00") - 0.00%

Rewards Cards​

  • Base Rewards:

    • Title: "Base Rewards"
    • Amount: Available rewards (e.g., "$0.00")
    • Action: "Claim" button to collect rewards

  • Energy Rewards:

    • Title: "Energy Rewards"
    • Amount: Available energy rewards (e.g., "$0.00")
    • Breakdown:
      • Fees: Rewards from fees (e.g., "$0.00") - 0.00%
      • Boosted: Boosted rewards (e.g., "$0.00") - 0.00%
    • Action: "Claim" button to collect rewards

Wallet Section​

Portfolio Image

Filter Tabs​

  • All: View all tokens
  • Token: View only standard tokens
  • Locked: View only locked tokens

Wallet Table​

  • Column Headers:

    • Token: Token name, symbol, and icon
    • Balance: Amount held and USD value
    • Type: Token category (Token or Locked)

  • Token Entries Examples:

    • RoyaltiesToken (ROY-80M2): 66.478 ($783,080,531.29) - Token
    • Frangao (FRG-B15F): 0 ($4,424.73) - Token
    • ninja (NINJA-3A4K): 286,468.583 ($3,110.99) - Token
    • KLEVER (KLV): 138,320.54 ($380.14) - Token
    • KLEVER FINANCE (KFI): 1.98 ($90.04) - Token
    • xKFI (XKFI-2NL6/1): 0.004 ($0.00) - Locked
    • xKFI (XKFI-2NL6/2): 12.236 ($0.00) - Locked
    • xKFI (XKFI-2NL6/3): 1 ($0.00) - Locked

Table Controls​

  • Rows per page selector (10)
  • Pagination controls

Liquidity Pool Positions​

Liquidity Pool Positions

Filter Tabs​

  • All: View all liquidity positions
  • Pool: Filter by specific pools

Action Dropdown​

  • Create position dropdown with options:
    • Add liquidity: Navigate to add liquidity page

Positions Table​

  • Column Headers:

    • Tokens: Position token pair and icons
    • Value: Current position value in USD
    • Unclaimed Rewards: Pending rewards
    • Current APR: Annual percentage rate
    • Actions: Position-specific action buttons

  • Position Entries Examples:

    • KFI-KLV: $210.76, $0 unclaimed, 0.00% APR
    • NINJA-KLV: $1,096.84, $0 unclaimed, 0.00% APR

Position Actions​

  • Add Liquidity: Button to add more to the position
  • Context Menu: Three-dot menu with additional options:
    • Close position: Remove liquidity from the pool

Table Controls​

  • Rows per page selector (10)
  • Pagination controls

Staking Positions​

Staking Positions

Filter Tabs​

  • All: View all staking positions
  • Staking: Filter by specific staking tokens

Action Dropdown​

  • Create position dropdown with options:
    • Stake: Navigate to staking page

Staking Table​

  • Column Headers:

    • Tokens: Staked token and icon
    • Value: Current position value in USD
    • Unclaimed Rewards: Pending rewards
    • Current APR: Annual percentage rate
    • Actions: Position-specific action buttons

Staking Actions​

  • Unfreeze: Button to unfreeze staked tokens
  • Withdraw: Button to withdraw unfrozen tokens
  • Note: Claim functionality will be implemented soon

Table Controls​

  • Rows per page selector (10)
  • Pagination controls

Energy Rewards Section​

Energy Rewards

Filter Tabs​

  • All: View all energy rewards
  • Boosted: View only boosted rewards
  • Fees: View only fee rewards

Empty State​

When no rewards are available:

  • Icon: Energy lightning bolt icon
  • Title: "No energy rewards"
  • Message: "You don't have any energy rewards yet. Start staking tokens to earn rewards!"

Technical Implementation Notes​

Data Integration​

  • Wallet balances fetched from connected wallet
  • Position data retrieved from platform's API
  • Real-time price data for accurate valuation
  • Rewards calculation based on user's positions and activities