From 5ed77259c78692b35459fef47bffd1bb1f7f9dcf Mon Sep 17 00:00:00 2001
From: Stas Leshchina <66851165+Sorizen@users.noreply.github.com>
Date: Wed, 13 Nov 2024 20:45:42 +0200
Subject: [PATCH] fix/referral program input in deposit form (#120)

* referral program starting

* fixes after review

* ref page

* referral page

* env update

* ref input fixes

* fix referee input
---
 src/common/Pagination.vue                  | 33 ++++++++++++++++++++++
 src/forms/DepositForm.vue                  | 13 +++++++--
 src/pages/Referrals/RefereesList/index.vue |  7 +++++
 src/pages/Referrals/ReferralInfoCard.vue   | 10 +++----
 src/pages/Referrals/ReferralSystemInfo.vue |  2 +-
 src/pages/Referrals/ReferralSystemRate.vue |  2 +-
 6 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/src/common/Pagination.vue b/src/common/Pagination.vue
index 8e65a45d..7454c393 100644
--- a/src/common/Pagination.vue
+++ b/src/common/Pagination.vue
@@ -9,6 +9,7 @@ import { NavButton, Paginate } from '@brutforce/vue3-paginate'
     wrapper-classes="pagination__list"
     dot-classes="pagination__dots"
     page-classes="pagination__page-button"
+    active-page-classes="pagination__page-button--active"
     :per-page="1"
     :total-pages="25"
     :current-page="1"
@@ -60,6 +61,10 @@ import { NavButton, Paginate } from '@brutforce/vue3-paginate'
     width: toRem(32);
     height: toRem(32);
     color: var(--text-secondary-light);
+
+    svg {
+      max-width: toRem(11);
+    }
   }
 
   :deep(.pagination__page-button) {
@@ -67,6 +72,22 @@ import { NavButton, Paginate } from '@brutforce/vue3-paginate'
     height: toRem(32);
     background: var(--background-secondary-main);
     color: var(--text-secondary-light);
+    font-weight: 500;
+    font-family: var(--app-font-family);
+    transition: opacity 0.2s ease-in-out;
+
+    &:not([disabled]):hover {
+      opacity: 0.5;
+    }
+  }
+
+  :deep(.pagination__page-button--active) {
+    background: linear-gradient(
+      90deg,
+      var(--primary-main) -10.86%,
+      var(--primary-dark) 108.88%
+    );
+    color: var(--text-primary-dark);
   }
 
   :deep(.pagination__navigation-button) {
@@ -75,6 +96,18 @@ import { NavButton, Paginate } from '@brutforce/vue3-paginate'
     background: var(--background-secondary-main);
     color: var(--text-secondary-light);
     transform: rotate(90deg);
+    transition: opacity 0.2s ease-in-out;
+
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      color: var(--text-secondary-light);
+      background: var(--background-secondary-main);
+    }
+
+    &:not([disabled]):hover {
+      opacity: 0.5;
+    }
   }
 
   :deep(.pagination__navigation-button--next) {
diff --git a/src/forms/DepositForm.vue b/src/forms/DepositForm.vue
index 4523c5e2..e3320155 100644
--- a/src/forms/DepositForm.vue
+++ b/src/forms/DepositForm.vue
@@ -315,10 +315,17 @@ watch(
 watch(
   [() => route.query?.referrer, userPoolData],
   async () => {
+    if (route.query?.referrer) {
+      form.referrer = route.query.referrer
+      touchField('referrer')
+      return
+    }
+    const contractReferrer = (userPoolData.value as Erc1967ProxyType.UserData)
+      ?.referrer
     form.referrer =
-      !route.query?.referrer && userPoolData.value
-        ? (userPoolData.value as Erc1967ProxyType.UserData)?.referrer
-        : route.query.referrer
+      contractReferrer === ethers.constants.AddressZero
+        ? config.DEFAULT_REFEREE
+        : contractReferrer
     touchField('referrer')
   },
   { immediate: true },
diff --git a/src/pages/Referrals/RefereesList/index.vue b/src/pages/Referrals/RefereesList/index.vue
index db06a844..4489e9f6 100644
--- a/src/pages/Referrals/RefereesList/index.vue
+++ b/src/pages/Referrals/RefereesList/index.vue
@@ -66,4 +66,11 @@ const chooseSortingOrder = (order: SORTING_ORDER) => {
   flex-direction: column;
   gap: toRem(10);
 }
+
+.referees-list__pagination-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: toRem(24);
+}
 </style>
diff --git a/src/pages/Referrals/ReferralInfoCard.vue b/src/pages/Referrals/ReferralInfoCard.vue
index 4a6814d9..4966fd48 100644
--- a/src/pages/Referrals/ReferralInfoCard.vue
+++ b/src/pages/Referrals/ReferralInfoCard.vue
@@ -7,7 +7,7 @@
       {{ $t('referral-info-card.deposited-text') }}
     </p>
     <p class="referral-info-card__deposited-value">
-      {{ depositedValueTest }}
+      {{ depositedValueText }}
     </p>
     <h5 class="referral-info-card__percent">
       {{ `${percent}%` }}
@@ -35,22 +35,22 @@ const web3ProviderStore = useWeb3ProvidersStore()
 
 const { t } = useI18n()
 
-const depositedValueTest = computed(() => {
+const depositedValueText = computed(() => {
   if (!props.toDeposited) {
     return t('referral-info-card.to-deposited-text', {
       from: props.fromDeposited,
-      symbol: web3ProviderStore.rewardsTokenSymbol,
+      symbol: web3ProviderStore.depositTokenSymbol,
     })
   }
   return props.fromDeposited
     ? t('referral-info-card.from-to-deposited-text', {
         from: props.fromDeposited,
         to: props.toDeposited,
-        symbol: web3ProviderStore.rewardsTokenSymbol,
+        symbol: web3ProviderStore.depositTokenSymbol,
       })
     : t('referral-info-card.less-deposited-text', {
         to: props.toDeposited,
-        symbol: web3ProviderStore.rewardsTokenSymbol,
+        symbol: web3ProviderStore.depositTokenSymbol,
       })
 })
 </script>
diff --git a/src/pages/Referrals/ReferralSystemInfo.vue b/src/pages/Referrals/ReferralSystemInfo.vue
index 2f372fa8..b675dec3 100644
--- a/src/pages/Referrals/ReferralSystemInfo.vue
+++ b/src/pages/Referrals/ReferralSystemInfo.vue
@@ -32,7 +32,7 @@
         />
       </div>
     </div>
-    <!--TODO: HIDDEN BEFORE GRAPH-->
+    <!--TODO: UNCOMMENT WHEN REF GRAPH WILL BE READY-->
     <referees-list v-if="false" class="referral-system-info__referees-list" />
   </div>
 </template>
diff --git a/src/pages/Referrals/ReferralSystemRate.vue b/src/pages/Referrals/ReferralSystemRate.vue
index 92172068..83f6839c 100644
--- a/src/pages/Referrals/ReferralSystemRate.vue
+++ b/src/pages/Referrals/ReferralSystemRate.vue
@@ -35,7 +35,7 @@
           }}
         </span>
       </div>
-      <!--TODO: UNCOMMENT WHEN GRAPH WILL BE READY-->
+      <!--TODO: UNCOMMENT WHEN REF GRAPH WILL BE READY-->
       <app-button
         v-if="false"
         class="referral-system-rate__button"