Withdraw with slashing spans (#2918)

* Withdraw with slashing spans

* prior length

packages/react-components/src/StakingRedeemable.tsx

@@ -3,10 +3,12 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveStakingAccount } from '@polkadot/api-derive/types';
+import { SlashingSpans } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { useAccounts } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
+import { Option } from '@polkadot/types';
 
 import TxButton from './TxButton';
 import { useTranslation } from './translate';
@@ -17,8 +19,15 @@ interface Props {
 }
 
 function StakingRedeemable ({ className = '', stakingInfo }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
   const { allAccounts } = useAccounts();
   const { t } = useTranslation();
+  const spanCount = useCall<number>(api.query.staking.slashingSpans, [stakingInfo?.stashId], {
+    transform: (optSpans: Option<SlashingSpans>): number =>
+      optSpans.isNone
+        ? 0
+        : optSpans.unwrap().prior.length + 1
+  });
 
   if (!stakingInfo?.redeemable?.gtn(0)) {
     return null;
@@ -33,7 +42,11 @@ function StakingRedeemable ({ className = '', stakingInfo }: Props): React.React
             icon='lock'
             isIcon
             key='unlock'
-            params={[]}
+            params={
+              api.tx.staking.withdrawUnbonded.meta.args.length === 1
+                ? [spanCount]
+                : []
+            }
             tooltip={t<string>('Withdraw these unbonded funds')}
             tx='staking.withdrawUnbonded'
           />