sort removed for validator and MASP, ibc transfer tabs added (#116)

* sort removed for validator * MASP, ibc transfer tabs added * voting percentage updates. --------- Co-authored-by: SrikanthSoparla <[email protected]>
OmniFlix · Jan 18, 2025 · 5275853 · 5275853
1 parent dcaffab
commit 5275853
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 9 deletions.
diff --git a/src/actions/stake.js b/src/actions/stake.js
@@ -61,12 +61,13 @@ const fetchValidatorsInProgress = () => {
     };
 };
 
-const fetchValidatorsSuccess = (list, total, page) => {
+const fetchValidatorsSuccess = (list, total, page, totalVotingPower) => {
     return {
         type: VALIDATORS_FETCH_SUCCESS,
         list,
         total,
         page,
+        totalVotingPower,
     };
 };
 
@@ -86,7 +87,15 @@ export const getValidators = (page, cb) => (dispatch) => {
     })
         .then((res) => {
             const data = randomNoRepeats(res.data);
-            dispatch(fetchValidatorsSuccess(data, data && data.length, page));
+            let totalVotingPower = 0;
+            if (data && data.length) {
+                data.map((item) => {
+                    if (item && item.votingPower) {
+                        totalVotingPower += Number(item.votingPower);
+                    }
+                });
+            }
+            dispatch(fetchValidatorsSuccess(data, data && data.length, page, totalVotingPower));
             cb(data, data && data.length, page, data && data.length);
         })
         .catch((error) => {

diff --git a/src/containers/NavBar/Tabs.js b/src/containers/NavBar/Tabs.js
@@ -1,4 +1,4 @@
-import { AppBar, Tab } from '@material-ui/core';
+import { AppBar, Tab, Tooltip } from '@material-ui/core';
 import * as PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -84,7 +84,29 @@ class Tabs extends Component {
                         label={variables[this.props.lang].proposals}
                         value="proposals"
                         onClick={() => this.handleChange('proposals')}
-                        {...a11yProps(1)} />
+                        {...a11yProps(2)} />
+                    <Tooltip arrow title={'Coming soon'}>
+                        <span>
+                            <Tab
+                                className={'tab ' + (this.state.value === 'masp' ? 'active_tab' : '') + 'coming_soon'}
+                                disabled={true}
+                                label={variables[this.props.lang].masp}
+                                value="masp"
+                                onClick={() => this.handleChange('masp')}
+                                {...a11yProps(3)} />
+                        </span>
+                    </Tooltip>
+                    <Tooltip arrow title={'Coming soon'}>
+                        <span>
+                            <Tab
+                                className={'tab ' + (this.state.value === 'ibc' ? 'active_tab' : '') + 'coming_soon'}
+                                disabled={true}
+                                label={variables[this.props.lang].ibc_transfer}
+                                value="ibc"
+                                onClick={() => this.handleChange('ibc')}
+                                {...a11yProps(3)} />
+                        </span>
+                    </Tooltip>
                 </div>
             </AppBar>
         );

diff --git a/src/containers/NavBar/index.css b/src/containers/NavBar/index.css
@@ -110,6 +110,10 @@ table .disconnect_button {
     opacity: 1;
 }
 
+.nav_bar .horizontal_tabs .tab.coming_soon {
+    opacity: 0.6;
+}
+
 .nav_bar .horizontal_tabs .tab:hover {
     border: 1px solid #C0C00D;
     background: rgba(255, 255, 70, 0.20);
@@ -151,7 +155,7 @@ table .disconnect_button {
     font-size: 23px;
     font-style: normal;
     font-weight: 600;
-    line-height: 130%; 
+    line-height: 130%;
     text-transform: uppercase;
     margin-left: 20px;
 }
@@ -197,7 +201,7 @@ table .disconnect_button {
     }
 }
 
-@media (max-width: 769px) {
+@media (max-width: 950px) {
     .nav_bar .right_content {
         flex-direction: column;
         align-items: flex-end;

diff --git a/src/containers/Stake/Table.js b/src/containers/Stake/Table.js
@@ -52,7 +52,7 @@ class Table extends Component {
             name: 'validator',
             label: 'Validator',
             options: {
-                sort: true,
+                sort: false,
                 customBodyRender: (value, index) => (
                     <ValidatorName
                         index={index && index.rowIndex} name={value}
@@ -89,7 +89,8 @@ class Table extends Component {
                 sort: true,
                 customBodyRender: (value) => (
                     <div className="voting_power">
-                        <p>{formatCount(value, true)}</p>
+                        <p>{formatCount(parseFloat((Number(value.votingPower)).toFixed(1)), true)}</p>
+                        <p className="percentage">{formatCount(parseFloat((Number(value.votingPower) / this.props.totalVotingPower) * 100), 2)}%</p>
                     </div>
                 ),
             },
@@ -222,14 +223,16 @@ class Table extends Component {
             newData = dataToMap;
         }
 
+        console.log('555555', this.props.totalVotingPower);
         const tableData = newData && newData.length
             ? newData.map((item) =>
                 [
                     // item.description && item.description.moniker,
                     item.name,
                     // item,
                     // parseFloat((Number(item.tokens) / (10 ** config.COIN_DECIMALS)).toFixed(1)),
-                    parseFloat((Number(item.votingPower)).toFixed(1)),
+                    item,
+                    // parseFloat((Number(item.votingPower)).toFixed(1)),
                     // item.commission
                     //     ? parseFloat((Number(item.commission) * 100).toFixed(2)) : null,
                     item,
@@ -308,6 +311,7 @@ const stateToProps = (state) => {
         address: state.accounts.address.value,
         lang: state.language,
         validatorList: state.stake.validators.list,
+        totalVotingPower: state.stake.validators.totalVotingPower,
         genesisValidatorList: state.stake.genesisValidators.list,
         inProgress: state.stake.validators.inProgress,
         delegations: state.accounts.delegations.result,

diff --git a/src/containers/Stake/index.css b/src/containers/Stake/index.css
@@ -97,6 +97,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
 
     color: #FFF;
     font-family: 'Blinker', sans-serif;
@@ -106,6 +107,11 @@
     line-height: 130%; /* 23.4px */
 }
 
+.stake .table .voting_power .percentage {
+    color: hwb(0deg 100% 0% / 50%);
+    font-size: 15px;
+}
+
 .table .voting_power > span {
     border: 1px solid #DCDCDC;
     height: 20px;

diff --git a/src/reducers/stake.js b/src/reducers/stake.js
@@ -55,6 +55,7 @@ const validators = (state = {
     list: [],
     page: DEFAULT_PAGE,
     total: null,
+    totalVotingPower: 0,
     images: [],
 }, action) => {
     switch (action.type) {
@@ -70,6 +71,7 @@ const validators = (state = {
                 list: action.list,
                 total: action.total,
                 page: action.page,
+                totalVotingPower: action.totalVotingPower,
                 inProgress: false,
             };
         } else {

diff --git a/src/utils/numberFormats.js b/src/utils/numberFormats.js
@@ -40,6 +40,10 @@ export const formatCount = (value, decimals) => {
         return formatCountAbbr(value, true);
     }
 
+    if (value < 1) {
+        return floatDecimals(value, decimals || 5);
+    }
+
     if (value < 1000) {
         return floatDecimals(value, decimals);
     }

diff --git a/src/utils/variables.js b/src/utils/variables.js
@@ -73,6 +73,8 @@ const variables = {
         multi_delegate: 'Multi Delegate',
         number_of_validators: 'Number of Validators',
         tokens_to_each: 'Tokens to each',
+        masp: 'MASP',
+        ibc_transfer: 'IBC Transfer',
     },
 };