Show estimated staker + bonus rewards on vote info banner

src/i18n/en-US/index.ts

@@ -1060,6 +1060,7 @@ export default {
     utilityDescription:
       'Stake to essential projects that enhance the productivity and functionality of Web3.',
     othersDescription: 'Explore a diverse set of blockchain dApps.',
+    basicAprPlusBonus: 'Basic APR + Bonus',
   },
   bridge: {
     selectBridge: 'Select a Bridge',

src/staking-v3/components/PeriodInfoVote.vue

@@ -41,11 +41,11 @@
         </div>
         <div class="reward-info">
           <div class="reward-label">
-            <div>{{ $t('stakingV3.estimatedRewards') }}</div>
+            <div>{{ $t('stakingV3.basicAprPlusBonus') }}</div>
             <div>{{ $t('stakingV3.ifYouStakeNow') }}</div>
           </div>
           <div class="percentage">
-            <span>15<small>%+</small></span>
+            <span>{{ totalApr.toFixed(1) }}<small>%</small></span>
           </div>
         </div>
       </div>
@@ -54,8 +54,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { useDappStaking, useDappStakingNavigation, useVotingCountdown } from '../hooks';
+import { defineComponent, computed } from 'vue';
+import { useAprV3, useDappStaking, useDappStakingNavigation, useVotingCountdown } from '../hooks';
 import { PeriodType } from 'src/staking-v3/logic';
 import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
 
@@ -67,12 +67,16 @@ export default defineComponent({
     const { protocolState, totalStakerRewards, claimStakerAndBonusRewards } = useDappStaking();
     const { navigateToAssets } = useDappStakingNavigation();
     const { timeLeftFormatted } = useVotingCountdown();
+    const { stakerApr, bonusApr } = useAprV3({ isWatch: true });
+
+    const totalApr = computed<number>(() => stakerApr.value + bonusApr.value);
 
     return {
       protocolState,
       timeLeftFormatted,
       PeriodType,
       totalStakerRewards,
+      totalApr,
       navigateToAssets,
       claimStakerAndBonusRewards,
     };

src/staking-v3/logic/services/DappStakingService.ts

@@ -4,7 +4,10 @@ import {
   DappInfo,
   DappStakeInfo,
   DappState,
+  EraInfo,
   EraLengths,
+  PeriodType,
+  ProtocolState,
   SingularStakingInfo,
   StakeAmount,
   StakerRewards,
@@ -701,15 +704,16 @@ export class DappStakingService extends SignerService implements IDappStakingSer
 
   // @inheritdoc
   public async getStakerApr(block?: number): Promise<number> {
-    const [totalIssuance, inflationParams, eraLengths, eraInfo] = await Promise.all([
+    const [totalIssuance, inflationParams, eraLengths, eraInfo, protocolState] = await Promise.all([
       this.balancesRepository.getTotalIssuance(block),
       this.inflationRepository.getInflationParams(block),
       this.dappStakingRepository.getEraLengths(block),
       this.dappStakingRepository.getCurrentEraInfo(block),
+      this.dappStakingRepository.getProtocolState(block),
     ]);
 
     const cyclesPerYear = this.getCyclesPerYear(eraLengths);
-    const currentStakeAmount = weiToToken(eraInfo.currentStakeAmount.totalStake);
+    const currentStakeAmount = this.getStakeAmount(protocolState, eraInfo);
 
     const stakedPercent = currentStakeAmount / weiToToken(totalIssuance);
     const { baseStakersPart, adjustableStakersPart, idealStakingRate, maxInflationRate } =
@@ -728,18 +732,19 @@ export class DappStakingService extends SignerService implements IDappStakingSer
     simulatedVoteAmount: number = 1000,
     block?: number
   ): Promise<{ value: number; simulatedBonusPerPeriod: number }> {
-    const [inflationConfiguration, eraLengths, eraInfo] = await Promise.all([
+    const [inflationConfiguration, eraLengths, eraInfo, protocolState] = await Promise.all([
       this.inflationRepository.getInflationConfiguration(block),
       this.dappStakingRepository.getEraLengths(block),
       this.dappStakingRepository.getCurrentEraInfo(block),
+      this.dappStakingRepository.getProtocolState(block),
     ]);
 
     const cyclesPerYear = this.getCyclesPerYear(eraLengths);
 
     const formattedBonusRewardsPoolPerPeriod = weiToToken(
       inflationConfiguration.bonusRewardPoolPerPeriod
     );
-    const voteAmount = weiToToken(eraInfo.currentStakeAmount.voting);
+    const voteAmount = this.getStakeAmount(protocolState, eraInfo);
     const bonusPercentPerPeriod = formattedBonusRewardsPoolPerPeriod / voteAmount;
     const simulatedBonusPerPeriod = simulatedVoteAmount * bonusPercentPerPeriod;
     const periodsPerYear = eraLengths.periodsPerCycle * cyclesPerYear;
@@ -822,4 +827,14 @@ export class DappStakingService extends SignerService implements IDappStakingSer
   ): boolean {
     return stakedPeriod < currentPeriod - rewardRetentionInPeriods;
   }
+
+  private getStakeAmount(protocolState: ProtocolState, eraInfo: EraInfo): number {
+    const currentStakeAmount = weiToToken(
+      protocolState.periodInfo.subperiod === PeriodType.Voting
+        ? eraInfo.nextStakeAmount?.totalStake ?? BigInt(0)
+        : eraInfo.currentStakeAmount.totalStake
+    );
+
+    return currentStakeAmount;
+  }
 }