webdevpuneet.com

Related Snippets

147 in Cards category
54–59 of 60

Staking Rewards Card

Crypto Price Ticker Card

AI Safety Refusal Card

AI Persona Selector

AI Diff Review Card

Vanilla-Tilt 3D Card Grid

Staking Rewards Card — Free Live-Accruing Crypto Rewards UI

Staking Rewards Card · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsCSS Grid

Copy & paste

Source Code

<div class="srw-card">
  <div class="srw-head">
    <div class="srw-asset">
      <span class="srw-icon">◎</span>
      <div>
        <span class="srw-title">Staked SOL</span>
        <span class="srw-sub">Validator: Northwind Pool</span>
      </div>
    </div>
    <span class="srw-apy">6.8% APY</span>
  </div>

  <div class="srw-staked">
    <span class="srw-label">Staked amount</span>
    <span class="srw-amount">128.40 SOL</span>
  </div>

  <div class="srw-rewards">
    <span class="srw-label">Rewards accrued</span>
    <span class="srw-rewards-amount" id="srwRewards">0.000000</span>
    <span class="srw-rewards-unit">SOL</span>
  </div>

  <div class="srw-bar" aria-hidden="true"><div class="srw-bar-fill" id="srwBarFill"></div></div>
  <p class="srw-next">Next payout in <b id="srwCountdown">05:00</b></p>

  <button type="button" class="srw-claim" id="srwClaimBtn">Claim rewards</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

APY-derived accrual
The ticking rate is computed from real staked amount and APY, not an arbitrary animation.
Six-decimal precision
Small per-second increments stay visible instead of rounding to zero.
Synced progress + countdown
One counter drives both the payout bar and the mm:ss countdown text.
Guarded claim flow
The button disables on click so a double-click cannot double-claim.
Success confirmation
Shows the exact claimed amount before resetting for the next cycle.
Gradient validator branding
An icon and accent gradient suggest a specific staking pool or validator.
Tabular numerals throughout
Staked amount, rewards, and countdown all use monospaced digit widths.
Framework-portable state
All logic runs off plain counters — trivial to move into React/Vue state.

About this UI Snippet

Staking Rewards Card — Real-Time Accrual, Payout Countdown & Claim Flow

Screenshot of the Staking Rewards Card snippet rendered live

Staking interfaces live or die on one feeling: rewards should look alive, ticking upward in real time rather than sitting static until a page refresh. This snippet builds that staking rewards card — staked amount, APY, a rewards counter that increments every second, a payout-cycle progress bar, a countdown, and a claim button with a genuine success transition — using nothing but setInterval and careful number formatting.

Deriving a per-second rate from APY

Rather than animating an arbitrary number, the accrual is grounded in real inputs: perSecondRate = (stakedAmount * apy) / secondsPerYear. This is the actual per-second yield implied by the displayed APY, so the ticking number represents something real rather than a cosmetic animation — swap in your protocol's actual reward-rate calculation and the rest of the card keeps working unchanged.

Six decimal places, not two

Crypto reward amounts are tiny per second — a two-decimal display would show 0.00 forever. The rewards counter is formatted with toFixed(6), so the increments are visible tick to tick even though the underlying accrual is a fraction of a cent per second. This is the detail that makes the card feel "live" rather than frozen.

A payout cycle, visualized

A progress bar fills over a fixed PAYOUT_PERIOD_SEC window (5 minutes here, representing a compressed simulation of a real payout epoch), paired with a countdown formatted as mm:ss. Both derive from the same secondsIntoPeriod counter, so the bar and the countdown text can never drift out of sync with each other.

Claim: disable, confirm, then reset

Clicking "Claim rewards" freezes further accrual (claimed = true), disables the button so a double-click can't claim twice, and swaps the label to a checkmark confirmation showing the exact claimed amount. After a short delay it resets the counter to zero and re-enables claiming — modeling the real on-chain sequence of a claim transaction settling before the balance can accrue again.

Building a real integration

Replace the simulated accrual with a periodic read of your staking contract or API's actual accrued-rewards value, and wire the claim button to submit a real claim transaction — show the success state only after the transaction confirms, and surface a pending/error state for the in-between. Pair this card with a wallet card for balance context or a crypto price ticker card to convert rewards to a fiat value.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA staking card renders with a staked balance and 0.000000 accrued rewards.
  2. 2
    Watch rewards tick upEvery second, the rewards counter increments based on the derived per-second APY rate.
  3. 3
    Watch the payout cycleThe progress bar fills and the countdown ticks down over a 5-minute simulated payout period.
  4. 4
    Click "Claim rewards"The button disables, shows a checkmark success state with the claimed amount, then resets after a short delay.
  5. 5
    Adjust the inputsChange STAKED_AMOUNT and APY to reflect a real position.
  6. 6
    Wire a real claimReplace the setTimeout reset with an actual claim transaction call, showing pending/error states as needed.

Real-world uses

Common Use Cases

Staking dashboards
Show rewards ticking up live beside a wallet card, with the rate computed from the real staked amount and APY.
DeFi yield products
Display accruing yield for a vault or pool, with six-decimal precision so tiny per-second increments stay visible instead of rounding away.
Pool and validator comparison
Compare APY and accrual across options, with one counter driving both the payout progress bar and the countdown to the next payout.
Portfolio overviews
Convert accrued rewards to a fiat figure with a currency converter, keeping the crypto and fiat values side by side.
Wallet-gated claiming
Gate the claim action behind a wallet connect button, with the button disabled on click so a double click cannot claim twice.

Got questions?

Frequently Asked Questions

perSecondRate = (stakedAmount * apy) / secondsPerYear. This derives the actual per-second yield implied by the displayed APY from the staked amount, so the ticking counter represents a real number rather than an arbitrary animated increment. Replace stakedAmount and apy with real position data and the same formula produces a correct rate.

Per-second crypto accrual is extremely small — with typical APYs, two decimal places would show 0.00 indefinitely and the card would look frozen. Formatting with toFixed(6) keeps the increments visible tick to tick, which is what makes the card read as "live" rather than static.

The button is disabled immediately inside the click handler, before the success state or reset timeout runs, so a second click while the confirmation is showing has no effect. This models the real-world guard against double-submitting a claim transaction while the first one is still settling.

Replace the setInterval accrual with a periodic read of your contract's or API's actual accrued-rewards value (poll it, or subscribe to relevant events). In the claim handler, submit the real claim transaction and only show the success state once it confirms on-chain — add a pending spinner state for the interval in between, and an error state if the transaction fails or is rejected.

Hold accrued, secondsIntoPeriod, and claimed in component state, update accrued on a setInterval-equivalent effect using the same per-second rate formula, and derive the progress bar width and countdown text from secondsIntoPeriod in render. The claim handler becomes an async action that awaits your real claim call before setting claimed back to false.