Merge pull request #552 from hermeznetwork/fix-rewards-for-non-eligib…

…le-users Fix rewards for non eligible users
hermeznetwork · Jun 21, 2021 · c2ae483 · c2ae483
2 parents 97e49fa + 80a4290
commit c2ae483
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 27 deletions.
diff --git a/src/utils/rewards.js b/src/utils/rewards.js
@@ -13,6 +13,15 @@ function getFormattedEarnedReward (earnedReward) {
   }
 }
 
+/**
+ * Formats the percentage of a reward
+ * @param {String} earnedReward - Percentage of the reward
+ * @returns - Formatted reward percentage
+ */
+function getFormattedPercentage (percentage) {
+  return Number(percentage).toFixed(2)
+}
+
 /**
  * Checks if a reward has started or not
  * @param {Object} reward - Reward information
@@ -25,4 +34,8 @@ function hasRewardStarted (reward) {
   return initRewardTime <= currentTime
 }
 
-export { getFormattedEarnedReward, hasRewardStarted }
+export {
+  getFormattedEarnedReward,
+  getFormattedPercentage,
+  hasRewardStarted
+}
diff --git a/src/views/my-account/components/rewards-card/rewards-card.styles.js b/src/views/my-account/components/rewards-card/rewards-card.styles.js
@@ -5,7 +5,6 @@ const useRewardsCardStyles = createUseStyles((theme) => ({
     padding: `${theme.spacing(2)}px ${theme.spacing(2.5)}px ${theme.spacing(2.5)}px ${theme.spacing(4)}px `,
     borderRadius: theme.spacing(2),
     backgroundColor: theme.palette.black,
-    color: theme.palette.white,
     width: '100%'
   },
   cardHeader: {
@@ -14,7 +13,9 @@ const useRewardsCardStyles = createUseStyles((theme) => ({
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingBottom: theme.spacing(1.25),
-    marginBottom: theme.spacing(1)
+    marginBottom: theme.spacing(1),
+    color: theme.palette.grey.light,
+    minHeight: 44
   },
   cardHeading: {
     [theme.breakpoints.upSm]: {

diff --git a/src/views/my-account/components/rewards-card/rewards-card.view.jsx b/src/views/my-account/components/rewards-card/rewards-card.view.jsx
@@ -2,9 +2,10 @@ import React from 'react'
 
 import useRewardsCardStyles from './rewards-card.styles'
 import { CurrencySymbol, getTokenAmountInPreferredCurrency } from '../../../../utils/currencies.js'
-import { getFormattedEarnedReward } from '../../../../utils/rewards'
+import { getFormattedEarnedReward, getFormattedPercentage } from '../../../../utils/rewards'
 
 function RewardsCard ({
+  rewardSidenav,
   rewardTask,
   earnedRewardTask,
   rewardPercentageTask,
@@ -66,9 +67,13 @@ function RewardsCard ({
     <div className={classes.root}>
       <div className={classes.cardHeader}>
         <h3 className={classes.cardHeading}>Your earnings</h3>
-        <button className={classes.moreInfoButton} onClick={onOpenRewardsSidenav}>
-          More info
-        </button>
+        {
+          rewardSidenav.status === 'closed' && (
+            <button className={classes.moreInfoButton} onClick={onOpenRewardsSidenav}>
+              More info
+            </button>
+          )
+        }
       </div>
       {
         (() => {
@@ -93,15 +98,25 @@ function RewardsCard ({
                 <p className={classes.rewardText}>
                   Thank you for participating in the Hermez reward program.
                 </p>
-                <p className={classes.rewardText}>
-                  Your total reward is {getFormattedEarnedReward(earnedRewardTask.data)} HEZ ({CurrencySymbol[preferredCurrency].symbol}{getRewardAmountInPreferredCurrency(earnedRewardTask.data)})
-                </p>
+                {
+                  accountEligibilityTask.data
+                    ? (
+                      <p className={classes.rewardText}>
+                        Your total reward is {getFormattedEarnedReward(earnedRewardTask.data)} HEZ ({CurrencySymbol[preferredCurrency].symbol}{getRewardAmountInPreferredCurrency(earnedRewardTask.data)})
+                      </p>
+                      )
+                    : (
+                      <p className={classes.rewardText}>
+                        Your total reward is 0.00 HEZ ({CurrencySymbol[preferredCurrency].symbol}0.00).
+                      </p>
+                      )
+                }
               </>
               )
             : (
               <>
                 <p className={classes.rewardText}>
-                  Reward during the program is <span className={classes.rewardPercentage}>{rewardPercentageTask.data || '--'}%</span>.&nbsp;
+                  Reward during the program is <span className={classes.rewardPercentage}>{getFormattedPercentage(rewardPercentageTask.data) || '--'}%</span>.&nbsp;
                   {
                     accountEligibilityTask.data
                       ? (

diff --git a/src/views/my-account/my-account.view.jsx b/src/views/my-account/my-account.view.jsx
@@ -100,6 +100,7 @@ function MyAccount ({
             hasRewardStarted(rewards.rewardTask.data) && (
               <div className={classes.rewardsCard}>
                 <RewardsCard
+                  rewardSidenav={rewards.sidenav}
                   rewardTask={rewards.rewardTask}
                   earnedRewardTask={rewards.earnedRewardTask}
                   rewardPercentageTask={rewards.rewardPercentageTask}

diff --git a/src/views/shared/rewards-sidenav/rewards-sidenav.view.jsx b/src/views/shared/rewards-sidenav/rewards-sidenav.view.jsx
@@ -11,7 +11,7 @@ import heztoken from '../../../images/heztoken.svg'
 import Sidenav from '../sidenav/sidenav.view'
 import * as date from '../../../utils/date'
 import { getTokenAmountInPreferredCurrency, CurrencySymbol } from '../../../utils/currencies'
-import { getFormattedEarnedReward } from '../../../utils/rewards'
+import { getFormattedEarnedReward, getFormattedPercentage } from '../../../utils/rewards'
 
 function RewardsSidenav ({
   rewardTask,
@@ -138,10 +138,21 @@ function RewardsSidenav ({
                     <p className={classes.rewardTitle}>
                       Your total reward
                     </p>
-                    <p className={classes.reward}>
-                      {getFormattedEarnedReward(earnedRewardTask.data)} HEZ
-                      (${getRewardAmountInPreferredCurrency(earnedRewardTask.data)})
-                    </p>
+                    {
+                      accountEligibilityTask.data
+                        ? (
+                          <p className={classes.reward}>
+                            {getFormattedEarnedReward(earnedRewardTask.data)} HEZ
+                            (${getRewardAmountInPreferredCurrency(earnedRewardTask.data)})
+                          </p>
+                          )
+                        : (
+                          <p className={classes.reward}>
+                            0.00 HEZ
+                            ({CurrencySymbol[preferredCurrency].symbol}0.00)
+                          </p>
+                          )
+                    }
                   </div>
                 </div>
               </>
@@ -177,7 +188,7 @@ function RewardsSidenav ({
                   <div className={classes.rewardGroup}>
                     <p className={classes.rewardTitle}>Reward during the program</p>
                     <p className={`${classes.reward} ${classes.rewardPercentage}`}>
-                      {rewardPercentageTask.data ? rewardPercentageTask.data : '--'}%
+                      {rewardPercentageTask.data ? getFormattedPercentage(rewardPercentageTask.data) : '--'}%
                     </p>
                   </div>
                   <div className={classes.rewardGroup}>
@@ -201,16 +212,12 @@ function RewardsSidenav ({
                     }
                   </div>
                 </div>
-                {
-                  accountEligibilityTask.data && (
-                    <div className={classes.infoTextWrapper}>
-                      <InfoGreyIcon className={classes.infoIcon} />
-                      <p className={classes.infoText}>
-                        Values are estimated and updated once per day. You will receive your reward at the end of the program.
-                      </p>
-                    </div>
-                  )
-                }
+                <div className={classes.infoTextWrapper}>
+                  <InfoGreyIcon className={classes.infoIcon} />
+                  <p className={classes.infoText}>
+                    Values are estimated and updated once per day. You will receive your reward at the end of the program.
+                  </p>
+                </div>
                 <a
                   className={classes.moreInfoLink}
                   href={AIRDROP_MORE_INFO_URL}