Skip to main content

Stakings Token Add

Overview​

The Stake Token page allows users to stake specific tokens to earn APR/APY rewards. This interface guides users through the staking process, including selecting tokens and specifying deposit amounts.

Stakings Image

Page Header​

  • Navigation: Back to Stakes button
  • Title: "Stake" with token icon (e.g., "K" for KLV)

Deposit Section​

  • Section Title: "Deposit amounts"
  • Description: "The total amount you deposit in the pool influences the size of your pool share and the rewards you'll receive."

Deposit Controls​

  • Input Field: Enter the amount to stake
  • Token Information: Shows token name and current value in USD
  • Quick Percentage Buttons: 25%, 50%, 75%, MAX for easy amount selection

Unbonding Information​

  • Warning Notice: "The liquidity you withdraw from staking will be transferred back to your wallet after a 36h - 40h unbonding period. During this time, the position will not generate any rewards."

Action Button​

  • Stake Button: Initiates the staking process (disabled until valid amount is entered)

Technical Implementation Notes​

  1. Token Validation:

    • Real-time validation of input amounts against user's wallet balance
    • Minimum staking amount verification
    • Maximum staking amount limitations (if applicable)

  2. Responsive Design:

    • Adapts to screen sizes down to 375px
    • Input fields and buttons resize appropriately
    • Section layout adjusts for mobile screens

  3. State Management:

    • Tracks input amounts and validation states
    • Manages token selection options
    • Handles staking transaction status

  4. Transaction Flow:

    • Validates wallet connection
    • Prepares transaction data
    • Requests wallet signature
    • Monitors transaction confirmation
    • Updates UI with success/failure states