Minor placeholder adjustments (#8738)

* Minor placeholder adjustments * placeholders for explorer block view * Weight graph * Misc class fixes * Drive-by LinkExternal label fix * StakeOther changes
2023-01-09 18:57:33 +02:00 · 2023-01-09 18:57:33 +02:00 · ed513de9f0
commit ed513de9f0
parent 5da17b2b3a
12 changed files with 108 additions and 80 deletions
--- a/packages/page-council/src/Overview/Summary.tsx
+++ b/packages/page-council/src/Overview/Summary.tsx
@ -35,7 +35,7 @@ function Summary ({ bestNumber, className = '', electionsInfo, hasElections }: P
            <CardSummary label={t<string>('runners up')}>
              {electionsInfo
                ? <>{formatNumber(electionsInfo.runnersUp.length)}{electionsInfo.desiredRunnersUp && <>&nbsp;/&nbsp;{formatNumber(electionsInfo.desiredRunnersUp)}</>}</>
-                : <span className='--placeholder'>99</span>}
+                : <span className='--placeholder'>99 / 99</span>}
            </CardSummary>
            <CardSummary label={t<string>('candidates')}>
              {electionsInfo
--- a/packages/page-explorer/src/BlockInfo/ByHash.tsx
+++ b/packages/page-explorer/src/BlockInfo/ByHash.tsx
@ -8,7 +8,7 @@ import type { EventRecord, RuntimeVersionPartial, SignedBlock } from '@polkadot/
 import React, { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';

-import { AddressSmall, Columar, LinkExternal, Table } from '@polkadot/react-components';
+import { AddressSmall, Columar, LinkExternal, MarkError, Table } from '@polkadot/react-components';
 import { useApi, useIsMountedRef } from '@polkadot/react-hooks';
 import { convertWeight } from '@polkadot/react-hooks/useWeight';
 import { formatNumber } from '@polkadot/util';
@ -64,6 +64,10 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme
    [api, runtimeVersion]
  );

+  useEffect((): void => {
+    error && setBlkError(error);
+  }, [error]);
+
  const systemEvents = useMemo(
    () => events && events.filter(({ record: { phase } }) => !phase.isApplyExtrinsic),
    [events]
@ -124,7 +128,13 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme
      />
      <Table header={header}>
        {blkError
-          ? <tr><td colSpan={6}>{t('Unable to retrieve the specified block details. {{error}}', { replace: { error: blkError.message } })}</td></tr>
+          ? (
+            <tr>
+              <td colSpan={6}>
+                <MarkError content={t<string>('Unable to retrieve the specified block details. {{error}}', { replace: { error: blkError.message } }) } />
+              </td>
+            </tr>
+          )
          : getBlock && getHeader && !getBlock.isEmpty && !getHeader.isEmpty && (
            <tr>
              <td className='address'>
--- a/packages/page-explorer/src/BlockInfo/ByNumber.tsx
+++ b/packages/page-explorer/src/BlockInfo/ByNumber.tsx
@ -5,7 +5,6 @@ import type { Hash } from '@polkadot/types/interfaces';

 import React, { useEffect, useState } from 'react';

-import { Spinner } from '@polkadot/react-components';
 import { useApi, useIsMountedRef } from '@polkadot/react-hooks';

 import BlockByHash from './ByHash';
@ -27,18 +26,20 @@ function BlockByNumber ({ value }: Props): React.ReactElement<Props> | null {
        mountedRef.current && setState(result);
      })
      .catch((error: Error): void => {
+        console.error(1);
+
        mountedRef.current && setError(error);
      });
  }, [api, mountedRef, value]);

-  if (!getBlockHash && !error) {
-    return <Spinner />;
-  }
-
  return (
    <BlockByHash
      error={error}
-      value={getBlockHash ? getBlockHash.toHex() : null}
+      value={
+        getBlockHash
+          ? getBlockHash.toHex()
+          : null
+      }
    />
  );
 }
--- a/packages/page-explorer/src/BlockInfo/Summary.tsx
+++ b/packages/page-explorer/src/BlockInfo/Summary.tsx
@ -10,7 +10,7 @@ import { CardSummary, SummaryBox } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { convertWeight } from '@polkadot/react-hooks/useWeight';
 import { FormatBalance } from '@polkadot/react-query';
-import { BN, formatNumber } from '@polkadot/util';
+import { BN, BN_ONE, BN_THREE, BN_TWO, formatNumber } from '@polkadot/util';

 import { useTranslation } from '../translate';

@ -49,47 +49,54 @@ function Summary ({ events, maxBlockWeight, signedBlock }: Props): React.ReactEl
    [events]
  );

