Skip to main content

Stakings List

Overview​

The Staking module allows users to stake their tokens to earn rewards. This page displays all available staking options that are registered on the blockchain, showing their respective details.

Stakings List

Hero Section​

  • Subtitle: "Staking"
  • Title: "Stake and earn rewards."
  • Visual: An illustration featuring a cat mascot holding a Bitcoin coin, reinforcing the playful yet informative theme of staking

Staking Tokens List​

The primary feature of this page is a table that lists all staking tokens available on the blockchain along with key details:

Table Header​

  • Tokens: Shows total number of available tokens (e.g., "Tokens (1)")
  • Search: Search input field to filter tokens by name or symbol

Table Columns​

  • Name: Token name with icon
  • Price: Current token price
  • Total Value Staked: Total value of tokens currently staked
  • APR: Annual Percentage Rate (range if variable)
  • APY: Annual Percentage Yield (range if variable)

Table Rows​

Each row contains information about a specific staking option:

  • Token Information: Icon and name (e.g., "Chicken")
  • Current Price: Token price value (e.g., "0.000000")
  • Total Staked: Total value staked (e.g., "$0.00")
  • APR Range: Expected annual rate (e.g., "6% - 14%")
  • APY Range: Expected annual yield (e.g., "6% - 14%")

Table Controls​

  • Rows per page: Dropdown to select number of rows displayed (default: 10)
  • Pagination: Previous/Next buttons and page number indicators

User Interactions​

  • Navigate to a token's detailed staking page by selecting its row
  • Filter tokens in real-time using the search functionality
  • Sort table data by selecting column headers
  • Navigate through multiple pages using pagination controls

Technical Implementation Notes​

Blockchain Integration

  • All staking tokens are fetched directly from the blockchain
  • Only tokens that have staking enabled on the blockchain are displayed
  • Real-time data updates reflect current blockchain state

Responsive Design

  • Supports various screen sizes (minimum width: 375px)
  • Cell content adapts to available space

Performance Optimization

  • Search implements debounced input to prevent excessive blockchain queries
  • Efficient data loading and pagination

Data Visualization

  • Displays APR and APY ranges for variable reward tiers
  • Clear presentation of numerical data
  • Top Navigation
    • Trade
    • Earn (dropdown)
    • List token (dropdown)
    • Help (dropdown)
  • Quick Access
    • Energy
    • Portfolio
    • Connected wallet with address display