Show unbonding value in staking account actions (#3098)

* use the right prop

* rename to stakingInfo for consistancy

packages/react-components/src/AddressInfo.tsx

@@ -343,7 +343,7 @@ function renderBalances (props: Props, allAccounts: string[], t: <T = string> (k
         <>
           <Label label={t<string>('unbonding')} />
           <div className='result'>
-            <StakingUnbonding value={stakingInfo} />
+            <StakingUnbonding stakingInfo={stakingInfo} />
           </div>
         </>
       )}

packages/react-components/src/StakingUnbonding.tsx

@@ -17,7 +17,7 @@ import { useTranslation } from './translate';
 
 interface Props {
   className?: string;
-  value?: DeriveStakingAccount;
+  stakingInfo?: DeriveStakingAccount;
 }
 
 function remainingBlocks (remainingEras: BN, { eraLength, eraProgress }: DeriveSessionProgress): BN {
@@ -27,16 +27,16 @@ function remainingBlocks (remainingEras: BN, { eraLength, eraProgress }: DeriveS
     .add(eraLength.sub(eraProgress));
 }
 
-function StakingUnbonding ({ className = '', value }: Props): React.ReactElement<Props> | null {
+function StakingUnbonding ({ className = '', stakingInfo }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const progress = useCall<DeriveSessionProgress>(api.derive.session.progress, []);
   const { t } = useTranslation();
 
-  if (!value?.unlocking || !progress) {
+  if (!stakingInfo?.unlocking || !progress) {
     return null;
   }
 
-  const filtered = value.unlocking.filter(({ remainingEras, value }) => value.gtn(0) && remainingEras.gtn(0));
+  const filtered = stakingInfo.unlocking.filter(({ remainingEras, value }) => value.gtn(0) && remainingEras.gtn(0));
 
   if (!filtered.length) {
     return null;
@@ -44,7 +44,7 @@ function StakingUnbonding ({ className = '', value }: Props): React.ReactElement
 
   const mapped = filtered.map((unlock): [DeriveUnlocking, BN] => [unlock, remainingBlocks(unlock.remainingEras, progress)]);
   const total = mapped.reduce((total, [{ value }]) => total.add(value), BN_ZERO);
-  const trigger = `${value.accountId.toHex()}-unlocking-trigger`;
+  const trigger = `${stakingInfo.accountId.toHex()}-unlocking-trigger`;
 
   return (
     <div className={className}>