Fix dApp swiper configuration (#1317)

* Fix dApp swiper configuration * Rewards earned sort fix * TVL ratio for previous period calculation fix * Hide period stats * Cast to bigint * Hide period stats
AstarNetwork · Jun 14, 2024 · ef0c8a4 · ef0c8a4
1 parent 08cd9f2
commit ef0c8a4
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 8 deletions.
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
@@ -1047,7 +1047,7 @@ export default {
     moreInfoFor: 'More info for',
     bonusRewards: 'Bonus Rewards',
     threshold: 'Threshold',
-    percentageStaked: 'Percentage of Supply Staked',
+    percentageLocked: 'Percentage of Supply Locked',
     unclaimedRewards: 'Unclaimed rewards',
     rewardsClaimedOnStake: 'Rewards will be claimed when stake',
     ifYouStakeNow: 'If you stake now',

diff --git a/src/staking-v3/components/PeriodStats.vue b/src/staking-v3/components/PeriodStats.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper--period-stats">
+  <div v-if="false" class="wrapper--period-stats">
     <div class="title">
       <span>{{ period.toString().padStart(3, '0') }}</span>
       <span>{{ $t('stakingV3.stats') }}</span>
@@ -25,7 +25,7 @@
           </div>
         </div>
         <div class="period-kpi-container">
-          <div class="kpi-title">{{ $t('stakingV3.percentageStaked') }}</div>
+          <div class="kpi-title">{{ $t('stakingV3.percentageLocked') }}</div>
           <div class="value-unit">
             <span>{{ tvlRatio ? (tvlRatio * 100).toFixed(1) : '--' }}<small>%</small></span>
           </div>
@@ -88,7 +88,7 @@ export default defineComponent({
         .map((x) => ({
           name: x.name,
           iconUrl: x.iconUrl,
-          amount: BigInt(x.stakeAmount),
+          amount: x.stakeAmount,
           address: x.address,
         }))
         .sort((a, b) => sort(a.amount, b.amount))

diff --git a/src/staking-v3/components/vote/choose-dapps/DappsList.vue b/src/staking-v3/components/vote/choose-dapps/DappsList.vue
@@ -3,7 +3,7 @@
     <swiper
       class="swiper--voting-dapps"
       :slides-per-view="2"
-      :slides-per-group="4"
+      :slides-per-group="2"
       :space-between="8"
       :navigation="true"
       :grid="{
@@ -12,7 +12,7 @@
       :breakpoints="{
         '768': {
           slidesPerView: 3,
-          slidesPerGroup: 32,
+          slidesPerGroup: 3,
           grid: {
             rows: 3,
           },

diff --git a/src/staking-v3/hooks/usePeriodStats.ts b/src/staking-v3/hooks/usePeriodStats.ts
@@ -8,6 +8,7 @@ import { DappState, IDappStakingRepository, IDappStakingService } from '../logic
 import { PERIOD1_START_BLOCKS } from 'src/consts';
 import { useDappStaking } from './useDappStaking';
 import { useDataCalculations } from './useDataCalculations';
+import { ethers } from 'ethers';
 
 export type DappStatistics = {
   name: string;
@@ -86,7 +87,9 @@ export function usePeriodStats(period: Ref<number>) {
       dappStakingRepository.getCurrentEraInfo(block),
     ]);
     periodData.value = stats;
-    tvlRatio.value = 1 / Number(totalIssuance / periodInfo.totalLocked);
+    const issuance = Number(ethers.utils.formatEther(totalIssuance));
+    const locked = Number(ethers.utils.formatEther(periodInfo.totalLocked));
+    tvlRatio.value = locked / issuance;
   };
 
   watch(

diff --git a/src/v2/repositories/implementations/TokenApiRepository.ts b/src/v2/repositories/implementations/TokenApiRepository.ts
@@ -20,7 +20,13 @@ export class TokenApiRepository implements ITokenApiRepository {
     try {
       const url = `${TokenApiRepository.BaseUrl}/v3/${network}/dapps-staking/period-aggregated/${period}`;
       const response = await axios.get<PeriodData[]>(url);
-      return response.data;
+      return response.data.map((data) => {
+        return {
+          dappAddress: data.dappAddress,
+          stakeAmount: BigInt(data.stakeAmount),
+          rewardAmount: BigInt(data.rewardAmount),
+        };
+      });
     } catch (error) {
       return [];
     }