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

Rewards Management Buttons​

  • Enable:

    • Label: "Enable Energy Rewards"
    • Description: "Starting collect weekly rewards"
    • Function: Activates rewards in the user's account
    • State: Shown when rewards are not yet enabled

    Enable Rewards

  • Claim:

    • Label: "Claim"
    • Function: Withdraws accumulated rewards
    • State: Shown when rewards are available for withdrawal

    Enable Rewards

  • Update:

    • Label: "Update"
    • Description: "Update your rewards to keep earning"
    • Function: Reactivates rewards in the user's account
    • State: Shown when rewards system needs updating

    Enable Rewards

Application Header Alerts​

Header Alert

The application header includes an alert notification system for rewards:

  • Rewards Alert Icon: Lightning bolt icon that indicates when attention is needed
  • Alert Message: "Rewards is outdated. To keep earning, click here to go to portfolio and update it."
  • Function: Clicking on the alert navigates directly to the Portfolio page where users can update their rewards
  • Purpose: Ensures users know when they need to take action to continue earning 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

Unlocked Tokens Section​

Unlocked Tokens

Header Elements​

  • Section Title: "Unlocked Tokens"
  • Action Button: "Claim Available" button to collect all unlocked tokens at once

Tokens Table​

  • Column Headers:

    • Locked Tokens: Original locked token information
      • Amount: Locked token quantity
      • Token: Locked token name and ID (e.g., "XKFI-2NL6")
    • Unlocked Tokens: Result of unlocking
      • Amount: Unlocked token quantity
      • Token: Resulting token name (e.g., "KFI")
    • Status: Current status of unlocked tokens (e.g., "Available")

  • Token Entries Examples:

    • Locked: 1 XKFI-2NL6 → Unlocked: 0.0179 KFI, Status: Available

Table Controls​

  • Rows per page selector (10)
  • Pagination controls

Functionality​

  • Unlocking Process: Tokens that were previously locked and have been processed for unlocking via the Energy screen
  • Claim Action: When claimed, unlocked tokens are transferred back to the user's wallet as standard tokens
  • Status Tracking: Visual indication of which tokens are ready for claiming

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