[LUM-727] Split validators in two lists

.github/workflows/pull_request.yml

@@ -10,10 +10,10 @@ jobs:
     build_and_preview:
         runs-on: ubuntu-latest
         steps:
-            - name: Set up Node version to 14
+            - name: Set up Node version to 16
               uses: actions/setup-node@v2
               with:
-                  node-version: '14'
+                  node-version: '16.13.0'
 
             - name: Checkout repository and submodules
               uses: actions/checkout@v2
@@ -28,9 +28,6 @@ jobs:
               env:
                   REACT_APP_BASE_URL: 'https://explorer-mainnet.infra.lum.network'
 
-            - name: Test
-              run: yarn test
-
             - name: Deploy
               uses: FirebaseExtended/action-hosting-deploy@v0
               with:

src/components/components/charts/ColumnChart/ColumnChart.tsx

@@ -23,6 +23,9 @@ const ColumnChart = ({ options, data, loading }: Props): JSX.Element => {
                 fontFamily: 'Work Sans',
             },
         },
+        accessibility: {
+            enabled: false,
+        },
         credits: {
             enabled: false,
         },

src/components/components/charts/LineChart/LineChart.tsx

@@ -27,6 +27,9 @@ const LineChart = ({ data, loading, color, yAxisTitle, timestamp, title }: IProp
                 fontFamily: 'Work Sans',
             },
         },
+        accessibility: {
+            enabled: false,
+        },
         title: {
             text: '',
         },

src/components/components/kpi/Kpi/Kpi.tsx

