Skip to main content

Energy List

Overview​

The Energy List page displays the user's current energy status, including their total energy, current charge percentage, and all energy positions (battery cells). Users can view, manage, and remove their energy positions from this interface.

Energy Image

Page Header​

  • Title: "Energy"

Energy Meter​

  • Visual: Semi-circular meter/gauge showing energy level
  • Total Energy: Central numeric display (e.g., "0.00")
  • Charge Percentage: Below the energy value (e.g., "Charge: 0.00%")

Battery Cells Section​

  • Section Title: "Battery Cells"
  • Add Button: Button to create new energy positions

Battery Cells Table​

A table listing all energy positions with the following columns:

  • #: Position index number
  • Current Charge: Percentage of charge for each position
  • Current Energy: Amount of energy provided by the position
  • Locked XKFI: Amount of XKFI tokens locked in the position
  • Source: Token identifier and value in USD

Table Features​

  • Sortable Columns: Headers can be clicked to sort the table
  • Action Menu: Three-dot menu for each row with options:
    • Remove: Option to remove/unbond the energy position
  • Pagination: Controls for navigating through multiple pages of positions
    • Rows per page selector (default: 10)
    • Previous/Next buttons
    • Page number indicator

Energy Position Details​

Each energy position (battery cell) shows:

  1. Position Number: Sequential identifier
  2. Charge Status: Current charge percentage with battery icon
  3. Energy Amount: Energy value provided by the position
  4. Locked Tokens: Amount of XKFI tokens locked
  5. Token Details: Source token identifier and USD value
  6. Management Options: Actions available for the position

Technical Implementation Notes​

Energy Calculation​

  • Total energy is calculated as the sum of all individual energy positions
  • Each position's energy is determined by the amount of XKFI locked and the lock duration

Position Management​

  • Removing a position initiates an unbonding process
  • Unbonding periods vary based on the original lock terms
  • During unbonding, positions may still appear in the list but with different status indicators

User Interface Considerations​

  • The energy meter provides visual feedback on total energy levels
  • Table layout adapts to different screen sizes
  • Mobile view may collapse certain columns or use alternative layouts for better usability
  • Row actions are accessible via a contextual menu to save space

Data Refreshing​

  • Energy values should update automatically at regular intervals
  • New positions should appear in the table immediately after creation
  • Position status changes (e.g., during unbonding) should be reflected in real-time

Performance Optimization​

  • Pagination implementation to handle large numbers of positions
  • Data caching to reduce API calls
  • Efficient rendering of the energy meter component