-
Notifications
You must be signed in to change notification settings - Fork 44
/
Statistics.tsx
61 lines (53 loc) · 1.99 KB
/
Statistics.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// Copyright 2022 @paritytech/contracts-ui authors & contributors
// SPDX-License-Identifier: GPL-3.0-only
import { useEffect, useMemo, useState } from 'react';
import { useApi } from 'ui/contexts';
import { AnyJson, ApiPromise, ChainProperties } from 'types';
function getChainType(systemChainType: ChainProperties['systemChainType']): string {
if (systemChainType.isDevelopment) return 'Development';
if (systemChainType.isLocal) return 'Local';
if (systemChainType.isLive) return 'Live';
if (systemChainType.isCustom) return 'Custom';
return 'Unknown';
}
export function Statistics(): React.ReactElement | null {
const { api, systemChain, systemName, systemChainType, tokenSymbol } = useApi();
const [blockNumber, setBlockNumber] = useState<AnyJson>('');
useEffect(() => {
async function listenToBlocks(api: ApiPromise) {
return api.rpc.chain.subscribeNewHeads(header => {
setBlockNumber(header.number.toHuman());
});
}
let cleanUp: VoidFunction | undefined;
listenToBlocks(api)
.then(unsub => (cleanUp = unsub))
.catch(console.error);
return () => cleanUp && cleanUp();
}, [api]);
const entries = useMemo((): Record<string, React.ReactNode> => {
return {
'Chain Name': systemChainType.isDevelopment ? systemName : systemChain,
'Chain Type': getChainType(systemChainType),
'Highest Block': `#${blockNumber}`,
Token: tokenSymbol,
};
}, [blockNumber, systemChain, systemChainType, systemName, tokenSymbol]);
return (
<>
<div
className="grid grid-cols-4 xl:grid-cols-2 w-full mb-8 pb-8 border-b border-gray-200 dark:border-gray-800"
data-cy="chain-info"
>
{Object.entries(entries).map(([label, value], i) => {
return (
<div key={`entry-${i}`} className="mb-4 pr-4">
<div className="text-xs mb-1">{label}</div>
<div className="dark:text-gray-400">{value}</div>
</div>
);
})}
</div>
</>
);
}