diff --git a/package.json b/package.json
index e500836e52..797e5d3436 100644
--- a/package.json
+++ b/package.json
@@ -33,10 +33,10 @@
     "afterSign": "electron-builder-notarize"
   },
   "resolutions": {
-    "@polkadot/api": "^1.22.0-beta.2",
-    "@polkadot/api-contract": "^1.22.0-beta.2",
+    "@polkadot/api": "^1.22.0-beta.3",
+    "@polkadot/api-contract": "^1.22.0-beta.3",
     "@polkadot/keyring": "^2.15.1",
-    "@polkadot/types": "^1.22.0-beta.2",
+    "@polkadot/types": "^1.22.0-beta.3",
     "@polkadot/util": "^2.15.1",
     "@polkadot/util-crypto": "^2.15.1",
     "babel-core": "^7.0.0-bridge.0"
diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json
index 0d8304a866..a3cf629328 100644
--- a/packages/page-contracts/package.json
+++ b/packages/page-contracts/package.json
@@ -12,6 +12,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.10.3",
-    "@polkadot/api-contract": "^1.22.0-beta.2"
+    "@polkadot/api-contract": "^1.22.0-beta.3"
   }
 }
diff --git a/packages/page-staking/src/Filtering.tsx b/packages/page-staking/src/Filtering.tsx
index aa75a35381..1be70150eb 100644
--- a/packages/page-staking/src/Filtering.tsx
+++ b/packages/page-staking/src/Filtering.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
-import styled from 'styled-components';
 import { Input, Toggle } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
@@ -46,14 +45,4 @@ function Filtering ({ children, className, nameFilter, setNameFilter, setWithIde
   );
 }
 
-export default React.memo(styled(Filtering)`
-  .staking--optionsBar {
-    text-align: right;
-
-    .staking--buttonToggle {
-      display: inline-block;
-      margin-right: 1rem;
-      margin-top: 0.5rem;
-    }
-  }
-`);
+export default React.memo(Filtering);
diff --git a/packages/page-staking/src/Payouts/index.tsx b/packages/page-staking/src/Payouts/index.tsx
index 8bef55dc19..694f33a59b 100644
--- a/packages/page-staking/src/Payouts/index.tsx
+++ b/packages/page-staking/src/Payouts/index.tsx
@@ -8,9 +8,10 @@ import { PayoutStash, PayoutValidator } from './types';
 import BN from 'bn.js';
 import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { Button, Table } from '@polkadot/react-components';
-import { useApi, useOwnEraRewards } from '@polkadot/react-hooks';
+import { Button, Table, Toggle } from '@polkadot/react-components';
+import { useApi, useCall, useOwnEraRewards } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
+import { u32 } from '@polkadot/types';
 import { BN_ZERO, isFunction } from '@polkadot/util';
 
 import ElectionBanner from '../ElectionBanner';
@@ -93,8 +94,11 @@ function extractStashes (allRewards: Record<string, DeriveStakerReward[]>): Payo
 function Payouts ({ className = '', isInElection }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [{ stashTotal, stashes, validators }, setPayouts] = useState<Available>({});
+  const [isPartialEras, setIsPartialEras] = useState(true);
+  const [partialEras, setPartialEras] = useState(21);
+  const historyDepth = useCall<u32>(api.query.staking.historyDepth, []);
   const stakerPayoutsAfter = useStakerPayouts();
-  const { allRewards } = useOwnEraRewards();
+  const { allRewards } = useOwnEraRewards(!historyDepth || isPartialEras ? partialEras : historyDepth.toNumber());
   const { t } = useTranslation();
   const isDisabled = isInElection || !isFunction(api.tx.utility?.batch);
 
@@ -113,6 +117,12 @@ function Payouts ({ className = '', isInElection }: Props): React.ReactElement<P
     }
   }, [allRewards, stakerPayoutsAfter]);
 
