Add withdraw action to staking (#3113)

* Add withdraw action to staking

* Add action
This commit is contained in:
Jaco Greeff 2020-07-03 07:47:34 +02:00 committed by GitHub
parent fd58ff5221
commit 91261a0bc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -3,14 +3,15 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DeriveBalancesAll, DeriveStakingAccount } from '@polkadot/api-derive/types';
import { EraIndex } from '@polkadot/types/interfaces';
import { EraIndex, SlashingSpans } from '@polkadot/types/interfaces';
import { StakerState } from '@polkadot/react-hooks/types';
import { SortedTargets } from '../../types';
import React, { useEffect, useState } from 'react';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import { AddressInfo, AddressMini, AddressSmall, Button, Menu, Popup, StakingBonded, StakingRedeemable, StakingUnbonding, TxButton } from '@polkadot/react-components';
import { AddressInfo, AddressMini, AddressSmall, Button, Menu, Popup, StakingBonded, StakingRedeemable, StakingUnbonding, StatusContext, TxButton } from '@polkadot/react-components';
import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
import { Option } from '@polkadot/types';
import { useTranslation } from '../../translate';
import BondExtra from './BondExtra';
@ -37,8 +38,15 @@ interface Props {
function Account ({ className = '', info: { controllerId, destination, destinationId, hexSessionIdNext, hexSessionIdQueue, isLoading, isOwnController, isOwnStash, isStashNominating, isStashValidating, nominating, sessionIds, stakingLedger, stashId }, isDisabled, next, targets, validators }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { api } = useApi();
const { queueExtrinsic } = useContext(StatusContext);
const balancesAll = useCall<DeriveBalancesAll>(api.derive.balances.all, [stashId]);
const stakingAccount = useCall<DeriveStakingAccount>(api.derive.staking.account, [stashId]);
const spanCount = useCall<number>(api.query.staking.slashingSpans, [stashId], {
transform: (optSpans: Option<SlashingSpans>): number =>
optSpans.isNone
? 0
: optSpans.unwrap().prior.length + 1
});
const [isBondExtraOpen, toggleBondExtra] = useToggle();
const [isInjectOpen, toggleInject] = useToggle();
const [isNominateOpen, toggleNominate] = useToggle();
@ -56,6 +64,20 @@ function Account ({ className = '', info: { controllerId, destination, destinati
);
}, [stakingAccount]);
const withdrawFunds = useCallback(
() => {
queueExtrinsic({
accountId: controllerId,
extrinsic: api.tx.staking.withdrawUnbonded.meta.args.length === 1
? api.tx.staking.withdrawUnbonded(spanCount || 0)
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore (We are doing toHex here since we have a Vec<u8> input)
: api.tx.staking.withdrawUnbonded()
});
},
[api, controllerId, queueExtrinsic, spanCount]
);
return (
<tr className={className}>
<td className='address'>
@ -229,6 +251,12 @@ function Account ({ className = '', info: { controllerId, destination, destinati
>
{t<string>('Unbond funds')}
</Menu.Item>
<Menu.Item
disabled={!isOwnController || !stakingAccount || !stakingAccount.redeemable || !stakingAccount.redeemable.gtn(0)}
onClick={withdrawFunds}
>
{t<string>('Withdraw unbonded funds')}
</Menu.Item>
<Menu.Divider />
<Menu.Item
disabled={!isOwnStash}