apr integration, unbonding tokens info. (#233)

SrikanthSoparla · web-flow · commit 93024bb6a292 · 2025-06-19T21:15:48.000+05:30
diff --git a/src/actions/stake.js b/src/actions/stake.js
@@ -45,6 +45,7 @@ import {
 } from '../constants/stake';
 import Axios from 'axios';
 import {
+    APR_PARAMETERS_URL,
     GENESIS_VALIDATORS_LIST_URL,
     getDelegatedValidatorsURL,
     getUnBondingValidatorsURL,
@@ -546,11 +547,11 @@ const fetchAPRInProgress = () => {
     };
 };
 
-export const fetchAPRSuccess = (nominalAPR, actualAPR) => {
+export const fetchAPRSuccess = (apr, result) => {
     return {
         type: APR_FETCH_SUCCESS,
-        nominalAPR,
-        actualAPR,
+        apr,
+        result,
     };
 };
 
@@ -561,37 +562,33 @@ const fetchAPRError = (message) => {
     };
 };
 
-export const fetchAPR = () => (dispatch) => {
+export const fetchAPR = (cb) => (dispatch) => {
     dispatch(fetchAPRInProgress());
-    (async () => {
-        try {
-            const apiUrl = config.REST_URL;
-            const lcdApi = axios.create({
-                baseURL: apiUrl,
-                headers: {
-                    'Content-Type': 'application/json; charset=utf-8',
-                    Accept: 'application/json',
-                },
-                timeout: 10000,
-            });
-
-            const params = await getParams(lcdApi);
-            const blocksYearReal = await getBlocksPerYearReal(lcdApi);
-            const nominalAPR = calculateNominalAPR(params);
-            const actualAPR = calculateRealAPR(params, nominalAPR, blocksYearReal);
 
-            dispatch(fetchAPRSuccess((nominalAPR * 100), (actualAPR * 100)));
-        } catch (error) {
+    Axios.get(APR_PARAMETERS_URL, {
+        headers: {
+            Accept: 'application/json, text/plain, */*',
+        },
+    })
+        .then((result) => {
+            const apr = result?.data?.apr && Number(result.data.apr) * 100 ;
+            dispatch(fetchAPRSuccess(apr, result));
+            if (cb) {
+                cb(apr, result);
+            }
+        })
+        .catch((error) => {
             dispatch(fetchAPRError(
                 error.response &&
                 error.response.data &&
                 error.response.data.message
                     ? error.response.data.message
-                    : error,
+                    : 'Failed!',
             ));
-            return null;
-        }
-    })();
+            if (cb) {
+                cb(null);
+            }
+        });
 };
 
 export const selectMultiValidators = (value) => {
diff --git a/src/assets/userDetails/unstake.png b/src/assets/userDetails/unstake.png
diff --git a/src/constants/url.js b/src/constants/url.js
@@ -18,6 +18,7 @@ export const urlFetchRevealedPubkey = (address) => `${REST_URL}/api/v1/revealed-
 export const VALIDATORS_LIST_URL = () => `${REST_URL}/api/v1/pos/validator/all?state=consensus`;
 export const GENESIS_VALIDATORS_LIST_URL = 'https://namada.info/shielded-expedition.88f17d1d14/output/genesis_tm_address_to_alias.json';
 export const INACTIVE_VALIDATORS_URL = `${REST_URL}/api/v1/pos/validator/all?state=belowCapacity&state=belowThreshold&state=inactive&state=jailed&state=unknown`;
+export const APR_PARAMETERS_URL = `${REST_URL}/api/v1/chain/parameters`;
 export const INACTIVE_VALIDATORS_UNBONDING_URL = `${REST_URL}/cosmos/staking/v1beta1/validators?pagination.limit=1000&status=BOND_STATUS_UNBONDING`;
 export const getValidatorURL = (address) => `${REST_URL}/cosmos/staking/v1beta1/validators/${address}`;
 export const PROPOSALS_LIST_URL = `${REST_URL}/api/v1/gov/proposal/all`;
diff --git a/src/containers/Home/TokenDetails/index.css b/src/containers/Home/TokenDetails/index.css
@@ -28,11 +28,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 210px;
     padding: 10px 20px;
-    margin: 10px 0;
-    width: 230px;
-    padding: 10px 40px;
-    height: 80px;
+    height: 60px;
     margin: 10px auto;
 }
 
diff --git a/src/containers/Home/TokenDetails/index.js b/src/containers/Home/TokenDetails/index.js
@@ -5,7 +5,7 @@ import variables from '../../../utils/variables';
 import totalTokens from '../../../assets/userDetails/totalTokens.png';
 import stakedTokens from '../../../assets/userDetails/stakedTokens.png';
 import NamadaLogo from '../../../assets/masp/namada_logo.svg';
-// import unStake from '../../../assets/userDetails/unstake.png';
+import unStake from '../../../assets/userDetails/unstake.png';
 import rewardsIcon from '../../../assets/userDetails/rewards.svg';
 import { connect } from 'react-redux';
 import StakeTokensButton from './StakeTokensButton';
@@ -46,32 +46,13 @@ const TokenDetails = (props) => {
         return null;
     });
 
-    // let shieldedBalance = null;
-    // props.shieldedBalance && props.shieldedBalance.length && props.shieldedBalance.map((val) => {
-    //     if (val && val.length) {
-    //         val.map((value) => {
-    //             if (value === config.TOKEN_ADDRESS) {
-    //                 shieldedBalance = val[1];
-    //             }
-    //         });
-    //     }
-
-    //     return null;
-    // });
-
     const available = balance && balance / 10 ** config.COIN_DECIMALS;
-    // const shieldedAvailable = shieldedBalance && shieldedBalance / 10 ** config.COIN_DECIMALS;
-    let unStaked = 0;
-    props.unBondingDelegations && props.unBondingDelegations.length &&
-    props.unBondingDelegations.map((delegation) => {
-        delegation.entries && delegation.entries.length &&
-        delegation.entries.map((entry) => {
-            unStaked = unStaked + Number(entry.balance);
-
-            return null;
-        });
-        return null;
-    });
+    let unStaked = props.unBondingDelegations && props.unBondingDelegations.reduce((accumulator, currentValue) => {
+        if (currentValue && currentValue.minDenomAmount) {
+            return accumulator + Number(currentValue.minDenomAmount);
+        }
+    }, 0);
+    unStaked = unStaked && unStaked / 10 ** config.COIN_DECIMALS;
 
     // const gasValue = (gas.claim_reward + gas.delegate) * config.GAS_PRICE_STEP_AVERAGE;
     let rewards = props.rewards && props.rewards.length &&
@@ -82,8 +63,6 @@ const TokenDetails = (props) => {
         }, 0);
     rewards = rewards ? rewards / 10 ** config.COIN_DECIMALS : 0;
 
-    const shieldedRewards = props.shieldedRewards && props.shieldedRewards / 10 ** config.COIN_DECIMALS;
-
     const handleTransfer = () => {
         const value = {
             name: 'Transparent Namada',
@@ -129,13 +108,6 @@ const TokenDetails = (props) => {
                     <StakeTokensButton/>
                 </div>
             </div>
-            {/* <div className="chip_info">
-                <p>{variables[props.lang]['shielded_available_tokens']}</p>
-                <div className="chip">
-                    <img alt="available tokens" src={totalTokens}/>
-                    <p>{shieldedAvailable || 0}</p>
-                </div>
-            </div> */}
             <div className="chip_info">
                 <p>{variables[props.lang]['staked_tokens']}</p>
                 {props.delegatedValidatorListInProgress ? (
@@ -184,13 +156,20 @@ const TokenDetails = (props) => {
                     <ClaimButton disable={rewards <= 0}/>
                 </div>
             </div> */}
-            {/* <div className="chip_info"> */}
-            {/*     <p>{variables[props.lang]['un_staked_tokens']}</p> */}
-            {/*     <div className="chip"> */}
-            {/*         <img alt="unstaked tokens" src={unStake}/> */}
-            {/*         <p>{unStaked}</p> */}
-            {/*     </div> */}
-            {/* </div> */}
+            <div className="chip_info">
+                <p>{variables[props.lang]['unbounding']}</p>
+                <div className="chip">
+                    <img alt="unstaked tokens" src={unStake}/>
+                    <p>{unStaked}</p>
+                </div>
+            </div>
+            {props.actualAPR
+                ? <div className="chip_info">
+                    <p>{variables[props.lang]['staking_apr']}</p>
+                    <div className="chip">
+                        <p>{props.actualAPR.toFixed(2) + ' %'}</p>
+                    </div>
+                </div> : null}
         </div>
     );
 };
@@ -213,6 +192,7 @@ TokenDetails.propTypes = {
     showTransparentTokensTransferDialog: PropTypes.func.isRequired,
     shieldedRewards: PropTypes.object.isRequired,
     shieldedRewardsInProgress: PropTypes.bool.isRequired,
+    actualAPR: PropTypes.number,
     shieldedBalance: PropTypes.array,
     shieldedBalanceInProgress: PropTypes.bool,
     unBondingDelegations: PropTypes.arrayOf(
@@ -229,6 +209,7 @@ TokenDetails.propTypes = {
 
 const stateToProps = (state) => {
     return {
+        actualAPR: state.stake.apr.apr,
         delegations: state.accounts.delegations.result,
         delegatedValidatorList: state.stake.delegatedValidators.list,
         delegatedValidatorListInProgress: state.stake.delegatedValidators.inProgress,
@@ -237,8 +218,8 @@ const stateToProps = (state) => {
         balanceInProgress: state.accounts.balance.inProgress,
         shieldedBalance: state.accounts.shieldedBalance.result,
         shieldedBalanceInProgress: state.accounts.shieldedBalance.inProgress,
-        unBondingDelegations: state.accounts.unBondingDelegations.result,
-        unBondingDelegationsInProgress: state.accounts.unBondingDelegations.inProgress,
+        unBondingDelegations: state.stake.unBondingValidators.list,
+        unBondingDelegationsInProgress: state.stake.unBondingValidators.inProgress,
         rewards: state.accounts.rewards.result,
         rewardsInProgress: state.accounts.rewards.inProgress,
         shieldedRewards: state.accounts.shieldedRewards.result,
diff --git a/src/containers/Home/index.css b/src/containers/Home/index.css
@@ -216,6 +216,14 @@ margin-bottom: 0;
     }
 }
 
+@media (max-width: 1441px) {
+    .home .card {
+        flex-direction: column;
+        padding: 50px;
+        text-align: center;
+    }
+}
+
 @media (max-width: 1300px) {
     .home .card {
         flex-direction: column;
diff --git a/src/containers/NavBar/index.js b/src/containers/NavBar/index.js
@@ -187,9 +187,9 @@ class NavBar extends Component {
             this.handleFetchValidators(DEFAULT_PAGE, 0);
         }
 
-        // if (!this.props.actualAPR && !this.props.aprInProgress) {
-        //     this.props.fetchAPR();
-        // }
+        if (!this.props.actualAPR && !this.props.aprInProgress) {
+            this.props.fetchAPR();
+        }
 
         // if (this.props.inActiveValidatorsList && !this.props.inActiveValidatorsList.length && !this.props.inActiveValidatorsInProgress && !this.props.proposalTab) {
         //     this.props.getInActiveValidators((data) => {
@@ -692,7 +692,7 @@ const stateToProps = (state) => {
     return {
         address: state.accounts.address.value,
         aprInProgress: state.stake.apr.inProgress,
-        actualAPR: state.stake.apr.actualAPR,
+        actualAPR: state.stake.apr.apr,
         balance: state.accounts.balance.result,
         balanceInProgress: state.accounts.balance.inProgress,
         delegations: state.accounts.delegations.result,
diff --git a/src/containers/Stake/Table.js b/src/containers/Stake/Table.js
@@ -353,7 +353,7 @@ Table.propTypes = {
 
 const stateToProps = (state) => {
     return {
-        actualAPR: state.stake.apr.actualAPR,
+        actualAPR: state.stake.apr.apr,
         address: state.accounts.address.value,
         lang: state.language,
         validatorList: state.stake.validators.list,
diff --git a/src/containers/Stake/UnbondingTable.js b/src/containers/Stake/UnbondingTable.js
@@ -197,7 +197,7 @@ UnbondingTable.propTypes = {
 
 const stateToProps = (state) => {
     return {
-        actualAPR: state.stake.apr.actualAPR,
+        actualAPR: state.stake.apr.apr,
         address: state.accounts.address.value,
         lang: state.language,
         validatorList: state.stake.validators.list,
@@ -210,7 +210,7 @@ const stateToProps = (state) => {
         delegatedValidatorListInProgress: state.stake.delegatedValidators.inProgress,
         inActiveValidators: state.stake.inActiveValidators.list,
         unBondingValidatorsList: state.stake.unBondingValidators.list,
-          unBondingValidatorsProgress: state.stake.unBondingValidators.inProgress,
+        unBondingValidatorsProgress: state.stake.unBondingValidators.inProgress,
     };
 };
 
diff --git a/src/reducers/stake.js b/src/reducers/stake.js
@@ -454,8 +454,8 @@ const inActiveValidators = (state = {
 
 const apr = (state = {
     inProgress: false,
-    nominalAPR: null,
-    actualAPR: null,
+    apr: null,
+    result: null,
 }, action) => {
     switch (action.type) {
     case APR_FETCH_IN_PROGRESS:
@@ -467,8 +467,8 @@ const apr = (state = {
         return {
             ...state,
             inProgress: false,
-            nominalAPR: action.nominalAPR,
-            actualAPR: action.actualAPR,
+            apr: action.apr,
+            result: action.result,
         };
     case APR_FETCH_ERROR:
         return {

Original file line number	Diff line number	Diff line change
`@@ -216,6 +216,14 @@ margin-bottom: 0;`
`216`	`216`	`}`
`217`	`217`	`}`
`218`	`218`
	`219`	`+@media (max-width: 1441px) {`
	`220`	`+ .home .card {`
	`221`	`+ flex-direction: column;`
	`222`	`+ padding: 50px;`
	`223`	`+ text-align: center;`
	`224`	`+ }`
	`225`	`+}`
	`226`	`+`
`219`	`227`	`@media (max-width: 1300px) {`
`220`	`228`	`.home .card {`
`221`	`229`	`flex-direction: column;`