from stakers to stakers and lockers (#1196)

src/i18n/en-US/index.ts

@@ -867,8 +867,8 @@ export default {
     numberOfDapps: 'Number of dApps',
     numberOfDappsDescription:
       'The total number of dApps that are currently listed on dApp Staking.',
-    lockAccounts: 'Lock accounts',
-    numberOfParticipantsDescription: 'The total number of dApp Staking users.',
+    stakingAndLockingAccounts: 'Staking & Locking accounts',
+    numberOfStakersAndLockersDescription: 'The total number of dApp Staking & Locking users.',
     tokenomics: 'tokenomics',
     general: 'General',
     totalValueLocked: 'Total Value Locked ({token})',

src/staking-v3/components/data/DataList.vue

@@ -20,10 +20,10 @@
         {{ protocolState?.era ?? '--' }}
       </data-card>
       <data-card
-        :title="$t('stakingV3.lockAccounts')"
-        :description="$t('stakingV3.numberOfParticipantsDescription')"
+        :title="$t('stakingV3.stakingAndLockingAccounts')"
+        :description="$t('stakingV3.numberOfStakersAndLockersDescription')"
       >
-        {{ numberOfParticipants }}
+        {{ numberOfStakersAndLockers.stakersCount }} / {{ numberOfStakersAndLockers.lockersCount }}
       </data-card>
     </div>
 
@@ -130,7 +130,7 @@ export default defineComponent({
       tvlPercentage,
       totalVolumeOfVotesPercentage,
       bonusEligibleTokens,
-      numberOfParticipants,
+      numberOfStakersAndLockers,
     } = useDataCalculations();
     const { activeInflationConfiguration } = useInflation();
 
@@ -170,7 +170,7 @@ export default defineComponent({
       totalVolumeOfVotesPercentage,
       bonusEligibleTokens,
       activeInflationConfiguration,
-      numberOfParticipants,
+      numberOfStakersAndLockers,
       nativeTokenSymbol,
       periodRemainingDays,
       isVotingPeriod,

src/staking-v3/hooks/useDapps.ts

@@ -44,10 +44,11 @@ export function useDapps() {
       // Memo: this can a heavy operations since we are querying all dapps stakes for a chain.
       await fetchStakeAmountsToStore();
 
-      const numberOfParticipants = await tokenApiProviderRepository.getNumberOfParticipants(
-        currentNetworkName.value.toLowerCase()
-      );
-      store.commit('stakingV3/setNumberOfParticipants', numberOfParticipants);
+      const numberOfStakersAndLockers =
+        await tokenApiProviderRepository.getNumberOfStakersAndLockers(
+          currentNetworkName.value.toLowerCase()
+        );
+      store.commit('stakingV3/setNumberOfStakersAndLockers', numberOfStakersAndLockers);
     } finally {
       aggregator.publish(new BusyMessage(false));
     }

src/staking-v3/hooks/useDataCalculations.ts

@@ -3,6 +3,7 @@ import { useDappStaking } from './useDappStaking';
 import { useTokenCirculation } from 'src/hooks/useTokenCirculation';
 import { ethers } from 'ethers';
 import { useStore } from 'src/store';
+import { NumberOfStakersAndLockers } from '../logic';
 
 export function useDataCalculations() {
   const { totalSupply } = useTokenCirculation();
@@ -46,9 +47,14 @@ export function useDataCalculations() {
       : currentEraInfo.value.currentStakeAmount.voting;
   });
 
-  const numberOfParticipants = computed<number>(
-    () => store.getters['stakingV3/getNumberOfParticipants']
+  const numberOfStakersAndLockers = computed<NumberOfStakersAndLockers>(
+    () => store.getters['stakingV3/getNumberOfStakersAndLockers']
   );
 
-  return { tvlPercentage, totalVolumeOfVotesPercentage, bonusEligibleTokens, numberOfParticipants };
+  return {
+    tvlPercentage,
+    totalVolumeOfVotesPercentage,
+    bonusEligibleTokens,
+    numberOfStakersAndLockers,
+  };
 }

src/staking-v3/logic/models/DappStaking.ts

@@ -204,9 +204,12 @@ export interface ProviderDappData {
   dappId: number;
 }
 
-export interface NumberOfParticipantsData {
-  timestamp: string;
-  participants: number;
+export interface NumberOfStakersAndLockers {
+  date: string;
+  tvl: string;
+  lockersCount: number;
+  tvs: string;
+  stakersCount: number;
 }
 
 export interface StakerRewards {

src/staking-v3/logic/repositories/IDataProviderRepository.ts

@@ -1,9 +1,9 @@
-import { ProviderDappData } from '../models';
+import { ProviderDappData, NumberOfStakersAndLockers } from '../models';
 
 /**
  * Interface for provider to fetch dapp staking v3 data from other sources
  */
 export interface IDataProviderRepository {
   getDapps(network: string): Promise<ProviderDappData[]>;
-  getNumberOfParticipants(network: string): Promise<number>;
+  getNumberOfStakersAndLockers(network: string): Promise<NumberOfStakersAndLockers>;
 }

src/staking-v3/logic/repositories/TokenApiProviderRepository.ts

@@ -1,6 +1,6 @@
 import { injectable } from 'inversify';
 import { IDataProviderRepository } from './IDataProviderRepository';
-import { ProviderDappData, NumberOfParticipantsData } from '../models';
+import { ProviderDappData, NumberOfStakersAndLockers } from '../models';
 import { TOKEN_API_URL } from '@astar-network/astar-sdk-core';
 import { Guard } from 'src/v2/common';
 import axios from 'axios';
@@ -21,27 +21,20 @@ export class TokenApiProviderRepository implements IDataProviderRepository {
     return [];
   }
 
-  async getNumberOfParticipants(network: string): Promise<number> {
+  async getNumberOfStakersAndLockers(network: string): Promise<NumberOfStakersAndLockers> {
+    // Modify the return type to remove the possibility of undefined
     Guard.ThrowIfUndefined(network, 'network');
 
-    const numberOfParticipantsUrl = `${TOKEN_API_URL}/v3/${network.toLowerCase()}/dapps-staking/stakerscount-total/1 day`;
+    const numberOfStakersAndLockersUrl = `${TOKEN_API_URL}/v3/${network.toLowerCase()}/dapps-staking/lockers-and-stakers-total/1 day`;
     try {
-      const numberOfParticipants = await axios.get<Array<Array<string | number>>>(
-        numberOfParticipantsUrl
+      const numberOfStakersAndLockers = await axios.get<Array<NumberOfStakersAndLockers>>(
+        numberOfStakersAndLockersUrl
       );
 
-      const transformedData: NumberOfParticipantsData[] = numberOfParticipants.data.map((item) => {
-        return {
-          timestamp: item[0] as string,
-          participants: item[1] as number,
-        };
-      });
-
-      return transformedData.length > 0 ? transformedData[0].participants : 0;
+      return numberOfStakersAndLockers.data[0];
     } catch (error) {
       console.error(error);
+      throw error; // Throw the error instead of returning undefined
     }
-
-    return 0;
   }
 }

src/staking-v3/store/getters.ts

@@ -37,7 +37,7 @@ const getters: GetterTree<DappStakingState, StateInterface> & DappStakingGetters
   getVersion: (state) => state.version,
   getDapps: (state) => state.dapps,
   getNewDapps: (state) => state.newDapps,
-  getNumberOfParticipants: (state) => state.numberOfParticipants,
+  getNumberOfStakersAndLockers: (state) => state.numberOfStakersAndLockers,
   getRegisteredDapps: (state) => state.dapps.filter((x) => x.chain.state === DappState.Registered),
   getProtocolState: (state) => state.protocolState,
   getLedger: (state) => state.ledger,

src/staking-v3/store/mutations.ts

@@ -6,6 +6,7 @@ import {
   Dapp,
   ProtocolState,
   SingularStakingInfo,
+  NumberOfStakersAndLockers,
   Rewards,
   Constants,
   EraInfo,
@@ -23,7 +24,10 @@ export interface DappStakingMutations<S = DappStakingState> {
   updateDappExtended(state: DappStakingState, dapp: Dapp): void;
   updateDappChain(state: DappStakingState, dapp: DappInfo): void;
   updateDappDetails(state: DappStakingState, dapp: ProviderDappData): void;
-  setNumberOfParticipants(state: DappStakingState, numberOfParticipants: number): void;
+  setNumberOfStakersAndLockers(
+    state: DappStakingState,
+    numberOfStakersAndLockers: NumberOfStakersAndLockers
+  ): void;
   setProtocolState(state: DappStakingState, protocolState: ProtocolState): void;
   setLedger(state: DappStakingState, ledger: AccountLedger): void;
   setStakerInfo(state: DappStakingState, stakerInfo: Map<string, SingularStakingInfo>): void;
@@ -74,8 +78,8 @@ const mutations: MutationTree<DappStakingState> & DappStakingMutations = {
   updateDappDetails(state: DappStakingState, dapp: ProviderDappData): void {
     updateDapp(state, dapp.contractAddress, dapp, 'dappDetails');
   },
-  setNumberOfParticipants(state, numberOfParticipants) {
-    state.numberOfParticipants = numberOfParticipants;
+  setNumberOfStakersAndLockers(state, numberOfStakersAndLockers) {
+    state.numberOfStakersAndLockers = numberOfStakersAndLockers;
   },
   setProtocolState(state, protocolState) {
     state.protocolState = protocolState;

src/staking-v3/store/state.ts

@@ -3,6 +3,7 @@ import {
   CombinedDappInfo,
   ProtocolState,
   SingularStakingInfo,
+  NumberOfStakersAndLockers,
   Rewards,
   Constants,
   EraInfo,
@@ -16,7 +17,7 @@ export interface DappStakingState {
   version: string;
   dapps: CombinedDappInfo[];
   newDapps: DappInfo[];
-  numberOfParticipants: number;
+  numberOfStakersAndLockers: NumberOfStakersAndLockers;
   protocolState: ProtocolState | undefined;
   ledger: AccountLedger | undefined;
   stakerInfo: Map<string, SingularStakingInfo> | undefined;
@@ -34,7 +35,7 @@ function state(): DappStakingState {
     version: '3.0.0',
     dapps: [],
     newDapps: [],
-    numberOfParticipants: 0,
+    numberOfStakersAndLockers: initialNumberOfStakersAndLockers,
     protocolState: undefined,
     ledger: undefined,
     stakerInfo: undefined,
@@ -48,6 +49,14 @@ function state(): DappStakingState {
   };
 }
 
+export const initialNumberOfStakersAndLockers: NumberOfStakersAndLockers = {
+  date: '',
+  tvl: '',
+  lockersCount: 0,
+  tvs: '',
+  stakersCount: 0,
+};
+
 export const initialTiersConfiguration: TiersConfiguration = {
   numberOfSlots: 0,
   slotsPerTier: [],