Pass through historyDepth (#7699)

packages/apps/src/WarmUp.tsx

@@ -10,11 +10,10 @@ function WarmUp (): React.ReactElement {
   const indexes = useCall<unknown>(isApiReady && api.derive.accounts?.indexes);
   const registrars = useCall<unknown>(isApiReady && api.query.identity?.registrars);
   const issuance = useCall<unknown>(isApiReady && api.query.balances?.totalIssuance);
-  const historyDepth = useCall<unknown>(isApiReady && api.query.staking?.historyDepth);
   const [hasValues, setHasValues] = useState(false);
 
   useEffect((): void => {
-    setHasValues(!!historyDepth || !!indexes || !!issuance || !!registrars);
+    setHasValues(!!indexes || !!issuance || !!registrars);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

packages/page-staking/src/Payouts/Stash.tsx

@@ -14,6 +14,7 @@ import { createErasString } from './util';
 
 interface Props {
   className?: string;
+  historyDepth?: BN;
   payout: PayoutStash;
 }
 
@@ -22,9 +23,9 @@ interface EraInfo {
   oldestEra?: BN;
 }
 
-function Stash ({ className = '', payout: { available, rewards, stashId } }: Props): React.ReactElement<Props> {
+function Stash ({ className = '', historyDepth, payout: { available, rewards, stashId } }: Props): React.ReactElement<Props> {
   const [{ eraStr, oldestEra }, setEraInfo] = useState<EraInfo>({ eraStr: '' });
-  const eraBlocks = useEraBlocks(oldestEra);
+  const eraBlocks = useEraBlocks(historyDepth, oldestEra);
 
   useEffect((): void => {
     rewards && setEraInfo({

packages/page-staking/src/Payouts/Validator.tsx

@@ -16,6 +16,7 @@ import { createErasString } from './util';
 
 interface Props {
   className?: string;
+  historyDepth?: BN;
   isDisabled?: boolean;
   payout: PayoutValidator;
 }
@@ -44,7 +45,7 @@ function extractState (payout: PayoutValidator): State {
   return { eraStr, nominators, numNominators: Object.keys(nominators).length, oldestEra: payout.eras[0]?.era };
 }
 
-function Validator ({ className = '', isDisabled, payout }: Props): React.ReactElement<Props> {
+function Validator ({ className = '', historyDepth, isDisabled, payout }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const { eraStr, nominators, numNominators, oldestEra } = useMemo(
@@ -52,7 +53,7 @@ function Validator ({ className = '', isDisabled, payout }: Props): React.ReactE
     [payout]
   );
 
-  const eraBlocks = useEraBlocks(oldestEra);
+  const eraBlocks = useEraBlocks(historyDepth, oldestEra);
 
   return (
     <tr className={className}>

packages/page-staking/src/Payouts/index.tsx

@@ -23,6 +23,7 @@ import Validator from './Validator';
 
 interface Props {
   className?: string;
+  historyDepth?: BN;
   isInElection?: boolean;
   ownPools?: OwnPool[];
   ownValidators: StakerState[];
@@ -158,14 +159,13 @@ function getOptions (blockTime: BN, eraLength: BN | undefined, historyDepth: BN
   return eraSelection;
 }
 
-function Payouts ({ className = '', isInElection, ownPools, ownValidators }: Props): React.ReactElement<Props> {
+function Payouts ({ className = '', historyDepth, isInElection, ownPools, ownValidators }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [hasOwnValidators] = useState(() => ownValidators.length !== 0);
   const [myStashesIndex, setMyStashesIndex] = useState(() => hasOwnValidators ? 0 : 1);
   const [eraSelectionIndex, setEraSelectionIndex] = useState(0);
   const eraLength = useCall<BN>(api.derive.session.eraLength);
-  const historyDepth = useCall<BN>(api.query.staking.historyDepth);
   const blockTime = useBlockInterval();
 
   const poolStashes = useMemo(
@@ -268,6 +268,7 @@ function Payouts ({ className = '', isInElection, ownPools, ownValidators }: Pro
       >
         {!isLoadingRewards && stashes?.map((payout): React.ReactNode => (
           <Stash
+            historyDepth={historyDepth}
             key={payout.stashId}
             payout={payout}
           />
@@ -281,6 +282,7 @@ function Payouts ({ className = '', isInElection, ownPools, ownValidators }: Pro
         >
           {!isLoadingRewards && validators.filter(({ available }) => !available.isZero()).map((payout): React.ReactNode => (
             <Validator
+              historyDepth={historyDepth}
               isDisabled={isInElection}
               key={payout.validatorId}
               payout={payout}

packages/page-staking/src/Payouts/useEraBlocks.ts

@@ -10,20 +10,19 @@ import { useMemo } from 'react';
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 import { BN_ONE } from '@polkadot/util';
 
-function useEraBlocksImpl (era?: BN): BN | undefined {
+function useEraBlocksImpl (historyDepth?: BN, era?: BN): BN | undefined {
   const { api } = useApi();
-  const depth = useCall<BN>(api.query.staking.historyDepth);
   const progress = useCall<DeriveSessionProgress>(api.derive.session.progress);
   const forcing = useCall<Forcing>(api.query.staking.forceEra);
 
   return useMemo(
-    () => (depth && era && forcing && progress && progress.sessionLength.gt(BN_ONE))
+    () => (historyDepth && era && forcing && progress && progress.sessionLength.gt(BN_ONE))
       ? (
         forcing.isForceAlways
           ? progress.sessionLength
           : progress.eraLength
       ).mul(
-        depth
+        historyDepth
           .sub(progress.activeEra)
           .iadd(era)
           .iadd(BN_ONE)
@@ -33,7 +32,7 @@ function useEraBlocksImpl (era?: BN): BN | undefined {
           : progress.eraProgress
       )
       : undefined,
-    [depth, era, forcing, progress]
+    [era, forcing, historyDepth, progress]
   );
 }
 

packages/page-staking/src/index.tsx

@@ -163,6 +163,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
         </Route>
         <Route path={pathRef.current.payout}>
           <Payouts
+            historyDepth={targets.historyDepth}
             isInElection={isInElection}
             ownPools={ownPools}
             ownValidators={ownValidators}

packages/page-staking/src/types.ts

@@ -79,6 +79,7 @@ export interface SortedTargets {
   counterForNominators?: BN;
   counterForValidators?: BN;
   electedIds?: string[];
+  historyDepth?: BN;
   inflation: Inflation;
   lastEra?: BN;
   lowStaked?: BN;

packages/page-staking/src/useSortedTargets.ts

@@ -310,6 +310,7 @@ function useSortedTargetsImpl (favorites: string[], withLedger: boolean): Sorted
   return {
     counterForNominators,
     counterForValidators,
+    historyDepth,
     inflation,
     maxNominatorsCount,
     maxValidatorsCount,