Fixed calculating APY and render loading, when no data available

near · Mar 21, 2022 · 3d7892a · 3d7892a
1 parent 4e87421
commit 3d7892a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/packages/frontend/src/components/staking/components/ValidatorBox.js b/packages/frontend/src/components/staking/components/ValidatorBox.js
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Translate } from 'react-localize-redux';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { Mixpanel } from '../../../mixpanel/index';
 import { redirectTo } from '../../../redux/actions/account';
+import { getValidatorFarmData } from '../../../redux/actions/staking';
 import { selectFarmValidatorAPY } from '../../../redux/slices/staking';
 import { FARMING_VALIDATOR_VERSION, ValidatorVersion } from '../../../utils/constants';
 import Balance from '../../common/balance/Balance';
@@ -141,6 +142,12 @@ export default function ValidatorBox({
     const dispatch = useDispatch();
     const farmAPY = useSelector(state => selectFarmValidatorAPY(state, {validatorId: validator?.accountId}));
     const { accountId: validatorId, active } = validator;
+    const isFarmingValidator = validator.version === ValidatorVersion[FARMING_VALIDATOR_VERSION];
+
+    useEffect(() => {
+        if (!isFarmingValidator) return;
+        dispatch(getValidatorFarmData(validatorId));
+    }, []);
 
     const fee = validator.fee && validator.fee.percentage;
     const cta = amount ? (
@@ -161,7 +168,7 @@ export default function ValidatorBox({
             dispatch(redirectTo(`/staking/${validatorId}${stakeAction ? `/${stakeAction}` : ''}`));
         }
     };
-    const isFarmingValidator = validator.version === ValidatorVersion[FARMING_VALIDATOR_VERSION];
+
     return (
         <Container
             className='validator-box'
@@ -184,7 +191,11 @@ export default function ValidatorBox({
                         { 
                             isFarmingValidator && <>
                                 <span><Translate id='staking.validator.apy'/>&nbsp;</span>
-                                <span>{farmAPY}%&nbsp;-&nbsp;</span>
+                                {farmAPY === null 
+                                    ? <span className="animated-dots" style={{width: 16}}/>
+                                    : <span>{farmAPY}</span>
+                                }
+                                <span>%&nbsp;-&nbsp;</span>               
                             </>
                         }
                         <span>{fee}% <Translate id='staking.validatorBox.fee' /> -&nbsp;</span>

diff --git a/packages/frontend/src/redux/actions/staking.js b/packages/frontend/src/redux/actions/staking.js
@@ -538,7 +538,6 @@ export const getValidatorFarmData = (validatorId) => async (dispatch, getState)
     const accountId = selectStakingMainAccountId(getState());
     const currentAccountId = selectStakingCurrentAccountAccountId(getState());
     const isLockup = currentAccountId !== accountId;
-
     const account_id = isLockup ? selectStakingLockupId(getState()) : accountId;
 
     const list = await Promise.all(farms.map(({ token_id, farm_id }) => {

diff --git a/packages/frontend/src/redux/slices/staking/index.js b/packages/frontend/src/redux/slices/staking/index.js
@@ -65,8 +65,7 @@ export const selectValidatorFarmDataByValidatorID = createSelector(
 export const selectFarmValidatorAPY = createSelector(
     [selectValidatorFarmDataByValidatorID, selectTokensFiatValueUSD],
     (farmData, tokenPrices) => {
-        if (!farmData.poolSummary || !tokenPrices) return 0;
-
+        if (!farmData.poolSummary || !tokenPrices) return null;
         return calculateAPY(farmData.poolSummary, tokenPrices);
     }
 );
diff --git a/packages/frontend/src/utils/staking.js b/packages/frontend/src/utils/staking.js
@@ -125,6 +125,6 @@ export const calculateAPY = (poolSummary, tokenPrices) => {
     }
     catch (e) {
         console.error('Error during calculating APY', e);
-        return 0;
+        return '-';
     }
 };