103 lines
2.6 KiB
TypeScript
103 lines
2.6 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { fetchRpc } from '../../rpc'
|
|
import Spinner from '../Spinner'
|
|
import { NetworkProps } from '.'
|
|
import styles from './Status.module.css'
|
|
import Info from './Info'
|
|
import { getClientVersion, getGasPrize, getPeers } from './utils'
|
|
|
|
export default function Status({ network }: { network: NetworkProps }) {
|
|
const { rpcUrl, explorerUrl } = network
|
|
const [status, setStatus] = useState('')
|
|
const [block, setBlock] = useState(0)
|
|
const [latency, setLatency] = useState(0)
|
|
const [gasLimit, setGasLimit] = useState()
|
|
const [clientVersion, setClientVersion] = useState('')
|
|
const [gasPrice, setGasPrice] = useState()
|
|
const [peers, setPeers] = useState()
|
|
|
|
async function getStatusAndBlock() {
|
|
if (!rpcUrl) return
|
|
|
|
const response = await fetchRpc(rpcUrl, 'eth_getBlockByNumber', [
|
|
'latest',
|
|
true
|
|
])
|
|
|
|
const responseParity = await fetchRpc(rpcUrl, 'parity_mode')
|
|
|
|
if (
|
|
!response ||
|
|
!response.data ||
|
|
response.status !== 200 ||
|
|
responseParity.data.result !== 'active'
|
|
) {
|
|
setStatus('Offline')
|
|
return
|
|
}
|
|
|
|
setStatus('Online')
|
|
response.duration && setLatency(response.duration)
|
|
|
|
const { number, gasLimit } = response.data.result
|
|
setBlock(parseInt(number, 16))
|
|
setGasLimit(parseInt(gasLimit, 16))
|
|
}
|
|
|
|
async function getData() {
|
|
getStatusAndBlock()
|
|
|
|
if (!rpcUrl) return
|
|
|
|
setClientVersion(await getClientVersion(rpcUrl))
|
|
setGasPrice(await getGasPrize(rpcUrl))
|
|
setPeers(await getPeers(rpcUrl))
|
|
}
|
|
|
|
useEffect(() => {
|
|
getData()
|
|
|
|
const timer = setInterval(() => {
|
|
getData()
|
|
}, 5000) // run every 5 sec.
|
|
return () => {
|
|
clearInterval(timer)
|
|
}
|
|
}, [network])
|
|
|
|
const isOnline = status === 'Online'
|
|
|
|
return (
|
|
<div className={styles.networkData}>
|
|
{block > 0 ? (
|
|
<>
|
|
<h2 className={styles.status}>
|
|
<span className={isOnline ? styles.success : styles.error}>
|
|
{status}
|
|
</span>
|
|
{latency && (
|
|
<span className={styles.latency} title="Latency">
|
|
{latency} ms
|
|
</span>
|
|
)}
|
|
</h2>
|
|
{block && (
|
|
<p className={styles.block} title="Current block number">
|
|
At block #<a href={`${explorerUrl}/blocks/${block}`}>{block}</a>
|
|
</p>
|
|
)}
|
|
|
|
<Info
|
|
gasPrice={gasPrice}
|
|
gasLimit={gasLimit}
|
|
clientVersion={clientVersion}
|
|
peers={peers}
|
|
/>
|
|
</>
|
|
) : (
|
|
<Spinner />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|