From f1834dda44e7b86d2561e319b86ae88ac41dfd48 Mon Sep 17 00:00:00 2001
From: Stas Leshchina <66851165+Sorizen@users.noreply.github.com>
Date: Mon, 19 Aug 2024 17:48:50 +0300
Subject: [PATCH] fix/prod build (#85)

* fixes for prod build

* fixes after review
---
 src/common/AppButton.vue                      |   2 +-
 src/common/AppTabs.vue                        |   2 +-
 src/common/InfoBar.vue                        |   2 +-
 src/common/InfoCard.vue                       |   4 +-
 src/common/InfoDashboard/index.vue            |  17 ++-
 src/composables/use-pool.ts                   | 117 +++++++++++-------
 src/forms/DepositForm.vue                     |   4 +-
 src/pages/HomePage/views/PublicPoolView.vue   |   2 +-
 .../Mor20Ecosystem/ProtocolCreationPage.vue   |   2 +
 src/styles/_app-colors.scss                   |   2 +
 src/styles/variables.scss                     |   2 +
 src/types/erc1967-proxy.types.ts              |   1 +
 12 files changed, 102 insertions(+), 55 deletions(-)

diff --git a/src/common/AppButton.vue b/src/common/AppButton.vue
index f23d7c9..80b9e87 100644
--- a/src/common/AppButton.vue
+++ b/src/common/AppButton.vue
@@ -390,7 +390,7 @@ $button-transition: var(--transition-duration-fast)
     --app-button-flat-text-focused: var(--primary-main);
     --app-button-flat-text-active: var(--primary-main);
 
-    --app-button-flat-border: #{toRem(1)} solid #494949;
+    --app-button-flat-border: #{toRem(1)} solid var(--border-tertiary-main);
     --app-button-flat-border-hover: #{toRem(1)} solid var(--primary-main);
     --app-button-flat-border-focused: var(--app-button-flat-border-hover);
     --app-button-flat-border-active: var(--app-button-flat-border-hover);
diff --git a/src/common/AppTabs.vue b/src/common/AppTabs.vue
index 346f97e..9b79636 100644
--- a/src/common/AppTabs.vue
+++ b/src/common/AppTabs.vue
@@ -54,7 +54,7 @@ const updateTab = (tab: Tab) => {
   display: grid;
   place-items: center;
   padding: toRem(16) toRem(24);
-  border: toRem(1) solid #494949;
+  border: toRem(1) solid var(--border-tertiary-main);
   color: $color;
   cursor: pointer;
   transition: var(--transition-duration-fast) var(--transition-timing-default);
diff --git a/src/common/InfoBar.vue b/src/common/InfoBar.vue
index 8fc00da..4b7336b 100644
--- a/src/common/InfoBar.vue
+++ b/src/common/InfoBar.vue
@@ -114,7 +114,7 @@ withDefaults(
   display: grid;
   grid-gap: toRem(8);
   padding-top: toRem(16);
-  border-top: toRem(2) solid #494949;
+  border-top: toRem(2) solid var(--border-tertiary-main);
 
   @include respond-to(medium) {
     margin-top: toRem(16);
diff --git a/src/common/InfoCard.vue b/src/common/InfoCard.vue
index 0c1230f..a24c061 100644
--- a/src/common/InfoCard.vue
+++ b/src/common/InfoCard.vue
@@ -163,7 +163,7 @@ withDefaults(
 .info-card__footer {
   display: flex;
   align-items: center;
-  border-top: toRem(1) solid #494949;
+  border-top: toRem(1) solid var(--border-tertiary-main);
 }
 
 .info-card .info-card__show-more-btn {
@@ -173,7 +173,7 @@ withDefaults(
 
 .info-card__edit-btn-wrp {
   flex-basis: toRem(111);
-  border-left: toRem(1) solid #494949;
+  border-left: toRem(1) solid var(--border-tertiary-main);
 }
 
 .info-card .info-card__edit-btn {
diff --git a/src/common/InfoDashboard/index.vue b/src/common/InfoDashboard/index.vue
index 63bcd59..267afe2 100644
--- a/src/common/InfoDashboard/index.vue
+++ b/src/common/InfoDashboard/index.vue
@@ -53,7 +53,11 @@
             />
           </div>
         </template>
-        <ul v-if="indicators?.length" class="info-dashboard__indicators">
+        <ul
+          v-if="indicators?.length"
+          class="info-dashboard__indicators"
+          :class="{ 'info-dashboard__indicators--border': isChartShown }"
+        >
           <li
             v-for="(indicator, idx) in indicators"
             :key="idx"
@@ -349,7 +353,7 @@ watch(
 
 .info-dashboard__app-chart-wrp {
   margin-top: toRem(16);
-  border-top: toRem(2) solid #494949;
+  border-top: toRem(2) solid var(--border-tertiary-main);
   width: 100%;
 }
 
@@ -365,12 +369,15 @@ watch(
 }
 
 .info-dashboard__indicators {
-  margin-top: toRem(16);
   width: 100%;
   display: grid;
   grid-gap: toRem(8);
-  padding-top: toRem(24);
-  border-top: toRem(2) solid #494949;
+
+  &--border {
+    margin-top: toRem(16);
+    padding-top: toRem(24);
+    border-top: toRem(2) solid var(--border-tertiary-main);
+  }
 }
 
 .info-dashboard__indicator {
diff --git a/src/composables/use-pool.ts b/src/composables/use-pool.ts
index d59dabc..36a06ec 100644
--- a/src/composables/use-pool.ts
+++ b/src/composables/use-pool.ts
@@ -15,6 +15,7 @@ import { errors } from '@/errors'
 const MULTIPLIER_SCALE = 21 //digits
 const REWARDS_DIVIDER = 10000
 
+// TODO: REFACTOR
 export const usePool = (poolId: Ref<number>) => {
   let _currentUserRewardUpdateIntervalId: NodeJS.Timeout
 
@@ -120,34 +121,44 @@ export const usePool = (poolId: Ref<number>) => {
     )
   }
 
-  const fetchPoolData = async (): Promise<Erc1967ProxyType.PoolData> => {
-    const poolDataResponses = await Promise.all([
-      erc1967ProxyContract.value.poolsData(poolId.value),
-      erc1967ProxyContract.value.pools(poolId.value),
-      erc1967ProxyContract.value.totalDepositedInPublicPools(),
-    ])
+  const fetchPoolData = async (): Promise<
+    Erc1967ProxyType.PoolData | Mor1967ProxyType.PoolData
+  > => {
+    const [poolsDataResponse, poolsResponse, totalDepositedInPublicPools] =
+      await Promise.all([
+        erc1967ProxyContract.value.poolsData(poolId.value),
+        erc1967ProxyContract.value.pools(poolId.value),
+        erc1967ProxyContract.value.totalDepositedInPublicPools(),
+      ])
 
-    // TODO: refactor
+    const isTotalVirtualDepositedDefined =
+      'totalVirtualDeposited' in poolsDataResponse
+    const totalDeposited =
+      totalDepositedInPublicPools ??
+      (isTotalVirtualDepositedDefined
+        ? (poolsDataResponse as unknown as Erc1967ProxyType.PoolData)
+            .totalVirtualDeposited
+        : ethers.BigNumber.from(0))
 
     return {
-      claimLockPeriod: poolDataResponses[1].claimLockPeriod,
-      decreaseInterval: poolDataResponses[1].decreaseInterval,
-      initialReward: poolDataResponses[1].initialReward,
-      isPublic: poolDataResponses[1].isPublic,
-      lastUpdate: poolDataResponses[0].lastUpdate,
-      minimalStake: poolDataResponses[1].minimalStake,
-      rate: poolDataResponses[0].rate,
-      payoutStart: poolDataResponses[1].payoutStart,
-      rewardDecrease: poolDataResponses[1].rewardDecrease,
-      totalDeposited:
-        poolDataResponses[2] ?? poolDataResponses[0].totalVirtualDeposited,
-      withdrawLockPeriod: poolDataResponses[1].withdrawLockPeriod,
-      withdrawLockPeriodAfterStake:
-        poolDataResponses[1].withdrawLockPeriodAfterStake,
-    }
+      claimLockPeriod: poolsResponse.claimLockPeriod,
+      decreaseInterval: poolsResponse.decreaseInterval,
+      initialReward: poolsResponse.initialReward,
+      isPublic: poolsResponse.isPublic,
+      lastUpdate: poolsDataResponse.lastUpdate,
+      minimalStake: poolsResponse.minimalStake,
+      payoutStart: poolsResponse.payoutStart,
+      rate: poolsDataResponse.rate,
+      rewardDecrease: poolsResponse.rewardDecrease,
+      totalDeposited,
+      withdrawLockPeriod: poolsResponse.withdrawLockPeriod,
+      withdrawLockPeriodAfterStake: poolsResponse.withdrawLockPeriodAfterStake,
+    } as Erc1967ProxyType.PoolData | Mor1967ProxyType.PoolData
   }
 
-  const fetchUserPoolData = async (): Promise<Erc1967ProxyType.UserData> => {
+  const fetchUserPoolData = async (): Promise<
+    Erc1967ProxyType.UserData | Mor1967ProxyType.UserData
+  > => {
     if (!web3ProvidersStore.provider.selectedAddress)
       throw new errors.UserAddressError()
 
@@ -156,15 +167,30 @@ export const usePool = (poolId: Ref<number>) => {
       poolId.value,
     )
 
+    const isClaimLockEndDefined = 'claimLockEnd' in response
+    const claimLockEnd = isClaimLockEndDefined
+      ? response.claimLockEnd
+      : ethers.BigNumber.from(0)
+
+    const isClaimLockStartDefined = 'claimLockStart' in response
+    const claimLockStart = isClaimLockStartDefined
+      ? response.claimLockStart
+      : ethers.BigNumber.from(0)
+
+    const isVirtualDepositedDefined = 'virtualDeposited' in response
+    const virtualDeposited = isVirtualDepositedDefined
+      ? response.virtualDeposited
+      : ethers.BigNumber.from(0)
+
     return {
-      claimLockEnd: response?.claimLockEnd ?? ethers.BigNumber.from(0),
-      claimLockStart: response?.claimLockStart ?? ethers.BigNumber.from(0),
+      claimLockEnd,
+      claimLockStart,
       deposited: response.deposited,
       lastStake: response.lastStake,
       pendingRewards: response.pendingRewards,
       rate: response.rate,
-      virtualDeposited: response?.virtualDeposited ?? ethers.BigNumber.from(0),
-    }
+      virtualDeposited,
+    } as Erc1967ProxyType.UserData | Mor1967ProxyType.UserData
   }
 
   const humanizeRewards = (reward: BigNumber) => {
@@ -176,19 +202,23 @@ export const usePool = (poolId: Ref<number>) => {
   const fetchExpectedMultiplier = async (lockPeriod: string) => {
     try {
       if (!lockPeriod) return
+
       const lockStart = new Time().isAfter(
         userPoolData.value?.claimLockStart?.toString(),
       )
         ? new Time().timestamp
         : userPoolData.value?.claimLockStart?.toString()
-      const multiplier =
-        //eslint-disable-next-line max-len
-        await erc1967ProxyContract.value?.getClaimLockPeriodMultiplier(
-          poolId.value,
-          lockStart,
-          lockPeriod || 0,
-        )
-      expectedRewardsMultiplier.value = humanizeRewards(multiplier)
+
+      if ('getClaimLockPeriodMultiplier' in erc1967ProxyContract.value) {
+        const multiplier =
+          await erc1967ProxyContract.value.getClaimLockPeriodMultiplier(
+            poolId.value,
+            lockStart || 0,
+            lockPeriod || 0,
+          )
+
+        expectedRewardsMultiplier.value = humanizeRewards(multiplier)
+      }
     } catch (error) {
       ErrorHandler.processWithoutFeedback(error)
     }
@@ -216,14 +246,15 @@ export const usePool = (poolId: Ref<number>) => {
     isUserDataUpdating.value = true
 
     try {
-      const response =
-        // eslint-disable-next-line max-len
-        await erc1967ProxyContract.value?.getCurrentUserMultiplier(
-          poolId.value,
-          web3ProvidersStore.provider.selectedAddress,
-        )
-
-      rewardsMultiplier.value = humanizeRewards(response)
+      if ('getCurrentUserMultiplier' in erc1967ProxyContract.value) {
+        const response =
+          await erc1967ProxyContract.value.getCurrentUserMultiplier(
+            poolId.value,
+            web3ProvidersStore.provider.selectedAddress,
+          )
+
+        rewardsMultiplier.value = humanizeRewards(response)
+      }
     } catch (e) {
       ErrorHandler.processWithoutFeedback(e)
     }
diff --git a/src/forms/DepositForm.vue b/src/forms/DepositForm.vue
index e18ae18..3e70e76 100644
--- a/src/forms/DepositForm.vue
+++ b/src/forms/DepositForm.vue
@@ -55,6 +55,7 @@
         </template>
       </input-field>
       <datetime-field
+        v-if="isMultiplierShown"
         v-model="form.lockPeriod"
         position="top"
         :placeholder="$t(`deposit-form.lock-period-placeholder`)"
@@ -256,11 +257,12 @@ const submit = async (action: ACTIONS): Promise<void> => {
       tx = await approveByCurrency(balanceOfForm.value.value.currency)
     } else {
       const amountInDecimals = parseUnits(form.amount, 'ether')
+
       tx =
         await web3ProvidersStore.erc1967ProxyContract.signerBased.value.stake(
           props.poolId,
           amountInDecimals,
-          form.lockPeriod || 0,
+          ...(isMultiplierShown.value ? [form.lockPeriod || 0] : []),
         )
       emit('stake-tx-sent')
     }
diff --git a/src/pages/HomePage/views/PublicPoolView.vue b/src/pages/HomePage/views/PublicPoolView.vue
index 6c857ae..c8e57bd 100644
--- a/src/pages/HomePage/views/PublicPoolView.vue
+++ b/src/pages/HomePage/views/PublicPoolView.vue
@@ -368,7 +368,7 @@ watch(
 <style lang="scss" scoped>
 .public-pool-view__bar-slot-wrp {
   margin-top: toRem(16);
-  border-top: toRem(2) solid #494949;
+  border-top: toRem(2) solid var(--border-tertiary-main);
   padding-top: toRem(30);
 
   @include respond-to(medium) {
diff --git a/src/pages/Mor20Ecosystem/ProtocolCreationPage.vue b/src/pages/Mor20Ecosystem/ProtocolCreationPage.vue
index 0db05c0..aca6089 100644
--- a/src/pages/Mor20Ecosystem/ProtocolCreationPage.vue
+++ b/src/pages/Mor20Ecosystem/ProtocolCreationPage.vue
@@ -227,6 +227,8 @@ watch(
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-height: 80vh;
+  overflow-y: auto;
 }
 
 .protocol-creation-page__modal-success-mark {
diff --git a/src/styles/_app-colors.scss b/src/styles/_app-colors.scss
index a3f1634..a3bea4c 100644
--- a/src/styles/_app-colors.scss
+++ b/src/styles/_app-colors.scss
@@ -78,5 +78,7 @@ $border-secondary-light: #e0e0ec;
 $border-secondary-main: #c4c4d0;
 $border-secondary-dark: #a9abb4;
 
+$border-tertiary-main: #494949;
+
 /* backdrop colors */
 $backdrop-modal: rgba(#000000, 0.5);
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 306c96c..1a16854 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -83,6 +83,8 @@
   --border-secondary-main: #{$border-secondary-main};
   --border-secondary-dark: #{$border-secondary-dark};
 
+  --border-tertiary-main: #{$border-tertiary-main};
+
   /* common colors */
   --backdrop-modal: #{$backdrop-modal};
 
diff --git a/src/types/erc1967-proxy.types.ts b/src/types/erc1967-proxy.types.ts
index 15c1d02..833618b 100644
--- a/src/types/erc1967-proxy.types.ts
+++ b/src/types/erc1967-proxy.types.ts
@@ -13,6 +13,7 @@ export type PoolData = {
   totalDeposited: BigNumber
   withdrawLockPeriod: BigNumber
   withdrawLockPeriodAfterStake: BigNumber
+  totalVirtualDeposited: BigNumber
 }
 
 export type UserData = {