// Copyright 2022 @paritytech/contracts-ui authors & contributors // SPDX-License-Identifier: GPL-3.0-only import { useEffect, useMemo, useState } from 'react'; import { formatNumber } from '@polkadot/util'; import { useApi } from 'ui/contexts'; import { useStatistics } from 'ui/hooks'; export function Statistics(): React.ReactElement | null { const { api } = useApi(); const [blockNumber, setBlockNumber] = useState(0); const { data: statistics } = useStatistics(); useEffect(() => { async function listenToBlocks() { return api?.rpc.chain.subscribeNewHeads(header => { setBlockNumber(header.number.toNumber()); }); } let cleanUp: VoidFunction; listenToBlocks() .then(unsub => (cleanUp = unsub)) .catch(console.error); return () => cleanUp(); }, [api]); const entries = useMemo((): Record<string, React.ReactNode> => { return { 'Highest Block': `#${formatNumber(blockNumber)}`, Nodes: 1, 'Code Bundles Uploaded': statistics?.codeBundlesCount || 0, 'Contracts Instantiated': statistics?.contractsCount || 0, }; }, [blockNumber, statistics]); 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"> <div className="text-sm mb-4 col-span-4 xl:col-span-2 w-full">Chain Metrics</div> {Object.entries(entries).map(([label, value], i) => { return ( <div key={`entry-${i}`} className="mb-4"> <div className="text-xs mb-1">{label}</div> <div className="dark:text-gray-400">{value}</div> </div> ); })} </div> </> ); }