ghost-portal/packages/react-components/src/StakingRedeemable.tsx
Jaco Greeff c60ba8708a
Bumps w/ eslint (#2802)
* Bumps w/ eslint

* Additional

* Additional

* Additional

* Additional

* Remove style props

* Additional

* Additional

* Additional

* Additional (< 100)

* eslint passes, tsc next

* tsc fixes

* Update deps

* Update i18n
2020-05-24 19:41:14 +02:00

47 lines
1.3 KiB
TypeScript

// Copyright 2017-2020 @polkadot/react-components authors & contributors
// 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 React from 'react';
import { useAccounts } from '@polkadot/react-hooks';
import { FormatBalance } from '@polkadot/react-query';
import TxButton from './TxButton';
import { useTranslation } from './translate';
interface Props {
className?: string;
stakingInfo?: DeriveStakingAccount;
}
function StakingRedeemable ({ className = '', stakingInfo }: Props): React.ReactElement<Props> | null {
const { allAccounts } = useAccounts();
const { t } = useTranslation();
if (!stakingInfo?.redeemable?.gtn(0)) {
return null;
}
return (
<div className={className}>
<FormatBalance value={stakingInfo.redeemable}>
{allAccounts.includes((stakingInfo.controllerId || '').toString()) && (
<TxButton
accountId={stakingInfo.controllerId}
icon='lock'
isIcon
key='unlock'
params={[]}
tooltip={t<string>('Withdraw these unbonded funds')}
tx='staking.withdrawUnbonded'
/>
)}
</FormatBalance>
</div>
);
}
export default React.memo(StakingRedeemable);