feat: implement rewards calculator and merge payout history #2482
Conversation
- Create tabbed Rewards Calculator page - Move PayoutHistory to Rewards Calculator - Refactor components into Graph, Stats, PayoutList - Add history tab alongside rewards calculator - Update imports and file structure
- Removal of Payouts page - Creation of Rewards & Payouts - Add English & Spanish translation for updated menu item - Ting to review /cn/base.json & pages.json
- Resolve check license - Resolve validate-locales
…ud/polkadot-staking-dashboard into tabbed-rewards-calc
…ud/polkadot-staking-dashboard into tabbed-rewards-calc
|
Just making a note of next steps; to finalise the Stats that will be displayed at the top of the current Calculator page, both with Staking API enabled and disabled. We can leverage historical data with Staking API to get reward estimations based on historical performance. With the API disabled, we can derive stats based on chain state available on-chain at the current era. Note for Ross: Revise |
| return ( | ||
| <Wrapper> | ||
| <PageTitle | ||
| title={t('rewards.rewardsCalculator')} |
There was a problem hiding this comment.
Page title can just be Rewards
| title={t('rewards.rewardsCalculator')} | ||
| tabs={[ | ||
| { | ||
| title: t('rewards.calculator'), |
There was a problem hiding this comment.
This page can be Overview. The payout history graph currently present in "Payout History" tab can be displayed at this top of this page, with the new "Projected Rewards" module being displayed below it.
The Payout History tab can then just list historical payout records.
| step="0.01" | ||
| value={manualStake ?? ''} | ||
| onChange={(e) => | ||
| setManualStake(Number(e.target.value) || null) |
There was a problem hiding this comment.
We can currently enter values less than 0. We can default to 0 on non-number & enforce a minimum of 0:
| setManualStake(Number(e.target.value) || null) | |
| const value = Number(e.target.value) | |
| const newManualStake = isNaN(value) ? 0 : Math.max(0, value) | |
| setManualStake(newManualStake) |
| padding: '0.5rem', | ||
| marginTop: '0.5rem', | ||
| border: '1px solid var(--border-primary-color)', | ||
| borderRadius: '4px', |
There was a problem hiding this comment.
Let's use a rem value here so all styling is in proportion to the global font size.
| borderRadius: '4px', | |
| borderRadius: '0.5rem', |
| import { CardHeader, PageRow, StatRow } from 'ui-core/base' | ||
| import { RewardText, RewardsGrid } from '../Wrappers' | ||
|
|
||
| export const Active = () => { |
There was a problem hiding this comment.
Rename this component and its folder to Overview.
| export const Active = () => { | |
| export const Overview = () => { |
| import { ItemWrapper } from '../Wrappers' | ||
| import type { PayoutListProps } from '../types' | ||
|
|
||
| export const PayoutListInner = ({ |
There was a problem hiding this comment.
| export const PayoutListInner = ({ | |
| export const PayoutHistoryInner = ({ |
| ) | ||
| } | ||
|
|
||
| export const PayoutList = (props: PayoutListProps) => ( |
There was a problem hiding this comment.
| export const PayoutList = (props: PayoutListProps) => ( | |
| export const PayoutHistory = (props: PayoutHistoryProps) => ( |
| title, | ||
| payouts: initialPayouts, | ||
| itemsPerPage, | ||
| }: PayoutListProps) => { |
There was a problem hiding this comment.
| }: PayoutListProps) => { | |
| }: PayoutHistoryProps) => { |
| import { PayoutList } from './PayoutList' | ||
| import { LastEraPayout } from './Stats/LastEraPayout' | ||
|
|
||
| export const PayoutHistory = () => { |
There was a problem hiding this comment.
| export const PayoutHistory = () => { | |
| export const RecentPayouts = () => { |
Co-authored-by: Ross Bulat <[email protected]>
Co-authored-by: Ross Bulat <[email protected]>
Co-authored-by: Ross Bulat <[email protected]>
This PR implements a new Rewards Calculator feature and merges it with the Payout History into a single tabbed interface.
Key changes:
This enhances both reward projection capabilities and historical tracking in a unified interface.
Addresses #1821