Loading on payout era toggle (#3045)

* Loading on payout era toggle

* Some in-place BN adjustments

* More in-place additions

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 0.47.0-beta.x
 
+- Default (via toggle) to only last 25% of eras for payouts
 - Allow retracting of tips by proposer
 - Enable the full retrieval of all Map/Doublemap entries
 

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

@@ -98,7 +98,7 @@ function Payouts ({ className = '', isInElection }: Props): React.ReactElement<P
   const [partialEras, setPartialEras] = useState(21);
   const historyDepth = useCall<u32>(api.query.staking.historyDepth, []);
   const stakerPayoutsAfter = useStakerPayouts();
-  const { allRewards } = useOwnEraRewards(!historyDepth || isPartialEras ? partialEras : historyDepth.toNumber());
+  const { allRewards, isLoadingRewards } = useOwnEraRewards(!historyDepth || isPartialEras ? partialEras : historyDepth.toNumber());
   const { t } = useTranslation();
   const isDisabled = isInElection || !isFunction(api.tx.utility?.batch);
 
@@ -176,13 +176,13 @@ function Payouts ({ className = '', isInElection }: Props): React.ReactElement<P
       )}
       <ElectionBanner isInElection={isInElection} />
       <Table
-        empty={stashes && t<string>('No pending payouts for your stashes')}
+        empty={!isLoadingRewards && stashes && t<string>('No pending payouts for your stashes')}
         emptySpinner={t<string>('Retrieving info for all applicable eras, this will take some time')}
         footer={footer}
         header={headerStashes}
         isFixed
       >
-        {stashes?.map((payout): React.ReactNode => (
+        {!isLoadingRewards && stashes?.map((payout): React.ReactNode => (
           <Stash
             isDisabled={isDisabled}
             key={payout.stashId}
@@ -191,12 +191,12 @@ function Payouts ({ className = '', isInElection }: Props): React.ReactElement<P
           />
         ))}
       </Table>
-      {api.tx.staking.payoutStakers && validators && (validators.length !== 0) && (
+      {api.tx.staking.payoutStakers && !isLoadingRewards && validators && (validators.length !== 0) && (
         <Table
           header={headerValidators}
           isFixed
         >
-          {validators.map((payout): React.ReactNode => (
+          {!isLoadingRewards && validators.map((payout): React.ReactNode => (
             <Validator
               isDisabled={isDisabled}
               key={payout.validatorId}

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

@@ -19,14 +19,16 @@ export default function useEraBlocks (era?: BN): BN | undefined {
 
   useEffect((): void => {
     depth && era && forcing && progress && progress.sessionLength.gt(BN_ONE) && setDuration(
-      (forcing.isForceAlways
-        ? progress.sessionLength
-        : progress.eraLength
+      (
+        forcing.isForceAlways
+          ? progress.sessionLength
+          : progress.eraLength
       ).mul(
         depth
-          .sub(progress.activeEra.sub(era))
-          .add(BN_ONE)
-      ).sub(
+          .sub(progress.activeEra)
+          .iadd(era)
+          .iadd(BN_ONE)
+      ).isub(
         forcing.isForceAlways
           ? progress.sessionProgress
           : progress.eraProgress

packages/react-hooks/src/useOwnEraRewards.ts

@@ -14,6 +14,7 @@ import { useOwnStashIds } from './useOwnStashes';
 
 interface OwnRewards {
   allRewards?: Record<string, DeriveStakerReward[]>;
+  isLoadingRewards: boolean;
   rewardCount: number;
 }
 
@@ -26,6 +27,7 @@ function getRewards ([[stashIds], available]: [[string[]], DeriveStakerReward[][
 
   return {
     allRewards,
+    isLoadingRewards: false,
     rewardCount: Object.values(allRewards).filter((rewards) => rewards.length !== 0).length
   };
 }
@@ -37,7 +39,11 @@ export default function useOwnEraRewards (maxEras = 1000): OwnRewards {
   const allEras = useCall<EraIndex[]>(api.derive.staking?.erasHistoric, []);
   const [filteredEras, setFilteredEras] = useState<EraIndex[]>([]);
   const available = useCall<[[string[]], DeriveStakerReward[][]]>((filteredEras?.length > 0) && stashIds && api.derive.staking?.stakerRewardsMultiEras, [stashIds, filteredEras], { withParams: true });
-  const [state, setState] = useState<OwnRewards>({ rewardCount: 0 });
+  const [state, setState] = useState<OwnRewards>({ isLoadingRewards: true, rewardCount: 0 });
+
+  useEffect((): void => {
+    setState({ isLoadingRewards: true, rewardCount: 0 });
+  }, [maxEras]);
 
   useEffect((): void => {
     mountedRef.current && available && setState(