Validator points adjustment (#8727)

* Validator points adjustment * Fix staking ledgend sizing * Adjust * Small adjustment to overall Badge sizing
2023-01-08 12:26:27 +02:00 · 2023-01-08 12:26:27 +02:00 · b95798aef5
commit b95798aef5
parent cc97f26351
8 changed files with 92 additions and 42 deletions
--- a/packages/page-staking/src/Legend.tsx
+++ b/packages/page-staking/src/Legend.tsx
@ -6,7 +6,7 @@ import type { BN } from '@polkadot/util';
 import React from 'react';
 import styled from 'styled-components';

-import { Badge, Icon } from '@polkadot/react-components';
+import { Badge, Tag } from '@polkadot/react-components';

 import { useTranslation } from './translate';

@ -26,7 +26,7 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme
          color='blue'
          icon='chevron-right'
        />
-        {t('Next session')}
+        <span>{t('Next session')}</span>
      </span>
      {minCommission && (
        <span>
@ -34,7 +34,7 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme
            color='red'
            icon='cancel'
          />
-          {t('Chilled')}
+          <span>{t('Chilled')}</span>
        </span>
      )}
      {isRelay && (
@ -43,7 +43,7 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme
            color='purple'
            icon='vector-square'
          />
-          {t('Para validator')}
+          <span>{t('Para validator')}</span>
        </span>
      )}
      <span>
@ -51,42 +51,49 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme
          color='green'
          info='5'
        />
-        {t('Produced blocks')}
+        <span>{t('Produced blocks')}</span>
      </span>
      <span>
        <Badge
          color='green'
-          info={<Icon icon='envelope' />}
+          icon='envelope'
        />
-        {t('Online message')}
+        <span>{t('Online message')}</span>
      </span>
      <span>
        <Badge
          color='green'
          icon='hand-paper'
        />
-        {t('Nominating')}
+        <span>{t('Nominating')}</span>
      </span>
      <span>
        <Badge
          color='red'
          icon='balance-scale-right'
        />
-        {t('Oversubscribed')}
+        <span>{t('Oversubscribed')}</span>
      </span>
      <span>
        <Badge
          color='red'
          icon='skull-crossbones'
        />
-        {t('Slashed')}
+        <span>{t('Slashed')}</span>
      </span>
      <span>
        <Badge
          color='red'
          icon='user-slash'
        />
-        {t('Blocks nominations')}
+        <span>{t('Blocks nominations')}</span>
+      </span>
+      <span>
+        <Tag
+          color='lightgrey'
+          label='1,220'
+        />
+        <span>{t('Era points')}</span>
      </span>
    </div>
  );
@ -97,11 +104,19 @@ export default React.memo(styled(Legend)`
  padding: 1rem 0.5rem;
  text-align: center;

-  .ui--Badge {
+  .ui--Badge, .ui--Tag {
    margin-right: 0.5rem;
  }

-  span+span {
-    margin-left: 1rem;
+  span {
+    vertical-align: middle;
+
+    * {
+      vertical-align: middle;
+    }
+
+    + span {
+      margin-left: 1rem;
+    }
  }
 `);
--- a/packages/page-staking/src/Validators/Address/Status.tsx
+++ b/packages/page-staking/src/Validators/Address/Status.tsx
@ -5,7 +5,7 @@ import type { BN } from '@polkadot/util';

 import React, { useMemo } from 'react';

-import { Badge, Icon } from '@polkadot/react-components';
+import { Badge } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';

 import MaxBadge from '../../MaxBadge';
@ -89,20 +89,28 @@ function Status ({ isChilled, isElected, isMain, isPara, isRelay, nominators = N
          )
      }
      {isMain && (
-        blockCount || onlineMessage
+        blockCount
          ? (
            <Badge
              className='media--900'
              color='green'
-              info={blockCount || <Icon icon='envelope' />}
-            />
-          )
-          : (
-            <Badge
-              className='media--900'
-              color='transparent'
+              info={blockCount}
            />
          )
+          : onlineMessage
+            ? (
+              <Badge
+                className='media--900'
+                color='green'
+                icon='envelope'
+              />
+            )
+            : (
+              <Badge
+                className='media--900'
+                color='transparent'
+              />
+            )
      )}
      <MaxBadge numNominators={nominators.length} />
    </>
--- a/packages/page-staking/src/Validators/Address/index.tsx
+++ b/packages/page-staking/src/Validators/Address/index.tsx
@ -11,7 +11,7 @@ import type { NominatorValue } from './types';
 import React, { useMemo } from 'react';

 import { ApiPromise } from '@polkadot/api';