-  if (!events || !signedBlock) {
-    return null;
-  }
-
  return (
    <SummaryBox>
      <section>
        {api.query.balances && (
          <>
            <CardSummary label={t<string>('deposits')}>
-              <FormatBalance value={deposits} />
+              <FormatBalance
+                className={deposits ? '' : '--placeholder'}
+                value={deposits || BN_ONE}
+              />
            </CardSummary>
            <CardSummary
              className='media--1000'
              label={t<string>('transfers')}
            >
-              <FormatBalance value={transfers} />
+              <FormatBalance
+                className={transfers ? '' : '--placeholder'}
+                value={transfers || BN_ONE}
+              />
            </CardSummary>
          </>
        )}
      </section>
-      {maxBlockWeight && (
-        <section>
-          <CardSummary
-            label={t<string>('block weight')}
-            progress={{
-              hideValue: true,
-              total: maxBlockWeight,
-              value: weight
-            }}
-          >
-            {formatNumber(weight)}
-          </CardSummary>
-        </section>
-      )}
+      <section>
+        <CardSummary
+          label={t<string>('block weight')}
+          progress={{
+            hideValue: true,
+            isBlurred: !(maxBlockWeight && weight),
+            total: (maxBlockWeight && weight) ? maxBlockWeight : BN_THREE,
+            value: (maxBlockWeight && weight) ? weight : BN_TWO
+          }}
+        >
+          {weight
+            ? formatNumber(weight)
+            : <span className='--placeholder'>999,999,999</span>}
+        </CardSummary>
+      </section>
      <section className='media--900'>
        <CardSummary label={t<string>('event count')}>
-          {formatNumber(events.length)}
+          {events
+            ? formatNumber(events.length)
+            : <span className='--placeholder'>99</span>}
        </CardSummary>
        <CardSummary label={t<string>('extrinsic count')}>
-          {formatNumber(signedBlock.block.extrinsics.length)}
+          {signedBlock
+            ? formatNumber(signedBlock.block.extrinsics.length)
+            : <span className='--placeholder'>99</span>}
        </CardSummary>
      </section>
    </SummaryBox>
--- a/packages/page-explorer/src/Events.tsx
+++ b/packages/page-explorer/src/Events.tsx
@ -7,7 +7,7 @@ import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';

-import { Table } from '@polkadot/react-components';
+import { MarkError, Table } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';

 import Event from './Event';
@ -44,7 +44,7 @@ function Events ({ className = '', emptyLabel, error, eventClassName, events, la
            className={eventClassName}
            key='error'
          >
-            <td>{error.message}</td>
+            <td><MarkError content={t<string>('Unable to decode the block events. {{error}}', { replace: { error: error.message } })} /></td>
          </tr>
        )
        : events && events.map(({ blockHash, blockNumber, indexes, key, record }): React.ReactNode => (
--- a/packages/page-preimages/src/Preimages/Preimage.tsx
+++ b/packages/page-preimages/src/Preimages/Preimage.tsx
@ -25,8 +25,10 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
      <Hash value={value} />
      <Call value={info} />
      <td className='number media--1000'>
-        {info?.bytes
-          ? formatNumber(info.bytes.length)
+        {info
+          ? info.bytes
+            ? formatNumber(info.bytes.length)
+            : null
          : <span className='--placeholder'>999,999</span>
        }
      </td>
@ -34,7 +36,7 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
        {info
          ? (
            <>
-              <div>{info.status?.type}{info.count !== 0 && <>&nbsp;/&nbsp;{formatNumber(info.count)}</>}</div>
+              {info.status && (<div>{info.status?.type}{info.count !== 0 && <>&nbsp;/&nbsp;{formatNumber(info.count)}</>}</div>)}
              <Free value={info} />
            </>
          )
--- a/packages/page-staking/src/Pools/Pool.tsx
+++ b/packages/page-staking/src/Pools/Pool.tsx
@ -54,7 +54,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):

  return (
    <>
-      <tr className={className}>
+      <tr className={`${className} isFirst isExpanded ${isExpanded ? '' : 'isLast'}`}>
        <Table.Column.Id value={poolId} />
        <td className='start'>
          <div className={`${isExpanded ? '' : 'clamp'}`}>
@ -116,7 +116,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
        </td>
      </tr>
      {info && isExpanded && (
-        <tr className={`${className} isExpanded`}>
+        <tr className={`${className} isExpanded isLast`}>
          <td colSpan={4}>
            <div className='label-column-right'>
              <div className='label'>{t('creator')}</div>
--- a/packages/page-staking/src/Validators/Address/StakeOther.tsx
+++ b/packages/page-staking/src/Validators/Address/StakeOther.tsx
@ -12,23 +12,21 @@ import { BN, BN_ZERO } from '@polkadot/util';

 interface Props {
  stakeOther?: BN;
-  nominators: NominatorValue[];
+  nominators?: NominatorValue[];
 }

 function extractFunction (all: NominatorValue[]): null | [number, () => React.ReactNode[]] {
-  return all.length
-    ? [
-      all.length,
-      () => all.map(({ nominatorId, value }): React.ReactNode =>
-        <AddressMini
-          bonded={value}
-          key={nominatorId}
-          value={nominatorId}
-          withBonded
-        />
-      )
-    ]
-    : null;
+  return [
+    all.length,
+    () => all.map(({ nominatorId, value }): React.ReactNode =>
+      <AddressMini
+        bonded={value}
+        key={nominatorId}
+        value={nominatorId}
+        withBonded
+      />
+    )
+  ];
 }

 function sumValue (all: { value: BN }[]): BN {
@ -41,7 +39,11 @@ function sumValue (all: { value: BN }[]): BN {
  return total;
 }

-function extractTotals (maxPaid: BN | undefined, nominators: NominatorValue[], stakeOther?: BN): [null | [number, () => React.ReactNode[]], BN, null | [number, () => React.ReactNode[]], BN] {
+function extractTotals (maxPaid: BN | undefined, nominators?: NominatorValue[], stakeOther?: BN): [null | [number, () => React.ReactNode[]], BN, null | [number, () => React.ReactNode[]], BN] {
+  if (!nominators) {
+    return [null, BN_ZERO, null, BN_ZERO];
+  }
+
  const sorted = nominators.sort((a, b) => b.value.cmp(a.value));

  if (!maxPaid || maxPaid.gtn(sorted.length)) {
@ -65,18 +67,22 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
    [api, nominators, stakeOther]
  );

+  console.log(nominators?.length, rewarded);
+
  return (
    <td className='expand all'>
-      <ExpanderScroll
-        className={rewarded ? '' : '--placeholder'}
-        renderChildren={rewarded && rewarded[1]}
-        summary={
-          <FormatBalance
-            labelPost={` (${rewarded ? rewarded[0] : '0'})`}
-            value={rewardedTotal}
-          />
-        }
-      />
+      {(!rewarded || rewarded[0] !== 0) && (
+        <ExpanderScroll
+          className={rewarded ? '' : '--placeholder'}
+          renderChildren={rewarded && rewarded[1]}
+          summary={
+            <FormatBalance
+              labelPost={` (${rewarded ? rewarded[0] : '0'})`}
+              value={rewardedTotal}
+            />
+          }
+        />
+      )}
      {unrewarded && (
        <ExpanderScroll
          className='stakeOver'
--- a/packages/page-staking/src/Validators/Address/index.tsx
+++ b/packages/page-staking/src/Validators/Address/index.tsx
@ -44,14 +44,14 @@ interface Props {
 interface StakingState {
  isChilled?: boolean;
  commission?: string;
-  nominators: NominatorValue[];
+  nominators?: NominatorValue[];
  stakeTotal?: BN;
  stakeOther?: BN;
  stakeOwn?: BN;
 }

 function expandInfo ({ exposure, validatorPrefs }: ValidatorInfo, minCommission?: BN): StakingState {
-  let nominators: NominatorValue[] = [];
+  let nominators: NominatorValue[] | undefined;
  let stakeTotal: BN | undefined;
  let stakeOther: BN | undefined;
  let stakeOwn: BN | undefined;
@ -99,7 +99,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
  const { commission, isChilled, nominators, stakeOther, stakeOwn } = useMemo(
    () => validatorInfo
      ? expandInfo(validatorInfo, minCommission)
-      : { nominators: [] },
+      : {},
    [minCommission, validatorInfo]
  );

@ -124,7 +124,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,

  return (
    <>
-      <tr className={`${className} isFirst ${isExpanded ? 'packedBottom' : 'isLast'}`}>
+      <tr className={`${className} isExpanded isFirst ${isExpanded ? 'packedBottom' : 'isLast'}`}>
        <Table.Column.Favorite
          address={address}
          isFavorite={isFavorite}
--- a/packages/page-tech-comm/src/Overview/Summary.tsx
+++ b/packages/page-tech-comm/src/Overview/Summary.tsx
@ -22,16 +22,18 @@ function Summary ({ className = '', members, proposalHashes, type }: Props): Rea
      <CardSummary label={t<string>('members')}>
        {formatNumber(members.length)}
      </CardSummary>
-      {proposalCount && (
-        <section>
-          <CardSummary label={t<string>('proposals')}>
-            {formatNumber(proposalHashes?.length)}
-          </CardSummary>
-          <CardSummary label={t<string>('total')}>
-            {formatNumber(proposalCount)}
-          </CardSummary>
-        </section>
-      )}
+      <section>
+        <CardSummary label={t<string>('proposals')}>
+          {proposalHashes
+            ? formatNumber(proposalHashes?.length)
+            : <span className='--placeholder'>99</span>}
+        </CardSummary>
+        <CardSummary label={t<string>('total')}>
+          {proposalCount
+            ? formatNumber(proposalCount)
+            : <span className='--placeholder'>99</span>}
+        </CardSummary>
+      </section>
    </SummaryBox>
  );
 }
--- a/packages/react-components/src/CardSummary.tsx
+++ b/packages/react-components/src/CardSummary.tsx
@ -87,7 +87,7 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
                    }`
                    : (
                      <BlockToTime
-                        className='timer'
+                        className={`${progress.isBlurred ? '--placeholder' : ''} timer`}
                        value={progress.total.sub(progress.value)}
                      />
                    )
--- a/packages/react-components/src/LinkExternal.tsx
+++ b/packages/react-components/src/LinkExternal.tsx
@ -73,7 +73,7 @@ function LinkExternal ({ className = '', data, hash, isSidebar, isSmall, isText,
      <div className='links'>
        {links.length
          ? links.map((link, index) => <span key={index}>{link}</span>)
-          : <label>{t('none')}</label>
+          : <div>{t<string>('none')}</div>
        }
      </div>
    </div>