ghost-portal/packages/page-collator/src/Collators.tsx
Jaco 37f44367b4
Rework context usage (& move most to react-hooks) (#8731)
* Rework context usage (& move most to react-hooks)

* Move use{Accounts, Addresses} to use contexts

* Cleanups

* Global alignment renames

* Combine keyring subjects into KeyringCtx

* Cleanups to contexts

* Small adjustment to window size usage

* Popup test via data-testid

* Fix Bounties tests

* Move getStats to correct location

* Adjust ApiStats

* Do add unsubs (although unneeded)
2023-01-09 12:56:38 +02:00

50 lines
1.3 KiB
TypeScript

// Copyright 2017-2023 @polkadot/app-collator authors & contributors
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import { Table } from '@polkadot/react-components';
import { useBlockAuthors } from '@polkadot/react-hooks';
import Collator from './Collator';
import Summary from './Summary';
import { useTranslation } from './translate';
import useCollators from './useCollators';
interface Props {
className?: string;
}
function Collators ({ className }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const collators = useCollators();
const { byAuthor } = useBlockAuthors();
const hdrRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
[t<string>('collators'), 'start', 2],
[t<string>('deposit'), 'number'],
[t<string>('balance'), 'number'],
[t<string>('last #'), 'number']
]);
return (
<div className={className}>
<Summary />
<Table
empty={collators && t<string>('No running collators')}
header={hdrRef.current}
>
{collators && collators.map((c) => (
<Collator
info={c}
key={c.accountId}
lastBlock={byAuthor[c.accountId]}
/>
))}
</Table>
</div>
);
}
export default React.memo(Collators);