From 4b2c07c153fc996a84726ced4e34238bec97f6d4 Mon Sep 17 00:00:00 2001
From: Stas Leshchina <66851165+Sorizen@users.noreply.github.com>
Date: Fri, 15 Nov 2024 18:22:40 +0200
Subject: [PATCH] fix/total claimed calculation (#122)

* referral program starting

* fixes after review

* ref page

* referral page

* env update

* ref input fixes

* fix referee input

* claim ref modal

* build fixes

* fixes after review

* fixes for total claimed
---
 src/common/InfoDashboard/helpers.ts        | 46 ++++++++++++++++++++++
 src/composables/use-referral-info.ts       | 20 +++++++++-
 src/pages/Referrals/RefereesList/index.vue | 18 +++++++--
 src/pages/Referrals/ReferralSystemRate.vue | 10 +++--
 src/types/referral.types.ts                |  5 +++
 5 files changed, 91 insertions(+), 8 deletions(-)

diff --git a/src/common/InfoDashboard/helpers.ts b/src/common/InfoDashboard/helpers.ts
index d3bee86b..e5e60a9e 100644
--- a/src/common/InfoDashboard/helpers.ts
+++ b/src/common/InfoDashboard/helpers.ts
@@ -9,6 +9,7 @@ import {
   ChartData,
   UserReferral,
   UserReferralDepositedAmount,
+  ReferrerTotalClaimed,
 } from '@/types'
 import { SORTING_ORDER } from '@/enums'
 
@@ -50,6 +51,35 @@ export async function fetchSpecificUserReferrers(
   return data.userReferrers
 }
 
+export async function fetchReferrersTotalClaimed(
+  poolId: string | number,
+  user: string,
+  type: NETWORK_IDS,
+): Promise<ReferrerTotalClaimed[]> {
+  const queryPattern = _generateReferrersTotalClaimedPattern(
+    String(poolId),
+    user.toLowerCase(),
+  )
+
+  const apolloClient =
+    type === NETWORK_IDS.mainnet
+      ? config.mainnetApolloClient
+      : config.testnetApolloClient
+
+  const query = gql`
+    query GetReferrersTotalClaimed {
+      ${queryPattern}
+    }
+  `
+
+  const { data } = await apolloClient.query({
+    query,
+    variables: {},
+  })
+
+  return data.referrers
+}
+
 export async function fetchDepositedAmountUserReferrers(
   poolId: string | number,
   referrer: string,
@@ -354,3 +384,19 @@ function _generateDepositAmountUserReferrersPattern(
     }
   `
 }
+
+function _generateReferrersTotalClaimedPattern(
+  poolId: string,
+  user: string,
+): string {
+  return `
+    referrers(
+      where: {
+        user: "${user}",
+        poolId: "${poolId}"
+      }
+    ) {
+      totalClaimed
+    }
+  `
+}
diff --git a/src/composables/use-referral-info.ts b/src/composables/use-referral-info.ts
index d8032ac1..4e0f95f1 100644
--- a/src/composables/use-referral-info.ts
+++ b/src/composables/use-referral-info.ts
@@ -7,6 +7,7 @@ import {
 } from '@/types'
 import {
   fetchDepositedAmountUserReferrers,
+  fetchReferrersTotalClaimed,
   fetchSpecificUserReferrers,
 } from '@/common/InfoDashboard/helpers'
 import { useRoute } from 'vue-router'
@@ -86,18 +87,35 @@ export const useReferralInfo = (poolId: number) => {
     return resultIndex
   }
 
+  const getTotalClaimedTokens = async (
+    userAddress: string,
+  ): Promise<BigNumber> => {
+    const data = await fetchReferrersTotalClaimed(
+      poolId,
+      userAddress,
+      route.query.network as NETWORK_IDS,
+    )
+
+    return data.reduce((acc, item) => {
+      acc = acc.add(item.totalClaimed)
+      return acc
+    }, BigNumber.from(0))
+  }
+
   const getRefData = async (userAddress: string): Promise<ReferralData> => {
-    const [currentReward, multiplier, refData, depositedAmount] =
+    const [currentReward, multiplier, refData, depositedAmount, totalClaimed] =
       await Promise.all([
         getCurrentReferrerReward(userAddress),
         getReferrerMultiplier(userAddress),
         getReferrersData(userAddress),
         getDepositedAmountByUser(userAddress),
+        getTotalClaimedTokens(userAddress),
       ])
 
     const foundTier = findTierIndex(refData.amountStaked)
 
     return {
+      totalClaimed,
       depositedAmount,
       currentReward,
       multiplier,
diff --git a/src/pages/Referrals/RefereesList/index.vue b/src/pages/Referrals/RefereesList/index.vue
index 1b422b1c..a4b4b8f4 100644
--- a/src/pages/Referrals/RefereesList/index.vue
+++ b/src/pages/Referrals/RefereesList/index.vue
@@ -8,7 +8,10 @@
         :sorting="sortingOrder"
         @sort="chooseSortingOrder"
       />
-      <div class="referees-list__users-wrapper">
+      <div
+        class="referees-list__users-wrapper"
+        :class="{ 'referees-list__users-wrapper--small': !isPaginationShown }"
+      >
         <template v-if="isLoaded">
           <error-message
             v-if="isLoadFailed"
@@ -25,7 +28,10 @@
                 :deposited-amount="humanizeDepositedAmount(user.amount)"
               />
             </div>
-            <div class="referees-list__pagination-wrapper">
+            <div
+              v-if="isPaginationShown"
+              class="referees-list__pagination-wrapper"
+            >
               <pagination
                 v-model:current-page="currentPage"
                 :total-items="refsCount"
@@ -40,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import RefereeListItem from './RefereeListItem.vue'
 import RefereesListNavigation from './RefereesListNavigation.vue'
 import { SORTING_ORDER } from '@/enums'
@@ -67,6 +73,8 @@ const isLoadFailed = ref(false)
 const sortingOrder = ref(SORTING_ORDER.none)
 const usersList = ref<UserReferral[]>([])
 
+const isPaginationShown = computed(() => refsCount > DEFAULT_PAGE_LIMIT)
+
 const chooseSortingOrder = (order: SORTING_ORDER) => {
   if (sortingOrder.value === order) {
     sortingOrder.value = SORTING_ORDER.none
@@ -150,6 +158,10 @@ watch(
   gap: toRem(10);
   min-height: toRem(410);
   position: relative;
+
+  &--small {
+    min-height: fit-content;
+  }
 }
 
 .referees-list__system-message {
diff --git a/src/pages/Referrals/ReferralSystemRate.vue b/src/pages/Referrals/ReferralSystemRate.vue
index 9caeb322..f0e95a81 100644
--- a/src/pages/Referrals/ReferralSystemRate.vue
+++ b/src/pages/Referrals/ReferralSystemRate.vue
@@ -43,7 +43,7 @@
             symbol: web3ProvidersStore.rewardsTokenSymbol,
           })
         "
-        :disabled="!availableToClaim"
+        :disabled="!Boolean(availableToClaim)"
         @click="emit('claim-ref-bonus')"
       />
     </div>
@@ -84,7 +84,9 @@ const availableToClaim = computed(() =>
 )
 
 const isClaimButtonHidden = computed(
-  () => route.query.user && route.query.user !== web3ProvidersStore.address,
+  () =>
+    Boolean(route.query.user) &&
+    route.query.user !== web3ProvidersStore.address,
 )
 
 const info = computed(() => [
@@ -112,10 +114,10 @@ const info = computed(() => [
       symbol: web3ProvidersStore.rewardsTokenSymbol,
     }),
     value: `${
-      props.referralData?.currentReward
+      props.referralData?.totalClaimed
         ? parseFloat(
             parseFloat(
-              ethers.utils.formatUnits(props.referralData?.currentReward),
+              ethers.utils.formatUnits(props.referralData?.totalClaimed),
             ).toFixed(ROUND_DIGITS),
           )
         : 0
diff --git a/src/types/referral.types.ts b/src/types/referral.types.ts
index 50da8564..7d5ae448 100644
--- a/src/types/referral.types.ts
+++ b/src/types/referral.types.ts
@@ -3,6 +3,7 @@ import { ethers } from 'ethers'
 export type ReferralData = {
   tier: number | string
   currentReward: ethers.BigNumber
+  totalClaimed: ethers.BigNumber
   multiplier: ethers.BigNumber
   amountStaked: ethers.BigNumber
   virtualAmountStaked: ethers.BigNumber
@@ -22,3 +23,7 @@ export type UserReferral = {
 export type UserReferralDepositedAmount = {
   amount: string
 }
+
+export type ReferrerTotalClaimed = {
+  totalClaimed: string
+}