Fetch restaking events from Nimiq.Watch and display as gains

Author: sisou

src/components/layouts/AddressOverview.vue

@@ -176,7 +176,7 @@
                     />
 
                     <template v-if="activeCurrency === 'nim'">
-                        <StakingPreview v-if="activeStake && windowWidth > 860" :show-gains="false" />
+                        <StakingPreview v-if="activeStake && windowWidth > 860" />
                         <StakingButton v-else-if="showStakingButton" />
                     </template>
 
@@ -196,7 +196,7 @@
                     </button>
                 </div>
             </div>
-            <StakingPreview v-if="activeStake && isMobile" class="staking-preview-mobile" :show-gains="false" />
+            <StakingPreview v-if="activeStake && isMobile" class="staking-preview-mobile" />
             <div
                 v-if="activeCurrency === 'usdc' && accountUsdcBridgedBalance >= 0.1e6"
                 class="bridged-usdc-notice"

src/components/staking/StakingPreview.vue

@@ -13,19 +13,14 @@
 
         <div class="flex-grow"></div>
 
-        <div v-if="showGains" class="gain flex-row">
-            <template v-if="gain">
-                +<Amount :amount="gain" value-mask />
-            </template>
-            <template v-else-if="validator && 'annualReward' in validator">
-                {{ (validator.annualReward * 100).toFixed(1) }}% {{ $t("p.a.") }}
-            </template>
+        <div v-if="restakingRewards !== null" class="gain flex-row">
+            +<Amount :amount="restakingRewards" value-mask />
         </div>
     </button>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api';
+import { computed, defineComponent } from '@vue/composition-api';
 import Amount from '../Amount.vue';
 import { useStakingStore } from '../../stores/Staking';
 import OneLeafStakingIcon from '../icons/Staking/OneLeafStakingIcon.vue';