-import { AddressSmall, Columar, Icon, LinkExternal, Table } from '@polkadot/react-components';
+import { AddressSmall, Columar, Icon, LinkExternal, Table, Tag } from '@polkadot/react-components';
 import { checkVisibility } from '@polkadot/react-components/util';
 import { useApi, useCall, useDeriveAccountInfo, useToggle } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
@ -113,6 +113,11 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
    [address]
  );

+  const pointsAnimClass = useMemo(
+    () => points && `greyAnim-${Date.now() % 25}`,
+    [points]
+  );
+
  if (!isVisible) {
    return null;
  }
@ -137,8 +142,15 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
            onlineMessage={recentlyOnline?.hasMessage}
          />
        </td>
-        <td className='address all'>
+        <td className='address all relative'>
          <AddressSmall value={address} />
+          {isMain && pointsAnimClass && (
+            <Tag
+              className={`${pointsAnimClass} absolute`}
+              color='lightgrey'
+              label={points}
+            />
+          )}
        </td>
        {isMain
          ? (
@ -158,14 +170,9 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
          {commission}
        </td>
        {isMain && (
-          <>
-            <td className='number'>
-              {points}
-            </td>
-            <td className='number'>
-              {lastBlock}
-            </td>
-          </>
+          <td className='number'>
+            {lastBlock}
+          </td>
        )}
        <Table.Column.Expand
          isExpanded={isExpanded}
@ -179,7 +186,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
            className='columar'
            colSpan={
              isMain
-                ? 5
+                ? 4
                : 3
            }
          >
--- a/packages/page-staking/src/Validators/CurrentList.tsx
+++ b/packages/page-staking/src/Validators/CurrentList.tsx
@ -150,7 +150,6 @@ function CurrentList ({ className, favorites, hasQueries, isIntentions, isOwn, m
        [t('validators'), 'start', 3],
        [t('other stake'), 'expand'],
        [t('commission')],
-        [t('points')],
        [t('last #')],
        []
      ]
--- a/packages/page-staking/src/index.tsx
+++ b/packages/page-staking/src/index.tsx
@ -260,4 +260,20 @@ export default React.memo(styled(StakingApp)(({ theme }: ThemeProps) => `
    : ''};
    }
  }
+
+  ${[
+    0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
+    10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
+    20, 21, 22, 23, 24
+  ].map((n) => `
+    .greyAnim-${n} {
+      animation: greyAnim${n} 2s;
+    }
+    @keyframes greyAnim${n} {
+      0% { background: #a6a6a6; }
+      50% { background: darkorange; }
+      100% { background: #a6a6a6; }
+    }
+  `).join('')
+}
 `));
--- a/packages/react-components/src/Badge.tsx
+++ b/packages/react-components/src/Badge.tsx
@ -75,21 +75,22 @@ function Badge ({ className = '', color = 'normal', hover, hoverAction, icon, in
  );
 }

+// FIXME We really need to get rid of the px sizing here
 export default React.memo(styled(Badge)`
  border-radius: 16px;
  box-sizing: border-box;
  color: #eeedec;
  display: inline-block;
  font-size: 12px;
-  height: 22px;
-  line-height: 22px;
+  height: 20px;
+  line-height: 20px;
  margin-right: 0.43rem;
-  min-width: 22px;
+  min-width: 20px;
  padding: 0 4px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
-  width: 22px;
+  width: 20px;

  &.isTooltip {
    cursor: help;
@ -101,7 +102,7 @@ export default React.memo(styled(Badge)`

  .ui--Icon {
    cursor: inherit;
-    margin-top: 5px;
+    margin-top: 4px;
    vertical-align: top;
    width: 1em;
  }
--- a/packages/react-components/src/Tag.tsx
+++ b/packages/react-components/src/Tag.tsx
@ -46,7 +46,7 @@ export default React.memo(styled(Tag)`
  display: inline-block;
  font-size: 0.857rem;
  font-weight: var(--font-weight-normal);
-  line-height: 1.143rem;
+  line-height: 1rem;
  margin: 0 0.125rem;
  opacity: 0.85;
  padding: 0.25em 0.75em;
@ -74,6 +74,10 @@ export default React.memo(styled(Tag)`
    background: #767676;
  }

+  &.lightgreyColor {
+    background: #a6a6a6;
+  }
+
  &.orangeColor {
    background: #f2711c;
  }
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@ -80,7 +80,7 @@ export interface ThemeProps {
  theme: ThemeDef;
 }

-export type FlagColor = 'blue' | 'black' | 'green' | 'grey' | 'orange' | 'pink' | 'purple' | 'red' | 'yellow' | 'theme';
+export type FlagColor = 'blue' | 'black' | 'green' | 'grey' | 'lightgrey' | 'orange' | 'pink' | 'purple' | 'red' | 'yellow' | 'theme';

 export type AccountIdIsh = AccountId | AccountIndex | Address | string | Uint8Array | null;