feat: implement rewards calculator and merge payout history

packages/app/src/config/pages.ts

@@ -5,8 +5,8 @@ import type { PageCategoryItems, PagesConfigItems } from 'common-types'
 import { Community } from 'pages/Community'
 import { Nominate } from 'pages/Nominate'
 import { Overview } from 'pages/Overview'
-import { Payouts } from 'pages/Payouts'
 import { Pools } from 'pages/Pools'
+import { Rewards } from 'pages/Rewards'
 import { Validators } from 'pages/Validators'
 
 const BASE_URL = import.meta.env.BASE_URL
@@ -52,10 +52,10 @@ export const PagesConfig: PagesConfigItems = [
   },
   {
     category: 2,
-    key: 'payouts',
-    uri: `${BASE_URL}payouts`,
-    hash: '/payouts',
-    Entry: Payouts,
+    key: 'rewards_payouts',
+    uri: `${BASE_URL}rewards`,
+    hash: '/rewards',
+    Entry: Rewards,
     lottie: 'analytics',
   },
   {

packages/app/src/pages/Rewards/Active/index.tsx

@@ -0,0 +1,220 @@
+// Copyright 2025 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { planckToUnit } from '@w3ux/utils'
+import { useActiveAccounts } from 'contexts/ActiveAccounts'
+import { useBalances } from 'contexts/Balances'
+import { useNetwork } from 'contexts/Network'
+import { useActivePool } from 'contexts/Pools/ActivePool'
+import { useTokenPrices } from 'contexts/TokenPrice'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useAverageRewardRate } from 'hooks/useAverageRewardRate'
+import { CardWrapper } from 'library/Card/Wrappers'
+import { Text } from 'library/StatCards/Text'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ButtonPrimary } from 'ui-buttons'
+import { CardHeader, PageRow, StatRow } from 'ui-core/base'
+import { RewardText, RewardsGrid } from '../Wrappers'
+
+export const Active = () => {
+  const { t } = useTranslation('pages')
+  const { inPool } = useActivePool()
+  const { networkData } = useNetwork()
+  const { price: dotPrice } = useTokenPrices()
+  const { activeAccount } = useActiveAccounts()
+  const { getLedger, getPoolMembership } = useBalances()
+  const { getAverageRewardRate } = useAverageRewardRate()
+  const [manualStake, setManualStake] = useState<number | null>(null)
+  const [isCustomStake, setIsCustomStake] = useState(false)
+
+  const getCurrentStake = () => {
+    if (!activeAccount) {
+      return '0'
+    }
+
+    let rawAmount = '0'
+    if (inPool()) {
+      const membership = getPoolMembership(activeAccount)
+      rawAmount = membership?.points ?? '0'
+    } else {
+      rawAmount = getLedger({ stash: activeAccount }).active.toString() ?? '0'
+    }
+    return planckToUnit(rawAmount, networkData.units)
+  }
+
+  const { avgRateBeforeCommission } = getAverageRewardRate(false)
+  const rewardRate = avgRateBeforeCommission.toNumber()
+
+  const currentStake =
+    isCustomStake && manualStake !== null
+      ? manualStake
+      : Number(getCurrentStake())
+  const annualReward = currentStake * (rewardRate / 100) || 0
+  const monthlyReward = annualReward / 12 || 0
+  const dailyReward = annualReward / 365 || 0
+
+  const handleToggleStake = () => {
+    if (isCustomStake) {
+      setManualStake(null)
+    }
+    setIsCustomStake(!isCustomStake)
+  }
+
+  return (
+    <>
+      <StatRow>
+        <RewardText>
+          <Text
+            label={t('rewards.averageRewardRate')}
+            value={`${rewardRate.toFixed(2)}%`}
+            helpKey="Average Reward Rate"
+          />
+        </RewardText>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '1rem',
+          }}
+        >
+          <Text
+            label={
+              isCustomStake
+                ? t('rewards.customBalance')
+                : t('rewards.currentStakedBalance')
+            }
+            value={`${currentStake.toLocaleString('en-US', {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })} ${networkData.api.unit}`}
+            helpKey={isCustomStake ? 'Custom Balance' : 'Your Balance'}
+          />
+          <ButtonPrimary
+            text={
+              isCustomStake
+                ? t('rewards.useConnectedWallet')
+                : t('rewards.useCustomAmount')
+            }
+            onClick={handleToggleStake}
+            style={{ minWidth: 'fit-content', whiteSpace: 'nowrap' }}
+          />
+        </div>
+      </StatRow>
+
+      <AnimatePresence>
+        {isCustomStake && (
+          <PageRow>
+            <motion.div
+              initial={{ opacity: 0, height: 0, marginTop: 0 }}
+              animate={{ opacity: 1, height: 'auto', marginTop: '1rem' }}
+              exit={{ opacity: 0, height: 0, marginTop: 0 }}
+              transition={{
+                duration: 0.3,
+                ease: 'easeInOut',
+              }}
+              style={{ overflow: 'hidden' }}
+            >
+              <CardWrapper>
+                <CardHeader>
+                  <h4>{t('rewards.adjustStake')}</h4>
+                </CardHeader>
+
+                <div style={{ padding: '1rem' }}>
+                  <label htmlFor="manual-stake">
+                    {t('rewards.enterStakeAmount')} ({networkData.api.unit}):
+                  </label>
+                  <input
+                    id="manual-stake"
+                    type="number"
+                    step="0.01"
+                    value={manualStake ?? ''}
+                    onChange={(e) =>
+                      setManualStake(Number(e.target.value) || null)
+                    }
+                    placeholder={t('rewards.stakePlaceholder')}
+                    style={{
+                      width: '100%',
+                      padding: '0.5rem',
+                      marginTop: '0.5rem',
+                      border: '1px solid var(--border-primary-color)',
+                      borderRadius: '4px',
+                    }}
+                  />
+                </div>
+              </CardWrapper>
+            </motion.div>
+          </PageRow>
+        )}
+      </AnimatePresence>
+
+      <PageRow>
+        <CardWrapper>
+          <CardHeader>
+            <h4>{t('rewards.projectedRewards')}</h4>
+          </CardHeader>
+
+          <RewardsGrid>
+            <div className="header">
+              <span>{t('rewards.period')}</span>
+              <span>{networkData.api.unit}</span>
+              <span>USDT</span>
+            </div>
+
+            <div className="reward-row">
+              <span>{t('rewards.daily')}</span>
+              <span>
+                {dailyReward.toLocaleString('en-US', {
+                  minimumFractionDigits: 3,
+                  maximumFractionDigits: 3,
+                })}
+              </span>
+              <span>
+                $
+                {(dailyReward * dotPrice).toLocaleString('en-US', {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+              </span>
+            </div>
+
+            <div className="reward-row">
+              <span>{t('rewards.monthly')}</span>
+              <span>
+                {monthlyReward.toLocaleString('en-US', {
+                  minimumFractionDigits: 3,
+                  maximumFractionDigits: 3,
+                })}
+              </span>
+              <span>
+                $
+                {(monthlyReward * dotPrice).toLocaleString('en-US', {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+              </span>
+            </div>
+
+            <div className="reward-row">
+              <span>{t('rewards.annual')}</span>
+              <span>
+                {annualReward.toLocaleString('en-US', {
+                  minimumFractionDigits: 3,
+                  maximumFractionDigits: 3,
+                })}
+              </span>
+              <span>
+                $
+                {(annualReward * dotPrice).toLocaleString('en-US', {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+              </span>
+            </div>
+          </RewardsGrid>
+        </CardWrapper>
+      </PageRow>
+    </>
+  )
+}

packages/app/src/pages/Rewards/Graph/ActiveGraph.tsx

@@ -0,0 +1,83 @@
+// Copyright 2025 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { AnyApi } from 'common-types'
+import { MaxPayoutDays } from 'consts'
+import { useActiveAccounts } from 'contexts/ActiveAccounts'
+import { useApi } from 'contexts/Api'
+import { useNetwork } from 'contexts/Network'
+import { getUnixTime } from 'date-fns'
+import { AveragePayoutLine } from 'library/Graphs/AveragePayoutLine'
+import { PayoutBar } from 'library/Graphs/PayoutBar'
+import { removeNonZeroAmountAndSort } from 'library/Graphs/Utils'
+import { usePoolRewards, useRewards } from 'plugin-staking-api'
+import type { NominatorReward, RewardResults } from 'plugin-staking-api/types'
+import { useEffect } from 'react'
+
+interface Props {
+  nominating: boolean
+  inPool: boolean
+  setPayoutLists: (payouts: AnyApi[]) => void
+}
+
+export const ActiveGraph = ({ nominating, inPool, setPayoutLists }: Props) => {
+  const { activeEra } = useApi()
+  const { network } = useNetwork()
+  const { activeAccount } = useActiveAccounts()
+
+  const { data: nominatorRewardsData, loading: rewardsLoading } = useRewards({
+    chain: network,
+    who: activeAccount || '',
+    fromEra: Math.max(activeEra.index.minus(1).toNumber(), 0),
+  })
+
+  const fromDate = new Date()
+  fromDate.setDate(fromDate.getDate() - MaxPayoutDays)
+  fromDate.setHours(0, 0, 0, 0)
+
+  const { data: poolRewardsData, loading: poolRewardsLoading } = usePoolRewards(
+    {
+      chain: network,
+      who: activeAccount || '',
+      from: getUnixTime(fromDate),
+    }
+  )
+
+  const allRewards = nominatorRewardsData?.allRewards ?? []
+  const payouts =
+    allRewards.filter((reward: NominatorReward) => reward.claimed === true) ??
+    []
+  const unclaimedPayouts =
+    allRewards.filter((reward: NominatorReward) => reward.claimed === false) ??
+    []
+  const poolClaims = poolRewardsData?.poolRewards ?? []
+
+  useEffect(() => {
+    // filter zero rewards and order via timestamp, most recent first
+    const payoutsList = (allRewards as RewardResults).concat(
+      poolClaims
+    ) as RewardResults
+    setPayoutLists(removeNonZeroAmountAndSort(payoutsList))
+  }, [JSON.stringify(payouts), JSON.stringify(poolClaims)])
+
+  return (
+    <>
+      <PayoutBar
+        days={MaxPayoutDays}
+        height="165px"
+        data={{ payouts, unclaimedPayouts, poolClaims }}
+        nominating={nominating}
+        inPool={inPool}
+        syncing={rewardsLoading || poolRewardsLoading}
+      />
+      <AveragePayoutLine
+        days={MaxPayoutDays}
+        average={10}
+        height="65px"
+        data={{ payouts, unclaimedPayouts, poolClaims }}
+        nominating={nominating}
+        inPool={inPool}
+      />
+    </>
+  )
+}

packages/app/src/pages/Rewards/Graph/InactiveGraph.tsx

@@ -0,0 +1,27 @@
+// Copyright 2025 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { MaxPayoutDays } from 'consts'
+import { AveragePayoutLine } from 'library/Graphs/AveragePayoutLine'
+import { PayoutBar } from 'library/Graphs/PayoutBar'
+
+export const InactiveGraph = () => (
+  <>
+    <PayoutBar
+      days={MaxPayoutDays}
+      height="165px"
+      data={{ payouts: [], unclaimedPayouts: [], poolClaims: [] }}
+      nominating={false}
+      inPool={false}
+      syncing={false}
+    />
+    <AveragePayoutLine
+      days={MaxPayoutDays}
+      average={10}
+      height="65px"
+      data={{ payouts: [], unclaimedPayouts: [], poolClaims: [] }}
+      nominating={false}
+      inPool={false}
+    />
+  </>
+)

packages/app/src/pages/Rewards/Graph/index.tsx

@@ -0,0 +1,5 @@
+// Copyright 2025 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+export * from './ActiveGraph'
+export * from './InactiveGraph'