diff --git a/package.json b/package.json
index 6e975e4c3a..6dea939f67 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^1.9.0-beta.21",
-    "@polkadot/api-contract": "^1.9.0-beta.21",
+    "@polkadot/api": "^1.9.0-beta.22",
+    "@polkadot/api-contract": "^1.9.0-beta.22",
     "@polkadot/keyring": "^2.7.0-beta.8",
-    "@polkadot/types": "^1.9.0-beta.21",
+    "@polkadot/types": "^1.9.0-beta.22",
     "@polkadot/util": "^2.7.0-beta.8",
     "@polkadot/util-crypto": "^2.7.0-beta.8",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json
index c33468bda3..9117471e74 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.9.2",
-    "@polkadot/api-contract": "^1.9.0-beta.21"
+    "@polkadot/api-contract": "^1.9.0-beta.22"
   }
 }
diff --git a/packages/page-explorer/src/SummarySession.tsx b/packages/page-explorer/src/SummarySession.tsx
index f234977c69..ea90d4806c 100644
--- a/packages/page-explorer/src/SummarySession.tsx
+++ b/packages/page-explorer/src/SummarySession.tsx
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DeriveSessionInfo } from '@polkadot/api-derive/types';
+import { DeriveSessionProgress } from '@polkadot/api-derive/types';
 
 import React, { useMemo } from 'react';
 import { CardSummary } from '@polkadot/react-components';
@@ -19,7 +19,7 @@ interface Props {
 function SummarySession ({ withEra = true, withSession = true }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const sessionInfo = useCall<DeriveSessionInfo>(api.derive.session?.info, []);
+  const sessionInfo = useCall<DeriveSessionProgress>(api.derive.session?.progress, []);
   const eraLabel = useMemo(() =>
     t('era')
   , [t]);
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index 36e06b49b3..a54ede78bf 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.9.2",
-    "@polkadot/api": "^1.9.0-beta.21",
+    "@polkadot/api": "^1.9.0-beta.22",
     "@polkadot/extension-dapp": "^0.24.0-beta.0",
     "rxjs-compat": "^6.5.4"
   }
diff --git a/packages/react-components/src/StakingRedeemable.tsx b/packages/react-components/src/StakingRedeemable.tsx
index 3abcf43614..7143db4476 100644
--- a/packages/react-components/src/StakingRedeemable.tsx
+++ b/packages/react-components/src/StakingRedeemable.tsx
@@ -34,7 +34,7 @@ function StakingRedeemable ({ className, stakingInfo }: Props): React.ReactEleme
             isIcon
             key='unlock'
             params={[]}
-            tooltip={t('Withdraw these unlocked funds')}
+            tooltip={t('Withdraw these unbonded funds')}
             tx='staking.withdrawUnbonded'
           />
         )}
diff --git a/packages/react-components/src/StakingUnbonding.tsx b/packages/react-components/src/StakingUnbonding.tsx
index 6fec79bf29..51998cf7a5 100644
--- a/packages/react-components/src/StakingUnbonding.tsx
+++ b/packages/react-components/src/StakingUnbonding.tsx
@@ -2,12 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DeriveStakingAccount } from '@polkadot/api-derive/types';
+import { DeriveSessionProgress, DeriveStakingAccount, DeriveUnlocking } from '@polkadot/api-derive/types';
 
 import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
-import { FormatBalance } from '@polkadot/react-query';
+import { useApi, useCall } from '@polkadot/react-hooks';
+import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { formatBalance, formatNumber } from '@polkadot/util';
 
 import Icon from './Icon';
@@ -19,38 +20,48 @@ interface Props {
   stakingInfo?: DeriveStakingAccount;
 }
 