@@ -34,32 +29,26 @@ import ThreeLeafStakingIcon from '../icons/Staking/ThreeLeafStakingIcon.vue';
 import { useAddressStore } from '../../stores/Address';
 
 export default defineComponent({
-    props: {
-        showGains: {
-            type: Boolean,
-            default: true,
-        },
-    },
     setup() {
-        const { activeStake: stake, activeValidator: validator } = useStakingStore();
+        const { activeStake: stake, restakingRewards } = useStakingStore();
         const { activeAddressInfo } = useAddressStore();
 
-        // TODO: Calculate gain
-        const gain = ref(0);
-
         const currentPercentage = computed(() => {
             const alreadyStakedAmount = stake.value?.activeBalance || 0;
-            const availableAmount = (activeAddressInfo.value?.balance || 0) + alreadyStakedAmount;
+            const deactivatedAmount = stake.value?.inactiveBalance || 0;
+            const retiredAmount = stake.value?.retiredBalance || 0;
+            const totalStakedAmount = alreadyStakedAmount + deactivatedAmount + retiredAmount;
+
+            const availableAmount = (activeAddressInfo.value?.balance || 0) + totalStakedAmount;
             const percent = (100 * alreadyStakedAmount) / availableAmount;
 
             return percent;
         });
 
         return {
             stake,
-            validator,
-            gain,
             currentPercentage,
+            restakingRewards,
         };
     },
     components: {

src/config/config.local.ts

@@ -25,6 +25,7 @@ export default {
         prestakingEndBlock: 3_028_050,
         transitionBlock: 3_032_010,
         validatorsEndpoint: 'https://validators-api-testnet.nuxt.dev/api/v1/validators?only-known=false',
+        stakeEventsEndpoint: 'https://v2.test.nimiqwatch.com/api/v2/staker/ADDRESS/events?filter=add-stake',
         genesis: {
             height: 3032010,
             date: new Date('2024-11-13T20:00:00Z'),

src/config/config.mainnet.ts

@@ -35,6 +35,7 @@ export default {
         prestakingEndBlock: 3_456_000, // ~2024-11-19T16:00:00Z
         transitionBlock: 3_456_000,
         validatorsEndpoint: 'https://validators-api-mainnet.nuxt.dev/api/v1/validators?only-known=false',
+        stakeEventsEndpoint: 'https://v2.nimiqwatch.com/api/v2/staker/ADDRESS/events?filter=add-stake',
         genesis: {
             height: 3456000,
             date: new Date('2024-11-19T16:00:00Z'),

src/config/config.testnet.ts

@@ -23,6 +23,7 @@ export default {
         prestakingEndBlock: 3_028_050,
         transitionBlock: 3_032_010,
         validatorsEndpoint: 'https://validators-api-testnet.nuxt.dev/api/v1/validators?with-scores=true',
+        stakeEventsEndpoint: 'https://v2.test.nimiqwatch.com/api/v2/staker/ADDRESS/events?filter=add-stake',
         genesis: {
             height: 3032010,
             date: new Date('2024-11-13T20:00:00Z'),

src/network.ts

@@ -8,7 +8,7 @@ import { useTransactionsStore, TransactionState } from './stores/Transactions';
 import { useNetworkStore } from './stores/Network';
 import { useProxyStore } from './stores/Proxy';
 import { useConfig } from './composables/useConfig';
-import { useStakingStore, Validator } from './stores/Staking';
+import { AddStakeEvent, useStakingStore, Validator } from './stores/Staking';
 import { ENV_MAIN, STAKING_CONTRACT_ADDRESS } from './lib/Constants';
 import { calculateStakingReward } from './lib/AlbatrossMath';
 import { reportToSentry } from './lib/Sentry';
@@ -137,6 +137,22 @@ export async function launchNetwork() {
         });
     }
 
+    watch([addressStore.activeAddress], ([activeAddress]) => {
+        if (!activeAddress) return;
+        const { config } = useConfig();
+        const endpoint = config.staking.stakeEventsEndpoint;
+        const url = endpoint.replace('ADDRESS', activeAddress.replaceAll(' ', '+'));
+        retry(
+            () => fetch(url)
+                .then((res) => res.json())
+                .then((events: AddStakeEvent[]) => {
+                    useStakingStore().setStakingEvents(activeAddress, events);
+                    console.log('Got add-stake events for', activeAddress, events);
+                }),
+            { maxRetries: 3 },
+        ).catch(reportFor('fetch(add-stake events)'));
+    });
+
     function forgetBalances(addresses: string[]) {
         for (const address of addresses) {
             balances.delete(address);

src/stores/Staking.ts

@@ -5,8 +5,18 @@ import { useAddressStore } from './Address';
 export type StakingState = {
     validators: Record<string, Validator>,
     stakeByAddress: Record<string, Stake>,
+    stakingEventsByAddress: Record<string, StakingEvent[]>,
 }
 
+export type AddStakeEvent = {
+    sender_address:string, // eslint-disable-line camelcase
+    date: string,
+    value: number,
+    type: number,
+}
+
+export type StakingEvent = AddStakeEvent;
+
 export type Stake = {
     address: string,
     activeBalance: number, // activeBalance (does not include inactiveBalance)
@@ -58,6 +68,7 @@ export const useStakingStore = createStore({
     state: () => ({
         validators: {},
         stakeByAddress: {},
+        stakingEventsByAddress: {},
     } as StakingState),
     getters: {
         validatorsList: (state): Readonly<Validator[]> => Object.values(state.validators),
@@ -156,6 +167,21 @@ export const useStakingStore = createStore({
                 active: false,
             };
         },
+
+        stakingEventsByAddress: (state): Readonly<Record<string, StakingEvent[]>> => state.stakingEventsByAddress,
+        stakingEvents: (state): Readonly<StakingEvent[] | null> => {
+            const { activeAddress } = useAddressStore();
+            if (!activeAddress.value) return null;
+
+            return state.stakingEventsByAddress[activeAddress.value] || null;
+        },
+        restakingRewards: (state, { stakingEvents }): Readonly<number | null> => {
+            const events = stakingEvents.value as StakingEvent[] | null;
+            if (!events) return null;
+
+            const addStakeEvents: AddStakeEvent[] = events.filter((event) => event.type === 6);
+            return addStakeEvents.reduce((sum, event) => sum + event.value, 0);
+        },
     },
     actions: {
         setStake(stake: Stake) {
@@ -205,5 +231,13 @@ export const useStakingStore = createStore({
 
             this.state.validators = newValidators;
         },
+        setStakingEvents(address: string, events: StakingEvent[]) {
+            // Need to assign whole object for change detection of new addresses.
+            // TODO: Simply set new stake in Vue 3.
+            this.state.stakingEventsByAddress = {
+                ...this.state.stakingEventsByAddress,
+                [address]: events,
+            };
+        },
     },
 });