@@ -30,6 +30,7 @@ const Kpi = (props: IProps): JSX.Element => {
 
     const blocks = useSelector((state: RootState) => state.blocks.blocks);
     const validators = useSelector((state: RootState) => state.validators.validators);
+    const activeValidators = useSelector((state: RootState) => state.validators.validatorsActive);
     const assets = useSelector((state: RootState) => state.core.assets);
     const kpi = useSelector((state: RootState) => state.core.kpi);
     const params = useSelector((state: RootState) => state.core.params);
@@ -59,13 +60,13 @@ const Kpi = (props: IProps): JSX.Element => {
                 );
 
             case KpiType.VALIDATORS:
-                if (!validators || !validators.length) {
+                if (!validators || !validators.length || !activeValidators || !activeValidators.length) {
                     return null;
                 }
 
                 return (
                     <KpiCard title={i18n.t('validators')} logo={validatorLogo}>
-                        {numeral(validators.length).format('0,0')}
+                        {numeral(activeValidators.length).format('0,0')}/{numeral(validators.length).format('0,0')}
                     </KpiCard>
                 );
 

src/locales/locales/en.ts

@@ -83,7 +83,8 @@ export default {
     hours: 'hours',
     minutes: 'minutes',
     seconds: 'seconds',
-
+    active: 'Active',
+    inactive: 'Inactive',
     // Layout
     dashboard: 'Board',
     blocks: 'Blocks',

src/pages/pages/Home/components/Lum/Lum.tsx

@@ -56,7 +56,7 @@ const Lum = (): JSX.Element => {
                         <span className={`me-1 ${previousDayPercentage >= 0 ? 'arrow-up' : 'arrow-down'}`} />
                         {numeral(previousDayPercentage).format('+0.00%')} ({i18n.t('day')})
                     </p>
-                    <p className="big-text">{numeral(lum.price).format('$0,0.0000')}</p>
+                    <p className="big-text">{numeral(lum.price).format('$0,0.000000')}</p>
                 </div>
             </div>
         </Card>

src/pages/pages/Validators/list/ValidatorsPage.tsx

@@ -3,7 +3,7 @@ import { Dispatch, RootState } from 'redux/store';
 import validatorLogo from 'assets/images/validatorDark.svg';
 import genesisFlag from 'assets/images/genesisFlag.svg';
 import { i18n, NumbersUtils, StringsUtils, ValidatorsUtils } from 'utils';
-import { Card, Loading, Table, ValidatorLogo } from 'frontend-elements';
+import { Card, Loading, Table, Tabs, ValidatorLogo } from 'frontend-elements';
 import { Kpi, Badge } from 'components';
 import { ValidatorModel } from 'models';
 import numeral from 'numeral';
@@ -15,6 +15,8 @@ import { useDispatch, useSelector } from 'react-redux';
 const ValidatorsPage = (): JSX.Element => {
     const dispatch = useDispatch<Dispatch>();
     const validators = useSelector((state: RootState) => state.validators.validators);
+    const activeValidators = useSelector((state: RootState) => state.validators.validatorsActive);
+    const inactiveValidators = useSelector((state: RootState) => state.validators.validatorsInactive);
     const params = useSelector((state: RootState) => state.core.params);
     const loading = useSelector((state: RootState) => state.loading.effects.validators.fetchValidators);
 
@@ -46,11 +48,11 @@ const ValidatorsPage = (): JSX.Element => {
         );
     };
 
-    const renderRow = (validator: ValidatorModel, index: number): JSX.Element => {
+    const renderRow = (validator: ValidatorModel, index: number, inactive = false): JSX.Element => {
         return (
             <tr key={index}>
                 <td data-label={head[0]}>
-                    <p className={index + 1 > 5 ? 'rank' : 'top-rank'}>{index + 1}</p>
+                    <p className={index + 1 > 5 || inactive ? 'rank' : 'top-rank'}>{inactive ? activeValidators.length + index + 1 : index + 1}</p>
                 </td>
                 <td data-label={head[1]}>
                     <Link title={validator.operatorAddress} to={`${NavigationConstants.VALIDATORS}/${validator.operatorAddress}`}>
@@ -94,8 +96,22 @@ const ValidatorsPage = (): JSX.Element => {
                 <img alt="validator" src={validatorLogo} /> {i18n.t('validators')}
             </h2>
             {renderKpi()}
-            <Card withoutPadding className="my-5">
-                {!validators || !validators.length || loading ? <Loading /> : <Table head={head}>{validators.map((value, index) => renderRow(value, index))}</Table>}
+            <Card withoutPadding className="my-5 pt-4">
+                <Tabs
+                    tabs={[
+                        { name: i18n.t('active'), id: 0 },
+                        { name: i18n.t('inactive'), id: 1 },
+                    ]}
+                    tabsContent={{
+                        0: !activeValidators || !activeValidators.length || loading ? <Loading /> : <Table head={head}>{activeValidators.map((value, index) => renderRow(value, index))}</Table>,
+                        1:
+                            !inactiveValidators || !inactiveValidators.length || loading ? (
+                                <Loading />
+                            ) : (
+                                <Table head={head}>{inactiveValidators.map((value, index) => renderRow(value, index, true))}</Table>
+                            ),
+                    }}
+                />
             </Card>
         </>
     );

src/redux/models/models/validators.ts

@@ -3,9 +3,12 @@ import { createModel } from '@rematch/core';
 import { RootModel } from '../index';
 import { plainToClass } from 'class-transformer';
 import Api from 'api';
+import { ValidatorsType } from '../../../constant';
 
 interface ValidatorsState {
     validators: ValidatorModel[];
+    validatorsActive: ValidatorModel[];
+    validatorsInactive: ValidatorModel[];
     validator: ValidatorModel;
     blocksMetadata?: MetadataModel;
     delegationsMetadata?: MetadataModel;
@@ -14,6 +17,8 @@ interface ValidatorsState {
 const validators = createModel<RootModel>()({
     state: {
         validators: [],
+        validatorsActive: [],
+        validatorsInactive: [],
         validator: plainToClass(ValidatorModel, null),
     } as ValidatorsState,
     reducers: {
@@ -24,6 +29,20 @@ const validators = createModel<RootModel>()({
             };
         },
 
+        SET_VALIDATORS_ACTIVE(state, validators: ValidatorModel[]) {
+            return {
+                ...state,
+                validatorsActive: validators.sort((a, b) => parseInt((b && b.tokens) || '0', 10) - parseInt((a && a.tokens) || '0', 10)),
+            };
+        },
+
+        SET_VALIDATORS_INACTIVE(state, validators: ValidatorModel[]) {
+            return {
+                ...state,
+                validatorsInactive: validators.sort((a, b) => parseInt((b && b.tokens) || '0', 10) - parseInt((a && a.tokens) || '0', 10)),
+            };
+        },
+
         SET_VALIDATOR(state, validator: ValidatorModel, metadata: [MetadataModel | undefined, MetadataModel | undefined]) {
             const [blocksMetadata, delegationsMetadata] = metadata;
 
@@ -49,7 +68,12 @@ const validators = createModel<RootModel>()({
             try {
                 const [validators] = await Api.fetchValidators();
 
+                const activeValidators = validators.filter((validator) => validator.status === ValidatorsType.ACTIVE && !validator.jailed);
+                const inactiveValidators = validators.filter((validator) => validator.status !== ValidatorsType.ACTIVE || validator.jailed);
+
                 dispatch.validators.SET_VALIDATORS(validators);
+                dispatch.validators.SET_VALIDATORS_ACTIVE(activeValidators);
+                dispatch.validators.SET_VALIDATORS_INACTIVE(inactiveValidators);
             } catch (e) {}
         },