feat: displays bonus information

src/i18n/en-US/index.ts

@@ -778,6 +778,7 @@ export default {
     basicRewards: 'Basic rewards',
     bonusRewards: 'Bonus rewards',
     bonus: 'Bonus',
+    bonusTip: 'Bonus will be claimable in the next voting period',
     dAppRewards: 'dApp rewards',
     done: 'Done',
     search: 'Search',
@@ -800,6 +801,7 @@ export default {
     unbonding: 'Unbonding',
     totalEstimatedRewards: 'Total estimated rewards',
     claimEstimatedRewards: 'Claim estimated Rewards',
+    bonusEligible: 'Bonus Eligible',
     claimNow: 'Claim now',
     claim: 'Claim',
     dApp: 'dApp',

src/staking-v3/components/FeatureDapp.vue

@@ -87,7 +87,7 @@ export default defineComponent({
   },
   setup() {
     const { constants, isVotingPeriod } = useDappStaking();
-    const { stakerApr, bonusApr } = useAprV3();
+    const { stakerApr, bonusApr } = useAprV3({ isWatch: true });
     const { registeredDapps } = useDapps();
     const { newListings } = useCampaign();
     const { navigateToVote } = useDappStakingNavigation();

src/staking-v3/components/my-staking/MyStaking.vue

@@ -119,11 +119,15 @@
           :caption="$t('stakingV3.availableToClaim')"
           :amount="rewards?.staker.amount"
           :eras="rewards?.staker.eraCount"
+          :is-tool-tip="false"
         />
         <my-staking-card
           :caption="$t('stakingV3.bonus')"
-          :amount="rewards?.bonus"
+          :amount="bonus"
           :eras="bonusRewardEras"
+          :is-text-bonus-eligible="isMainnet"
+          :is-tool-tip="!!bonus"
+          :text-tool-tip="$t('stakingV3.bonusTip')"
         />
         <button
           v-if="width <= screenSize.sm"
@@ -164,8 +168,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, PropType, ref } from 'vue';
-import { useDappStaking, useDappStakingNavigation } from '../../hooks';
+import { defineComponent, computed, PropType, ref, watch } from 'vue';
+import { useAprV3, useDappStaking, useDappStakingNavigation } from '../../hooks';
 import MyStakingCard from './MyStakingCard.vue';
 import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
 import { PeriodType } from 'src/staking-v3/logic';
@@ -203,6 +207,9 @@ export default defineComponent({
       formatPeriod,
     } = useDappStaking();
 
+    const bonus = ref<BigInt>(BigInt(0));
+    const { getEstimatedBonus } = useAprV3({ isWatch: false });
+
     const { navigateToVote } = useDappStakingNavigation();
 
     const lockedButUnstaked = computed<bigint>(() => {
@@ -221,7 +228,16 @@ export default defineComponent({
       }
     };
 
-    const { nativeTokenSymbol } = useNetworkInfo();
+    const { nativeTokenSymbol, isMainnet } = useNetworkInfo();
+
+    const setBonus = async (): Promise<void> => {
+      if (rewards.value?.bonus > 0) {
+        bonus.value = rewards.value?.bonus;
+      } else {
+        const amount = String(await getEstimatedBonus());
+        bonus.value = BigInt(String(ethers.utils.parseEther(amount)));
+      }
+    };
 
     const isLockedBalloon = ref<boolean>(false);
     const isStakedBalloon = ref<boolean>(false);
@@ -246,6 +262,8 @@ export default defineComponent({
       setShowUnlockModal(true);
     };
 
+    watch([rewards], setBonus);
+
     return {
       rewards,
       totalStakerRewards,
@@ -273,6 +291,8 @@ export default defineComponent({
       setShowUnlockModal,
       handleUnlock,
       PeriodType,
+      bonus,
+      isMainnet,
     };
   },
 });

src/staking-v3/components/my-staking/MyStakingCard.vue

@@ -1,12 +1,39 @@
 <template>
   <div class="card">
-    <div class="card--title">{{ caption }}</div>
+    <div class="card--title">
+      <div>
+        <span>
+          {{ caption }}
+        </span>
+      </div>
+      <div
+        v-if="isToolTip"
+        v-click-away="setIsMobileDisplayTooltip"
+        @click="setIsMobileDisplayTooltip"
+      >
+        <astar-icon-help />
+        <q-tooltip
+          v-model="isDisplayTooltip"
+          anchor="top middle"
+          :self="`bottom ${$q.platform.is.mobile ? 'end' : 'middle'}`"
+          class="box--tooltip"
+        >
+          <span class="text--tooltip">{{ textToolTip }}</span>
+        </q-tooltip>
+      </div>
+    </div>
+
     <div v-if="eras" class="card--days">
       <span>
         {{ $t(`stakingV3.${eras > 1 ? 'days' : 'day'}`, { day: eras }) }}
       </span>
     </div>
-    <div class="card--balance">
+    <div v-if="isTextBonusEligible && amount.toString() > '0'" class="card--balance">
+      <div class="card--amount">
+        <span>{{ $t('stakingV3.bonusEligible') }}</span>
+      </div>
+    </div>
+    <div v-else class="card--balance">
       <div class="card--amount">
         {{ $n(truncate(ethers.utils.formatEther(amount.toString()) ?? '0', 2)) }}
       </div>
@@ -18,7 +45,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { ethers } from 'ethers';
-import { useNetworkInfo } from 'src/hooks';
+import { useNetworkInfo, useTooltip } from 'src/hooks';
 import { truncate } from '@astar-network/astar-sdk-core';
 
 export default defineComponent({
@@ -36,14 +63,32 @@ export default defineComponent({
       required: false,
       default: 0,
     },
+    isTextBonusEligible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isToolTip: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    textToolTip: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   setup() {
     const { nativeTokenSymbol } = useNetworkInfo();
+    const { isDisplayTooltip, setIsMobileDisplayTooltip } = useTooltip('icon');
 
     return {
       nativeTokenSymbol,
       ethers,
       truncate,
+      isDisplayTooltip,
+      setIsMobileDisplayTooltip,
     };
   },
 });
@@ -64,6 +109,9 @@ export default defineComponent({
   font-weight: 700;
   flex: 1;
   position: relative;
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
 }
 
 .card--balance {

src/staking-v3/hooks/useAprV3.ts

@@ -8,10 +8,10 @@ import { computed, ref, watch } from 'vue';
 import { EraInfo, EraLengths, InflationParam } from '../logic';
 import { useDappStaking } from './useDappStaking';
 
-export const useAprV3 = () => {
+export const useAprV3 = ({ isWatch }: { isWatch: boolean }) => {
   const stakerApr = ref<number>(0);
   const bonusApr = ref<number>(0);
-  const { eraLengths, isVotingPeriod, currentEraInfo } = useDappStaking();
+  const { eraLengths, isVotingPeriod, currentEraInfo, stakerInfo } = useDappStaking();
 
   const percentageToNumber = (percent: string): number => {
     // e.g.: percent 1%: 10000000000000000
@@ -73,14 +73,14 @@ export const useAprV3 = () => {
     currentEraInfo,
     eraLength,
     bonusRewardsPoolPerPeriod,
+    // Memo: Any amount can be simulated for calculating APR
+    simulatedVoteAmount = 1000,
   }: {
     currentEraInfo: EraInfo;
     eraLength: EraLengths;
     bonusRewardsPoolPerPeriod: string;
-  }): number => {
-    // Memo: Any amount can be simulated
-    const simulatedVoteAmount = 1000;
-
+    simulatedVoteAmount?: number;
+  }): { bonusApr: number; simulatedBonusPerPeriod: number } => {
     const cyclesPerYear = getCyclePerYear(eraLength);
 
     const formattedBonusRewardsPoolPerPeriod = Number(
@@ -97,7 +97,7 @@ export const useAprV3 = () => {
     const periodsPerYear = periodsPerCycle.value * cyclesPerYear;
     const simulatedBonusAmountPerYear = simulatedBonusPerPeriod * periodsPerYear;
     const bonusApr = (simulatedBonusAmountPerYear / simulatedVoteAmount) * 100;
-    return bonusApr;
+    return { bonusApr, simulatedBonusPerPeriod };
   };
 
   const getApr = async (): Promise<{ stakerApr: number; bonusApr: number }> => {
@@ -129,7 +129,7 @@ export const useAprV3 = () => {
         eraLength: eraLengthRef,
       });
 
-      const bonusApr = getBonusApr({
+      const { bonusApr } = getBonusApr({
         currentEraInfo: currentEraInfoRef,
         eraLength: eraLengthRef,
         bonusRewardsPoolPerPeriod,
@@ -141,9 +141,51 @@ export const useAprV3 = () => {
     }
   };
 
+  const getEstimatedBonus = async (): Promise<number> => {
+    try {
+      const eraLengthRef = eraLengths.value;
+      const currentEraInfoRef = currentEraInfo.value;
+      const stakerInfoRef = stakerInfo.value;
+      if (
+        !stakerInfoRef ||
+        !eraLengthRef.standardEraLength ||
+        !currentEraInfoRef ||
+        !currentEraInfoRef.nextStakeAmount
+      ) {
+        return 0;
+      }
+
+      let stakedBonusEligible: bigint = BigInt(0);
+      stakerInfoRef.forEach((it) => {
+        const amount = it.loyalStaker ? it.staked.voting : BigInt(0);
+        stakedBonusEligible += amount;
+      });
+
+      if (!stakedBonusEligible) return 0;
+
+      const inflationRepo = container.get<IInflationRepository>(Symbols.InflationRepository);
+      const inflationConfiguration = await inflationRepo.getInflationConfiguration();
+      const bonusRewardsPoolPerPeriod = inflationConfiguration.bonusRewardPoolPerPeriod.toString();
+
+      const { simulatedBonusPerPeriod } = getBonusApr({
+        currentEraInfo: currentEraInfoRef,
+        eraLength: eraLengthRef,
+        bonusRewardsPoolPerPeriod,
+        simulatedVoteAmount: Number(ethers.utils.formatEther(stakedBonusEligible)),
+      });
+
+      return simulatedBonusPerPeriod;
+    } catch (error) {
+      return 0;
+    }
+  };
+
+  watch([stakerInfo], getEstimatedBonus);
+
   watch(
     [isVotingPeriod, eraLengths, currentEraInfo, periodsPerCycle],
     async () => {
+      if (!isWatch) return;
       const apr = await getApr();
       stakerApr.value = apr.stakerApr;
       bonusApr.value = apr.bonusApr;
@@ -154,5 +196,6 @@ export const useAprV3 = () => {
   return {
     stakerApr,
     bonusApr,
+    getEstimatedBonus,
   };
 };