ghost-portal/packages/react-query/src/TotalInactive.tsx
Jaco f495761c0b
Add a placeholder for full balance retrieval (#8734)
* Add a placeholder for full balance retrieval

* Adjust sidebar

* Add --placeholder class

* staking overview placeholder

* Adjust preimage & council

* Account Summary

* Additional

* Additionals

* Some more around staking

* Slight opacity adjustment

* Last remaining for this round

* One final for now
2023-01-09 17:37:40 +02:00

34 lines
839 B
TypeScript

// Copyright 2017-2023 @polkadot/react-query authors & contributors
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import { useApi, useCall } from '@polkadot/react-hooks';
import FormatBalance from './FormatBalance';
interface Props {
children?: React.ReactNode;
className?: string;
label?: React.ReactNode;
}
function TotalInactive ({ children, className = '', label }: Props): React.ReactElement<Props> | null {
const { api } = useApi();
const inactiveIssuance = useCall<string>(api.query.balances?.inactiveIssuance);
return (
<div className={className}>
{label || ''}
<FormatBalance
className={inactiveIssuance ? '' : '--placeholder'}
value={inactiveIssuance || 1}
withSi
/>
{children}
</div>
);
}
export default React.memo(TotalInactive);