Staking Panel
A staking position: stake, rewards, APY and unlock. APY is labelled variable unless told otherwise, because it almost always is — a bare percentage reads as a fixed-term rate.
src/components/ui/staking-panel.tsxAbout
From the component's own source, where it was written.
A staking position: what is staked, what it earns, when it unlocks.
APY is labelled as variable unless told otherwise, because it almost always is — it moves with total stake and emissions. A bare "12.4% APY" reads as a fixed-term rate, which it is not, and that misreading is the entire business model of some protocols.
The unbonding period is given as much weight as the yield. It is the part that actually constrains the user, and it is routinely buried.
Install
npx astralyx-ui add staking-panel
Usage
import { StakingPanel } from '@/components/ui/staking-panel'
<StakingPanel token="stETH" staked="12.4 ETH" rewards="0.284 ETH" apy={3.82} unbonding="21 days" />Composer
Change the props and the source below follows.
- Staked
- 12.4 ETH
- Rewards
- 0.284 ETH
Rate is variable — it moves with total stake and emissions.
<StakingPanel
token="stETH"
staked="12.4 ETH"
rewards="0.284 ETH"
apy={3.82}
apyFixed={false}
unbonding="21 days"
/>Examples
Position
<StakingPanel token="stETH" staked="12.4 ETH" apy={3.82} unbonding="21 days" />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
StakingPanel
A staking position: what is staked, what it earns, when it unlocks.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| token | ReactNode | required | — |
| staked | ReactNode | required | Formatted amounts — pair with TokenAmount for exactness. |
| rewards | ReactNode | — | Formatted amounts — pair with TokenAmount for exactness. |
| apy | number | — | Variable by default, with a note saying so. Only set apyFixed when the rate genuinely cannot move. |
| apyFixed | boolean | false | Variable by default, with a note saying so. Only set apyFixed when the rate genuinely cannot move. |
| unbonding | ReactNode | — | The unbonding period gets equal weight to the yield — it is the part that actually constrains the user. |
| unlockProgress | number | — | The unbonding period gets equal weight to the yield — it is the part that actually constrains the user. |
| unlockLabel | ReactNode | — | — |
| onStake | () => void | — | Actions are reported; the panel performs no transactions. |
| onUnstake | () => void | — | Actions are reported; the panel performs no transactions. |
| onClaim | () => void | — | Actions are reported; the panel performs no transactions. |
| claimDisabled | boolean | false | — |
| stakedLabel | ReactNode | 'Staked' | — |
| rewardsLabel | ReactNode | 'Rewards' | — |
| variableRateNote | ReactNode | 'Rate is variable — it moves with total stake and emissions.' | Shown unless apyFixed. Pass null to drop it. |
| unbondingLabel | ReactNode | 'Unbonding period' | — |
| stakeLabel | ReactNode | 'Stake' | — |
| unstakeLabel | ReactNode | 'Unstake' | — |
| claimLabel | ReactNode | 'Claim' | — |