+  useEffect((): void => {
+    historyDepth && setPartialEras(
+      Math.ceil(historyDepth.toNumber() / 4)
+    );
+  }, [historyDepth, isPartialEras]);
+
   const headerStashes = useMemo(() => [
     [t('payout/stash'), 'start', 2],
     [t('eras'), 'start'],
@@ -142,13 +152,27 @@ function Payouts ({ className = '', isInElection }: Props): React.ReactElement<P
   return (
     <div className={className}>
       {api.tx.staking.payoutStakers && (
-        <Button.Group>
-          <PayButton
-            isAll
-            isDisabled={isDisabled}
-            payout={validators}
-          />
-        </Button.Group>
+        <>
+          <Button.Group>
+            <PayButton
+              isAll
+              isDisabled={isDisabled}
+              payout={validators}
+            />
+          </Button.Group>
+          {historyDepth && (
+            <div className='staking--optionsBar'>
+              <Toggle
+                className='staking--buttonToggle'
+                label={t<string>('only query most recent {{partialEras}} of {{historyDepth}} eras', {
+                  replace: { historyDepth: historyDepth.toNumber(), partialEras }
+                })}
+                onChange={setIsPartialEras}
+                value={isPartialEras}
+              />
+            </div>
+          )}
+        </>
       )}
       <ElectionBanner isInElection={isInElection} />
       <Table
diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx
index 215845a90f..c5ee965729 100644
--- a/packages/page-staking/src/index.tsx
+++ b/packages/page-staking/src/index.tsx
@@ -172,4 +172,14 @@ export default React.memo(styled(StakingApp)`
       margin: 2.5rem auto;
     }
   }
+
+  .staking--optionsBar {
+    text-align: right;
+
+    .staking--buttonToggle {
+      display: inline-block;
+      margin-right: 1rem;
+      margin-top: 0.5rem;
+    }
+  }
 `);
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index 867381db58..eac7a562d1 100644
--- a/packages/react-api/package.json
+++ b/packages/react-api/package.json
@@ -31,7 +31,7 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.10.3",
-    "@polkadot/api": "^1.22.0-beta.2",
+    "@polkadot/api": "^1.22.0-beta.3",
     "@polkadot/extension-dapp": "^0.31.1",
     "rxjs-compat": "^6.5.5"
   }
diff --git a/packages/react-hooks/src/useOwnEraRewards.ts b/packages/react-hooks/src/useOwnEraRewards.ts
index 7c60fbc8cc..aeb13b57db 100644
--- a/packages/react-hooks/src/useOwnEraRewards.ts
+++ b/packages/react-hooks/src/useOwnEraRewards.ts
@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveStakerReward } from '@polkadot/api-derive/types';
+import { EraIndex } from '@polkadot/types/interfaces';
 
 import { useEffect, useState } from 'react';
 
@@ -29,11 +30,13 @@ function getRewards ([[stashIds], available]: [[string[]], DeriveStakerReward[][
   };
 }
 
-export default function useOwnEraRewards (): OwnRewards {
+export default function useOwnEraRewards (maxEras = 1000): OwnRewards {
   const { api } = useApi();
   const mountedRef = useIsMountedRef();
   const stashIds = useOwnStashIds();
-  const available = useCall<[[string[]], DeriveStakerReward[][]]>(stashIds && api.derive.staking?.stakerRewardsMulti, [stashIds], { withParams: true });
+  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 });
 
   useEffect((): void => {
@@ -42,5 +45,11 @@ export default function useOwnEraRewards (): OwnRewards {
     );
   }, [available, mountedRef]);
 
+  useEffect((): void => {
+    allEras && setFilteredEras(
+      allEras.reverse().filter((_, index) => index < maxEras).reverse()
+    );
+  }, [allEras, maxEras]);
+
   return state;
 }
diff --git a/yarn.lock b/yarn.lock
index 6c93f1c094..579872aab9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2911,57 +2911,57 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-contract@npm:^1.22.0-beta.2":
-  version: 1.22.0-beta.2
-  resolution: "@polkadot/api-contract@npm:1.22.0-beta.2"
+"@polkadot/api-contract@npm:^1.22.0-beta.3":
+  version: 1.22.0-beta.3
+  resolution: "@polkadot/api-contract@npm:1.22.0-beta.3"
   dependencies:
     "@babel/runtime": ^7.10.3
-    "@polkadot/api": 1.22.0-beta.2
-    "@polkadot/rpc-core": 1.22.0-beta.2
-    "@polkadot/types": 1.22.0-beta.2
+    "@polkadot/api": 1.22.0-beta.3
+    "@polkadot/rpc-core": 1.22.0-beta.3
+    "@polkadot/types": 1.22.0-beta.3
     "@polkadot/util": ^2.15.1
     bn.js: ^5.1.2
     rxjs: ^6.5.5
-  checksum: 3/d9696b76c36cc7a266607b07bbda065b3e976b7249904f9b84c6e77394930902fd3e83ed8cd8a893464f2e5f814be56de04694f98fb60e76951d617bee92bcfd
+  checksum: 3/32675dc2a3e5d1cdd89a6acef18e6af48dd5285e25d66dce424227e081c3ed72e95b78501b56243a1544fd63b8b3e1cf465cce3e0a785825b1a251b843b59f62
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:1.22.0-beta.2":
-  version: 1.22.0-beta.2
-  resolution: "@polkadot/api-derive@npm:1.22.0-beta.2"
+"@polkadot/api-derive@npm:1.22.0-beta.3":
+  version: 1.22.0-beta.3
+  resolution: "@polkadot/api-derive@npm:1.22.0-beta.3"
   dependencies:
     "@babel/runtime": ^7.10.3
-    "@polkadot/api": 1.22.0-beta.2
-    "@polkadot/rpc-core": 1.22.0-beta.2
-    "@polkadot/rpc-provider": 1.22.0-beta.2
-    "@polkadot/types": 1.22.0-beta.2
+    "@polkadot/api": 1.22.0-beta.3
+    "@polkadot/rpc-core": 1.22.0-beta.3
+    "@polkadot/rpc-provider": 1.22.0-beta.3
+    "@polkadot/types": 1.22.0-beta.3
     "@polkadot/util": ^2.15.1
     "@polkadot/util-crypto": ^2.15.1
     bn.js: ^5.1.2
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 3/cbe9b71ae31a0c2b01c0f973fbcc0e7ea0dbe2ca7cf87a80fdf25cc80bcb0568c3d7dcc21349641f932db4cc7fc2385557e884ba58a9bc17cb1f2498e648eb7d
+  checksum: 3/7bcf17204c36a6cd81d5e4a74b382cab3076096a31a085b56f3f9c9c1af617bf09c3ae1c3892c3c4191f4afddfffa265e897be129ebfa40dfc090244479ec068
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:^1.22.0-beta.2":
-  version: 1.22.0-beta.2
-  resolution: "@polkadot/api@npm:1.22.0-beta.2"
+"@polkadot/api@npm:^1.22.0-beta.3":
+  version: 1.22.0-beta.3
+  resolution: "@polkadot/api@npm:1.22.0-beta.3"
   dependencies:
     "@babel/runtime": ^7.10.3
-    "@polkadot/api-derive": 1.22.0-beta.2
+    "@polkadot/api-derive": 1.22.0-beta.3
     "@polkadot/keyring": ^2.15.1
-    "@polkadot/metadata": 1.22.0-beta.2
-    "@polkadot/rpc-core": 1.22.0-beta.2
-    "@polkadot/rpc-provider": 1.22.0-beta.2
-    "@polkadot/types": 1.22.0-beta.2
-    "@polkadot/types-known": 1.22.0-beta.2
+    "@polkadot/metadata": 1.22.0-beta.3
+    "@polkadot/rpc-core": 1.22.0-beta.3
+    "@polkadot/rpc-provider": 1.22.0-beta.3
+    "@polkadot/types": 1.22.0-beta.3
+    "@polkadot/types-known": 1.22.0-beta.3
     "@polkadot/util": ^2.15.1
     "@polkadot/util-crypto": ^2.15.1
     bn.js: ^5.1.2
     eventemitter3: ^4.0.4
     rxjs: ^6.5.5
-  checksum: 3/7a210737af685ada21e6fede485ef5b60b9f59b61835cb0e292d05c24bcb408bbf9026d69d9308f948dd510010596912794b78f107e8e3f601d1980f212dc601
+  checksum: 3/f2dc69e943a3f10e639628ac0c669c5b8802b6a74d779a6cc20020233c61698e02fb9752c2d5ab25d74b18c45600a0398a79eb376d305ed7180e9e57a2cc345b
   languageName: node
   linkType: hard
 
@@ -3002,7 +3002,7 @@ __metadata:
   resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
   dependencies:
     "@babel/runtime": ^7.10.3
-    "@polkadot/api-contract": ^1.22.0-beta.2
+    "@polkadot/api-contract": ^1.22.0-beta.3
   languageName: unknown
   linkType: soft
 
@@ -3360,17 +3360,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/metadata@npm:1.22.0-beta.2":
-  version: 1.22.0-beta.2
-  resolution: "@polkadot/metadata@npm:1.22.0-beta.2"
+"@polkadot/metadata@npm:1.22.0-beta.3":
+  version: 1.22.0-beta.3
+  resolution: "@polkadot/metadata@npm:1.22.0-beta.3"
   dependencies:
     "@babel/runtime": ^7.10.3
-    "@polkadot/types": 1.22.0-beta.2
-    "@polkadot/types-known": 1.22.0-beta.2
+    "@polkadot/types": 1.22.0-beta.3
+    "@polkadot/types-known": 1.22.0-beta.3
     "@polkadot/util": ^2.15.1
     "@polkadot/util-crypto": ^2.15.1
     bn.js: ^5.1.2
-  checksum: 3/c35a7e35b0ef5e5f4f97f7aaeb3997b23fe0e5b8806f1b74ba45366a4fa9921adb5199eae4867c7747f09028136a09ffee03cec17ba7b1dbead577ea2a3bf89c
+  checksum: 3/6a6e1ed23eedd75f9256025838693108e0d6a59df81c3a6d4d85f67cb354248ee6b900103210bb64cb422073208f2ba0f8791adb2ce681dcc0e05e6305f33e54
   languageName: node
   linkType: hard
 
@@ -3379,7 +3379,7 @@ __metadata:
   resolution: "@polkadot/react-api@workspace:packages/react-api"
   dependencies:
     "@babel/runtime": ^7.10.3
-    "@polkadot/api": ^1.22.0-beta.2
+    "@polkadot/api": ^1.22.0-beta.3
     "@polkadot/extension-dapp": ^0.31.1
     rxjs-compat: ^6.5.5
   languageName: unknown
@@ -3496,35 +3496,35 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/rpc-core@npm:1.22.0-beta.2":
-  version: 1.22.0-beta.2
-  resolution: "@polkadot/rpc-core@npm:1.22.0-beta.2"
+"@polkadot/rpc-core@npm:1.22.0-beta.3":
+  version: 1.22.0-beta.3
+  resolution: "@polkadot/rpc-core@npm:1.22.0-beta.3"
   dependencies:
     "@babel/runtime": ^7.10.3
-    "@polkadot/metadata": 1.22.0-beta.2
-    "@polkadot/rpc-provider": 1.22.0-beta.2
-    "@polkadot/types": 1.22.0-beta.2
+    "@polkadot/metadata": 1.22.0-beta.3
+    "@polkadot/rpc-provider": 1.22.0-beta.3
+    "@polkadot/types": 1.22.0-beta.3
     "@polkadot/util": ^2.15.1
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 3/786d93bd0a900e1cacee08fbe48647697c692a8f00b0f782fe185e58f1dc5def6e6989fc4aec3a0f9b10c0e076ae9af8b4999a264bf67a0cf2a502d1595936e3
+  checksum: 3/750d889e318cb61d0b197821ffdef7b4f1b104918f4b9679e30fbd2ca048c427ab4c12d1064e96c26d939fd1eee7bffdf7c1da31ad2a2dd4498bf2ca64e37deb
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:1.22.0-beta.2":
-  version: 1.22.0-beta.2
-  resolution: "@polkadot/rpc-provider@npm:1.22.0-beta.2"
+"@polkadot/rpc-provider@npm:1.22.0-beta.3":
+  version: 1.22.0-beta.3
+  resolution: "@polkadot/rpc-provider@npm:1.22.0-beta.3"
   dependencies:
     "@babel/runtime": ^7.10.3
-    "@polkadot/metadata": 1.22.0-beta.2
-    "@polkadot/types": 1.22.0-beta.2
+    "@polkadot/metadata": 1.22.0-beta.3
+    "@polkadot/types": 1.22.0-beta.3
     "@polkadot/util": ^2.15.1
     "@polkadot/util-crypto": ^2.15.1
     bn.js: ^5.1.2
     eventemitter3: ^4.0.4
     isomorphic-fetch: ^2.2.1
     websocket: ^1.0.31
-  checksum: 3/a9f5c308c9da766f5e0f50d908d0bdc4dc6ca32942775e3fd397de8e51e92c5d3223343b6f18e0111ccdbd7a65b2ad666a001a71adcb8d496977392389f1eba1
+  checksum: 3/f4fac03546287eafbeeb5e15eabc86236c997e82c3ae19995a0f3a9c864a2efe90df7dfe8de39a69b9bfd0681b20a7bcac456f52cef8a2ac58ac04531e68b724
   languageName: node
   linkType: hard
 
@@ -3537,31 +3537,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-known@npm:1.22.0-beta.2":
-  version: 1.22.0-beta.2
-  resolution: "@polkadot/types-known@npm:1.22.0-beta.2"
+"@polkadot/types-known@npm:1.22.0-beta.3":
+  version: 1.22.0-beta.3
+  resolution: "@polkadot/types-known@npm:1.22.0-beta.3"
   dependencies:
     "@babel/runtime": ^7.10.3
-    "@polkadot/types": 1.22.0-beta.2
+    "@polkadot/types": 1.22.0-beta.3
     "@polkadot/util": ^2.15.1
     bn.js: ^5.1.2
-  checksum: 3/716bbe840289dc2f38c376871052ab3a55e0c809d1c2ce74218e2f07abb99f88c28adf2fb4c7bc79b462024cb173af247b14776a3bded923b8d081802cfe36e2
+  checksum: 3/6b9e3054e7f491ef1f847aff31eed1abc2cd7d560d0bc45ea509c72ffad7baf9303e70e12ede25c6d3afbdd7359a809a107e57a881b04c7aaa5dfe943b4ed591
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:^1.22.0-beta.2":
-  version: 1.22.0-beta.2
-  resolution: "@polkadot/types@npm:1.22.0-beta.2"
+"@polkadot/types@npm:^1.22.0-beta.3":
+  version: 1.22.0-beta.3
+  resolution: "@polkadot/types@npm:1.22.0-beta.3"
   dependencies:
     "@babel/runtime": ^7.10.3
-    "@polkadot/metadata": 1.22.0-beta.2
+    "@polkadot/metadata": 1.22.0-beta.3
     "@polkadot/util": ^2.15.1
     "@polkadot/util-crypto": ^2.15.1
     "@types/bn.js": ^4.11.6
     bn.js: ^5.1.2
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 3/ab3213ede606dce641815ef7e78a2b93f5f864639a4a7d08906f1e694aa21bcdf08ed3dfca2ec60038a0511a7e480479dc2265483f4c864ca451227acda18c57
+  checksum: 3/78fbb7173d1808b7445af498b9ddb0d678300fa034362aa777ff1da085a5f7831a9a423f0e5151b2347fb215e04edeb09770521635e6436905070910a64b7d80
   languageName: node
   linkType: hard