added Cummulative Nodes progress bar if identities are sorted by defa…

…ult/nodes. if sorted by stake, keep the cummulative stake display

src/components/PercentageBar/PercentageBar.tsx

@@ -4,17 +4,17 @@ import { Overlay } from 'components';
 import { WithClassnameType } from 'types';
 
 export interface PercentageBarUIType extends WithClassnameType {
-  overallPercent: number;
+  overallPercent?: number;
   overallPercentLabel?: string;
-  fillPercent: number;
+  fillPercent?: number;
   fillPercentLabel?: string;
   type?: string;
 }
 
 export const PercentageBar = ({
-  overallPercent,
+  overallPercent = 0,
   overallPercentLabel = '',
-  fillPercent,
+  fillPercent = 0,
   fillPercentLabel = '',
   type,
   className

src/components/SharedIdentity/IdentityCard/IdentityCard.tsx

@@ -8,12 +8,11 @@ import {
   SharedIdentity,
   Trim
 } from 'components';
-import { getValidLink } from 'helpers';
+import { formatPercentLabel, getValidLink } from 'helpers';
 import { faLink, faMapMarkerAlt } from 'icons/solid';
 import { activeNetworkSelector } from 'redux/selectors';
 import { IdentityType, MultilayerPercentageStepType } from 'types';
 import { StatsCard } from 'widgets';
-import { formatStakePercentLabel } from '../helpers';
 
 const prepareStakeDistribution = (identity: IdentityType) => {
   const distribution: MultilayerPercentageStepType[] = [];
@@ -149,7 +148,7 @@ export const IdentityCard = ({ identity }: { identity: IdentityType }) => {
 
               <StatsCard
                 title='Stake Percentage'
-                value={formatStakePercentLabel(identity?.stakePercent)}
+                value={formatPercentLabel(identity?.stakePercent)}
                 className='detail-card'
               />
 

src/components/SharedIdentity/IdentitySummary/IdentitySummary.tsx

@@ -8,11 +8,10 @@ import {
   SharedIdentity,
   Trim
 } from 'components';
-import { urlBuilder } from 'helpers';
+import { formatPercentLabel, urlBuilder } from 'helpers';
 import { faAngleRight, faCity } from 'icons/regular';
 import { faBadgeCheck } from 'icons/solid';
 import { IdentityType } from 'types';
-import { formatStakePercentLabel } from '../helpers';
 
 export const IdentitySummary = ({
   identity,
@@ -88,7 +87,7 @@ export const IdentitySummary = ({
                   <div className='d-flex align-items-center card p-3 flex-grow-1 detail-card'>
                     <span className='text-neutral-500'>Stake percent</span>
                     <h5 className='mb-0'>
-                      {formatStakePercentLabel(identity?.stakePercent)}
+                      {formatPercentLabel(identity?.stakePercent)}
                     </h5>
                   </div>
                   <div className='d-flex align-items-center card p-3 flex-grow-1 detail-card'>

src/helpers/formatValue/formatPercentLabel.ts

@@ -0,0 +1,14 @@
+import { BigNumber } from 'bignumber.js';
+
+export const formatPercentLabel = (percent?: number) => {
+  if (!percent) {
+    return 'N/A';
+  }
+
+  const bnPercent = new BigNumber(percent);
+  const percentLabel = `${
+    bnPercent.isGreaterThanOrEqualTo(1) ? bnPercent.toFormat(2) : '< 1'
+  }%`;
+
+  return percentLabel;
+};

src/helpers/formatValue/index.ts

@@ -3,6 +3,7 @@ export * from './formatDate';
 export * from './formatHerotag';
 export * from './formatBigNumber';
 export * from './formatOrdinals';
+export * from './formatPercentLabel';
 export * from './formatTimeUntilTimestamp';
 export * from './formatSize';
 export * from './formatUSD';

src/helpers/processData/processNodesIdentities.ts

@@ -1,15 +1,36 @@
+import BigNumber from 'bignumber.js';
 import { IdentityType } from 'types/node.types';
 
-export const processNodesIdentities = (data: IdentityType[]) => {
+export const processNodesIdentities = (identities: IdentityType[]) => {
   const identitiesList: IdentityType[] = [];
-  let overallStakePercent = 0;
+  let overallStakePercent = new BigNumber(0);
+  let overallValidatorsPercent = new BigNumber(0);
 
-  data.forEach((identity: IdentityType) => {
-    if (!identity.stake || !identity.validators) {
+  const totalValidators = identities
+    .map(({ validators }) => validators || 0)
+    .reduce((a, b) => new BigNumber(a).plus(b), new BigNumber(0));
+
+  identities.forEach((identity: IdentityType) => {
+    if (
+      !identity.stake ||
+      !identity.validators ||
+      totalValidators.isLessThan(1)
+    ) {
       return;
     }
-    identitiesList.push({ ...identity, overallStakePercent });
-    overallStakePercent = overallStakePercent + identity.stakePercent;
+    const validatorsPercent = new BigNumber(identity.validators)
+      .dividedBy(totalValidators)
+      .times(100);
+
+    identitiesList.push({
+      ...identity,
+      overallStakePercent: overallStakePercent.toNumber(),
+      validatorsPercent: validatorsPercent.toNumber(),
+      overallValidatorsPercent: overallValidatorsPercent.toNumber()
+    });
+
+    overallStakePercent = overallStakePercent.plus(identity.stakePercent);
+    overallValidatorsPercent = overallValidatorsPercent.plus(validatorsPercent);
   });
 
   return identitiesList;

src/pages/Identities/Identities.tsx

@@ -35,6 +35,7 @@ export const Identities = () => {
 
   let coefficientShown = false;
   const resiliencyCoefficient = unprocessed?.nakamotoCoefficient ?? 0;
+  const isStakeSorting = sort === SortIdentitesFieldEnum.locked;
   const isValidatorsSorting =
     !(sort && order) ||
     (sort === SortIdentitesFieldEnum.validators &&
@@ -85,14 +86,24 @@ export const Identities = () => {
                     <Sort text='Stake' id={SortIdentitesFieldEnum.locked} />
                   </th>
                   <th className='th-stake-percent'>
-                    Cumulative Stake
+                    {isStakeSorting ? 'Cumulative Stake' : 'Cumulative Nodes'}
                     <InfoTooltip
                       title={
                         <>
                           <p className='mb-0'>
-                            The Cumulative Stake represents the total share of
-                            staked {egldLabel} that this and all previous
-                            validators add up to.
+                            {isStakeSorting ? (
+                              <>
+                                The Cumulative Stake represents the total share
+                                of staked {egldLabel} that this and all previous
+                                validators add up to.
+                              </>
+                            ) : (
+                              <>
+                                The Cumulative Nodes represents the total share
+                                of nodes that this and all previous validators
+                                add up to.
+                              </>
+                            )}
                           </p>
                           <p className='mt-1 mb-0'>
                             To improve the decentralization of the network,

src/pages/Identities/components/IdentityRow.tsx

@@ -14,24 +14,26 @@ import {
   Overlay,
   LockedStakeTooltip
 } from 'components';
-import { formatStakePercentLabel } from 'components/SharedIdentity/helpers';
-import { urlBuilder } from 'helpers';
-import { useAdapter } from 'hooks';
+import { formatPercentLabel, urlBuilder } from 'helpers';
+import { useAdapter, useGetSort } from 'hooks';
 import { faCogs } from 'icons/regular';
 import { IdentityType, NodeType } from 'types';
 
+import { SortIdentitesFieldEnum } from '../helpers';
+
 export interface IdentityRowType {
   identity: IdentityType;
   index?: number;
 }
 
 export const IdentityRow = ({ identity, index }: IdentityRowType) => {
   const ref = useRef(null);
+  const { getNodes, getNode } = useAdapter();
+  const { sort } = useGetSort();
   const [collapsed, setCollapsed] = useState(true);
   const [showDetails, setShowDetails] = useState(false);
   const [dataReady, setDataReady] = useState<boolean | undefined>();
   const [identityNodes, setIdentityNodes] = useState<NodeType[]>([]);
-  const { getNodes, getNode } = useAdapter();
 
   const expand = (identityRow: IdentityType) => () => {
     if (dataReady === undefined) {
@@ -59,6 +61,8 @@ export const IdentityRow = ({ identity, index }: IdentityRowType) => {
     setCollapsed(!collapsed);
   };
 
+  const isStakeSorting = sort === SortIdentitesFieldEnum.locked;
+
   const link = identity.identity
     ? urlBuilder.identityDetails(identity.identity)
     : urlBuilder.nodeDetails(identity.name);
@@ -104,18 +108,37 @@ export const IdentityRow = ({ identity, index }: IdentityRowType) => {
         </td>
         <td>
           <div className='d-flex align-items-center'>
-            <PercentageBar
-              overallPercent={identity.overallStakePercent || 0}
-              overallPercentLabel={formatStakePercentLabel(
-                identity.overallStakePercent
-              )}
-              fillPercent={identity.stakePercent}
-              fillPercentLabel={formatStakePercentLabel(identity.stakePercent)}
-            />
-
-            <div className='ms-3'>
-              {formatStakePercentLabel(identity?.stakePercent)}
-            </div>
+            {isStakeSorting ? (
+              <>
+                <PercentageBar
+                  overallPercent={identity.overallStakePercent || 0}
+                  overallPercentLabel={formatPercentLabel(
+                    identity.overallStakePercent
+                  )}
+                  fillPercent={identity.stakePercent}
+                  fillPercentLabel={formatPercentLabel(identity.stakePercent)}
+                />
+                <div className='ms-3'>
+                  {formatPercentLabel(identity?.stakePercent)}
+                </div>
+              </>
+            ) : (
+              <>
+                <PercentageBar
+                  overallPercent={identity.overallValidatorsPercent || 0}
+                  overallPercentLabel={formatPercentLabel(
+                    identity.overallValidatorsPercent
+                  )}
+                  fillPercent={identity.validatorsPercent}
+                  fillPercentLabel={formatPercentLabel(
+                    identity.validatorsPercent
+                  )}
+                />
+                <div className='ms-3'>
+                  {formatPercentLabel(identity?.validatorsPercent)}
+                </div>
+              </>
+            )}
           </div>
         </td>
         <td className='text-end'>

src/pages/Identities/components/ResiliencyRow.tsx

@@ -26,7 +26,7 @@ export const ResiliencyRow = ({
             <p className='mb-0 text-primary-300'>Resiliency Coefficient</p>
             <p className='mb-0 text-neutral-500'>
               The top {new BigNumber(coefficient).toFormat(0)} node operators
-              above control more than 33% of the total nodes.
+              above have more than 33% of the total nodes.
             </p>
           </div>
           <hr className='d-flex flex-fill text-neutral-800' />

src/types/node.types.ts

@@ -82,7 +82,6 @@ export interface IdentityType {
   stakePercent: number;
   validators: number;
   rank?: number;
-  overallStakePercent?: number;
   twitter?: string;
   website?: string;
   location?: string;
@@ -93,6 +92,11 @@ export interface IdentityType {
   distribution?: any;
   apr?: number;
   url?: string;
+
+  // not on API
+  overallStakePercent?: number;
+  validatorsPercent?: number;
+  overallValidatorsPercent?: number;
 }
 export interface ProviderType {
   provider: string;