+function remainingBlocks (remainingEras: BN, { eraLength, eraProgress }: DeriveSessionProgress): BN {
+  return remainingEras
+    .subn(1)
+    .mul(eraLength)
+    .add(eraLength.sub(eraProgress));
+}
+
 function StakingUnbonding ({ className, stakingInfo }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const progress = useCall<DeriveSessionProgress>(api.derive.session.progress as any, []);
   const { t } = useTranslation();
 
-  if (!stakingInfo?.unlocking) {
+  if (!stakingInfo?.unlocking || !progress) {
     return null;
   }
 
-  const total = stakingInfo.unlocking.reduce((total, { value }): BN => total.add(value), new BN(0));
+  const filtered = stakingInfo.unlocking.filter(({ remainingEras, value }) => value.gtn(0) && remainingEras.gtn(0));
 
-  if (total.eqn(0)) {
+  if (!filtered.length) {
     return null;
   }
 
+  const mapped = filtered.map((unlock): [DeriveUnlocking, BN] => [unlock, remainingBlocks(unlock.remainingEras, progress)]);
+  const total = mapped.reduce((total, [{ value }]) => total.add(value), new BN(0));
   const trigger = `${stakingInfo.accountId}-unlocking-trigger`;
 
   return (
     <div className={className}>
       <FormatBalance value={total} />
       <Icon
-        name='info circle'
+        name='clock'
         data-tip
         data-for={trigger}
       />
       <Tooltip
-        text={stakingInfo.unlocking.map(({ remainingBlocks, value }, index): React.ReactNode => (
-          <div key={index}>
-            {t('Unbonding {{value}}, {{remaining}} blocks left', {
-              replace: {
-                remaining: formatNumber(remainingBlocks),
-                value: formatBalance(value, { forceUnit: '-' })
-              }
-            })}
+        text={mapped.map(([{ value }, blocks], index): React.ReactNode => (
+          <div className='row' key={index}>
+            <div>{t('Unbonding {{value}}, ', { replace: { value: formatBalance(value, { forceUnit: '-' }) } })}</div>
+            <BlockToTime
+              blocks={blocks}
+              label={`${t('{{blocks}} blocks', { replace: { blocks: formatNumber(blocks) } })}, `}
+            />
           </div>
         ))}
         trigger={trigger}
diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx
index 9ca2ec5a7c..e03da5b9c1 100644
--- a/packages/react-components/src/Tooltip.tsx
+++ b/packages/react-components/src/Tooltip.tsx
@@ -83,4 +83,8 @@ export default React.memo(styled(Tooltip)`
     opacity: 0.75 !important;
     font-size: 0.75em !important;
   }
+
+  .row+.row {
+    margin-top: 0.5rem;
+  }
 `);
diff --git a/packages/react-query/src/BlockToTime.tsx b/packages/react-query/src/BlockToTime.tsx
index dcf3f3a255..40caae241b 100644
--- a/packages/react-query/src/BlockToTime.tsx
+++ b/packages/react-query/src/BlockToTime.tsx
@@ -20,6 +20,7 @@ type Time = [number, number, number, number];
 
 const HRS = 60 * 60;
 const DAY = HRS * 24;
+const DEFAULT_TIME = new BN(6000);
 
 function addTime (a: Time, b: Time): Time {
   return [a[0] + b[0], a[1] + b[1], a[2] + b[2], a[3] + b[3]];
@@ -60,7 +61,7 @@ function BlockToTime ({ blocks, children, className, label, style }: Props): Rea
     const blockTime = (
       api.consts.babe?.expectedBlockTime ||
       api.consts.timestamp?.minimumPeriod.muln(2) ||
-      new BN(6000)
+      DEFAULT_TIME
     ).divn(1000);
     const time = extractTime(blocks?.mul(blockTime).toNumber());
 
diff --git a/yarn.lock b/yarn.lock
index 7d34de9fbf..828ca18bf8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2836,56 +2836,56 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-contract@npm:^1.9.0-beta.21":
-  version: 1.9.0-beta.21
-  resolution: "@polkadot/api-contract@npm:1.9.0-beta.21"
+"@polkadot/api-contract@npm:^1.9.0-beta.22":
+  version: 1.9.0-beta.22
+  resolution: "@polkadot/api-contract@npm:1.9.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": 1.9.0-beta.21
-    "@polkadot/rpc-core": 1.9.0-beta.21
-    "@polkadot/types": 1.9.0-beta.21
+    "@polkadot/api": 1.9.0-beta.22
+    "@polkadot/rpc-core": 1.9.0-beta.22
+    "@polkadot/types": 1.9.0-beta.22
     "@polkadot/util": ^2.7.0-beta.8
     bn.js: ^5.1.1
     rxjs: ^6.5.4
-  checksum: 2/17deb263029be98adcff905f88f1de1b9ece50764d56877d59315599db9c50f47dc0a3e89607d58a41d94c0e3dd8cc1f9447fa4e0c2acb3bf3f73b50cf45a5cf
+  checksum: 2/ba8a85ded93679ad8a2801ec1020db0f6007ea372da077491ba672d2c87281febe68bb5c4aaa097fb7d968523233c12445ed5e90abf263e17e85dab4fe80ae79
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:1.9.0-beta.21":
-  version: 1.9.0-beta.21
-  resolution: "@polkadot/api-derive@npm:1.9.0-beta.21"
+"@polkadot/api-derive@npm:1.9.0-beta.22":
+  version: 1.9.0-beta.22
+  resolution: "@polkadot/api-derive@npm:1.9.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": 1.9.0-beta.21
-    "@polkadot/rpc-core": 1.9.0-beta.21
-    "@polkadot/rpc-provider": 1.9.0-beta.21
-    "@polkadot/types": 1.9.0-beta.21
+    "@polkadot/api": 1.9.0-beta.22
+    "@polkadot/rpc-core": 1.9.0-beta.22
+    "@polkadot/rpc-provider": 1.9.0-beta.22
+    "@polkadot/types": 1.9.0-beta.22
     "@polkadot/util": ^2.7.0-beta.8
     "@polkadot/util-crypto": ^2.7.0-beta.8
     bn.js: ^5.1.1
     memoizee: ^0.4.14
     rxjs: ^6.5.4
-  checksum: 2/6b5acab49163be4f32aa71a9c816403a774e0bf75d0e384360aa671f0ddf68eb03bca6a340c35876451bda23f035e8a95c2e9f1e33bfc37618b2ea0911ec2f1c
+  checksum: 2/08ef5256ed69e521f66d24ef3b85ec6ec665755ec17107bf0dc720fab5c2d289a56d5670a1b64a516046dd5d69d7e87dc9b32985e0ada047502d71f9dbaf6e6e
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:^1.9.0-beta.21":
-  version: 1.9.0-beta.21
-  resolution: "@polkadot/api@npm:1.9.0-beta.21"
+"@polkadot/api@npm:^1.9.0-beta.22":
+  version: 1.9.0-beta.22
+  resolution: "@polkadot/api@npm:1.9.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api-derive": 1.9.0-beta.21
+    "@polkadot/api-derive": 1.9.0-beta.22
     "@polkadot/keyring": ^2.7.0-beta.8
-    "@polkadot/metadata": 1.9.0-beta.21
-    "@polkadot/rpc-core": 1.9.0-beta.21
-    "@polkadot/rpc-provider": 1.9.0-beta.21
-    "@polkadot/types": 1.9.0-beta.21
+    "@polkadot/metadata": 1.9.0-beta.22
+    "@polkadot/rpc-core": 1.9.0-beta.22
+    "@polkadot/rpc-provider": 1.9.0-beta.22
+    "@polkadot/types": 1.9.0-beta.22
     "@polkadot/util": ^2.7.0-beta.8
     "@polkadot/util-crypto": ^2.7.0-beta.8
     bn.js: ^5.1.1
     eventemitter3: ^4.0.0
     rxjs: ^6.5.4
-  checksum: 2/3ca5a70cc3f032c015481bc188181feb98139cfa60cc3bf6270ebb1bdf67f74743ca516e7968eea3837895834af2b586c0256e08d476a43aff0dece229c739ad
+  checksum: 2/756ecc0194ec789d349b15b196131f8ec9aeec129f78ac9ac763103d6b63562190a8ff046bd3ce6172d853d3a33ce4e09a0e2d9db7a68df74801df56513ee519
   languageName: node
   linkType: hard
 
@@ -2926,7 +2926,7 @@ __metadata:
   resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api-contract": ^1.9.0-beta.21
+    "@polkadot/api-contract": ^1.9.0-beta.22
   languageName: unknown
   linkType: soft
 
@@ -3250,16 +3250,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/metadata@npm:1.9.0-beta.21":
-  version: 1.9.0-beta.21
-  resolution: "@polkadot/metadata@npm:1.9.0-beta.21"
+"@polkadot/metadata@npm:1.9.0-beta.22":
+  version: 1.9.0-beta.22
+  resolution: "@polkadot/metadata@npm:1.9.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/types": 1.9.0-beta.21
+    "@polkadot/types": 1.9.0-beta.22
     "@polkadot/util": ^2.7.0-beta.8
     "@polkadot/util-crypto": ^2.7.0-beta.8
     bn.js: ^5.1.1
-  checksum: 2/e7fff7f2fcddd713f59a3e0fb47ef81a65677cc2ed28800aae0ca5ae8c571f086d5745f92c76a3c34da75c302ec00779f9608c569a386fc1dc4462b36308c48e
+  checksum: 2/7ae67217b54273e46015d9a5e5cacfda02b817e3da0d6c993b3694c16744189a20addc3657a9a179d9657f5752217859402f7a3e998fca82e073b34bbe344a4e
   languageName: node
   linkType: hard
 
@@ -3268,7 +3268,7 @@ __metadata:
   resolution: "@polkadot/react-api@workspace:packages/react-api"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": ^1.9.0-beta.21
+    "@polkadot/api": ^1.9.0-beta.22
     "@polkadot/extension-dapp": ^0.24.0-beta.0
     rxjs-compat: ^6.5.4
   languageName: unknown
@@ -3385,35 +3385,35 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/rpc-core@npm:1.9.0-beta.21":
-  version: 1.9.0-beta.21
-  resolution: "@polkadot/rpc-core@npm:1.9.0-beta.21"
+"@polkadot/rpc-core@npm:1.9.0-beta.22":
+  version: 1.9.0-beta.22
+  resolution: "@polkadot/rpc-core@npm:1.9.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.9.0-beta.21
-    "@polkadot/rpc-provider": 1.9.0-beta.21
-    "@polkadot/types": 1.9.0-beta.21
+    "@polkadot/metadata": 1.9.0-beta.22
+    "@polkadot/rpc-provider": 1.9.0-beta.22
+    "@polkadot/types": 1.9.0-beta.22
     "@polkadot/util": ^2.7.0-beta.8
     memoizee: ^0.4.14
     rxjs: ^6.5.4
-  checksum: 2/6b4821fe8130d4df29b7a066f59d56264c00721aafce2990383fcd42c18d8f9568b3f8a47f25f54ff94d7c32ffaea2c7ee7aa21ca7a29a9c115cd922bc0d3559
+  checksum: 2/c0266ad3303c532385d2fbf91193a5c2c2a6f7e56577764068cf6c80b87f9d86041d69f8051ad744da74b22004d7710011848dfd5edf7d7f85c5894fe0bdc47b
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:1.9.0-beta.21":
-  version: 1.9.0-beta.21
-  resolution: "@polkadot/rpc-provider@npm:1.9.0-beta.21"
+"@polkadot/rpc-provider@npm:1.9.0-beta.22":
+  version: 1.9.0-beta.22
+  resolution: "@polkadot/rpc-provider@npm:1.9.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.9.0-beta.21
-    "@polkadot/types": 1.9.0-beta.21
+    "@polkadot/metadata": 1.9.0-beta.22
+    "@polkadot/types": 1.9.0-beta.22
     "@polkadot/util": ^2.7.0-beta.8
     "@polkadot/util-crypto": ^2.7.0-beta.8
     bn.js: ^5.1.1
     eventemitter3: ^4.0.0
     isomorphic-fetch: ^2.2.1
     websocket: ^1.0.31
-  checksum: 2/89c100a1682ffa97c719289f26d410e9ea0cc14073ca3f463e6a82b81c210da558e533ef3b4a827f4409535f99e42744895c3f46f0c943ac341d03c8af863b54
+  checksum: 2/7c9edbaa368837e8e339ad3df25b3f3bdba9466f14544525a65c6794ef71505ee3cb8f43564501d5dcd680d81d0d6401f56b2b43d3b485ceb660324c0f6ded50
   languageName: node
   linkType: hard
 
@@ -3426,19 +3426,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:^1.9.0-beta.21":
-  version: 1.9.0-beta.21
-  resolution: "@polkadot/types@npm:1.9.0-beta.21"
+"@polkadot/types@npm:^1.9.0-beta.22":
+  version: 1.9.0-beta.22
+  resolution: "@polkadot/types@npm:1.9.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.9.0-beta.21
+    "@polkadot/metadata": 1.9.0-beta.22
     "@polkadot/util": ^2.7.0-beta.8
     "@polkadot/util-crypto": ^2.7.0-beta.8
     "@types/bn.js": ^4.11.6
     bn.js: ^5.1.1
     memoizee: ^0.4.14
     rxjs: ^6.5.4
-  checksum: 2/2d57076bdf3dfad361746b781ab8c202799090c851b52fe26ca563cf613d8a221229d06b2e127733bcd057e3ca7a78c603ef75189f57a08d51600d55aed99bda
+  checksum: 2/f82872c88835f179150f76267b163f2ec8233d6ab85ee3210eef5f577adb908252b35dcd5050a1f92ebe058c008f3e6e142d2adc113fd97ad2d05ed1016387ee
   languageName: node
   linkType: hard