From ef0c8a465a22d912c6582e10d9d79a9c733ba82d Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Fri, 14 Jun 2024 12:03:11 +0200
Subject: [PATCH] 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
---
 src/i18n/en-US/index.ts                                   | 2 +-
 src/staking-v3/components/PeriodStats.vue                 | 6 +++---
 src/staking-v3/components/vote/choose-dapps/DappsList.vue | 4 ++--
 src/staking-v3/hooks/usePeriodStats.ts                    | 5 ++++-
 src/v2/repositories/implementations/TokenApiRepository.ts | 8 +++++++-
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 721080ba2..f6fd56140 100644
--- 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
index e36e805d2..2d655bcfb 100644
--- 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
index cdf97c70b..35afedc3e 100644
--- 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
index 36e7a0b54..ae1feebed 100644
--- 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
index 2928a4486..82280b3aa 100644
--- 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 [];
     }