Fix payout UI for staking (#11035)

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

@@ -39,13 +39,25 @@ function createExtrinsics (api: ApiPromise, payout: PayoutValidator | PayoutVali
   if (!Array.isArray(payout)) {
     const { eras, validatorId } = payout;
 
+    if (eras.every((e) => e.isClaimed)) {
+      return null;
+    }
+
     return eras.length === 1
       ? [api.tx.staking.payoutStakers(validatorId, eras[0].era)]
       : createStream(api, eras.map((era): SinglePayout => ({ era: era.era, validatorId })));
   } else if (payout.length === 1) {
+    if (payout[0].eras.every((e) => e.isClaimed)) {
+      return null;
+    }
+
     return createExtrinsics(api, payout[0]);
   }
 
+  if (!payout.some((p) => p.eras.some((e) => !e.isClaimed))) {
+    return null;
+  }
+
   return createStream(api, payout.reduce((payouts: SinglePayout[], { eras, validatorId }): SinglePayout[] => {
     eras.forEach(({ era }): void => {
       payouts.push({ era, validatorId });
@@ -76,7 +88,7 @@ function PayButton ({ className, isAll, isDisabled, payout }: Props): React.Reac
     );
   }, [api, payout]);
 
-  const isPayoutEmpty = !payout || (Array.isArray(payout) && payout.length === 0);
+  const isPayoutEmpty = !payout || (Array.isArray(payout) && !payout.some((p) => p.eras.some((e) => !e.isClaimed))) || (Array.isArray(payout) && payout.length === 0);
 
   return (
     <>

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

@@ -30,7 +30,7 @@ function Stash ({ className = '', historyDepth, payout: { available, rewards, st
 
   useEffect((): void => {
     rewards && setEraInfo({
-      eraStr: createErasString(rewards.map(({ era }) => era)),
+      eraStr: createErasString(rewards.filter(({ isClaimed }) => !isClaimed).map(({ era }) => era)),
       oldestEra: rewards[0]?.era
     });
   }, [rewards]);

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

@@ -29,7 +29,7 @@ interface State {
 }
 
 function extractState (payout: PayoutValidator): State {
-  const eraStr = createErasString(payout.eras.map(({ era }) => era));
+  const eraStr = createErasString(payout.eras.filter(({ isClaimed }) => !isClaimed).map(({ era }) => era));
   const nominators = payout.eras.reduce((nominators: Record<string, BN>, { stashes }): Record<string, BN> => {
     Object.entries(stashes).forEach(([stashId, value]): void => {
       if (nominators[stashId]) {

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

@@ -60,6 +60,7 @@ function groupByValidator (allRewards: Record<string, DeriveStakerReward[]>): Pa
                 } else {
                   entry.eras.push({
                     era: reward.era,
+                    isClaimed: reward.isClaimed,
                     stashes: { [stashId]: value }
                   });
                 }
@@ -71,6 +72,7 @@ function groupByValidator (allRewards: Record<string, DeriveStakerReward[]>): Pa
                   available: value,
                   eras: [{
                     era: reward.era,
+                    isClaimed: reward.isClaimed,
                     stashes: { [stashId]: value }
                   }],
                   total,
@@ -97,6 +99,7 @@ function extractStashes (allRewards: Record<string, DeriveStakerReward[]>): Payo
       stashId
     }))
     .filter(({ available }) => !available.isZero())
+    .filter(({ rewards }) => rewards.some((r) => !r.isClaimed))
     .sort((a, b) => b.available.cmp(a.available));
 }
 
@@ -270,7 +273,7 @@ function Payouts ({ className = '', historyDepth, isInElection, ownPools, ownVal
           />
         ))}
       </Table>
-      {(myStashesIndex === 1) && !isLoadingRewards && validators && (validators.length !== 0) && (
+      {(myStashesIndex === 1) && !isLoadingRewards && validators && (validators.length !== 0) && validators.filter(({ eras }) => eras.some((e) => !e.isClaimed)).length > 0 && (
         <Table
           footer={footerVal}
           header={headerValidatorsRef.current}

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

@@ -8,6 +8,7 @@ import type { BN } from '@polkadot/util';
 export interface PayoutEraValidator {
   era: EraIndex;
   stashes: Record<string, Balance>;
+  isClaimed: boolean;
 }
 
 export interface PayoutValidator {

packages/react-hooks/src/useOwnEraRewards.ts

@@ -87,7 +87,6 @@ function getValRewards (api: ApiPromise, validatorEras: ValidatorWithEras[], era
           allRewards[stashId].push({
             era,
             eraReward: eraRewards.eraReward,
-            // Place holder for https://github.com/polkadot-js/apps/pull/11035
             isClaimed: false,
             isEmpty: false,
             isValidator: true,