63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Typography } from 'antd';
|
|
const { Title } = Typography;
|
|
import { injectIntl, WrappedComponentProps } from 'gatsby-plugin-intl';
|
|
import { grpc } from '@improbable-eng/grpc-web';
|
|
|
|
import { Layout } from '~/components/Layout';
|
|
import { SEO } from '~/components/SEO';
|
|
import { GuardiansTable } from '~/components/GuardiansTable'
|
|
|
|
import { Heartbeat } from '~/proto/gossip/v1/gossip'
|
|
import { PublicrpcGetRawHeartbeatsDesc, GetRawHeartbeatsRequest } from '~/proto/publicrpc/v1/publicrpc'
|
|
|
|
const Network = ({ intl }: WrappedComponentProps) => {
|
|
const [heartbeats, setHeartbeats] = useState<{ [nodeName: string]: Heartbeat }>({})
|
|
|
|
const addHeartbeat = (hb: grpc.ProtobufMessage) => {
|
|
const hbObj = hb.toObject() as Heartbeat
|
|
hbObj.networks.sort((a, b) => b.id - a.id)
|
|
const { nodeName } = hbObj
|
|
heartbeats[nodeName] = hbObj
|
|
setHeartbeats({ ...heartbeats })
|
|
}
|
|
|
|
useEffect(() => {
|
|
const client = grpc.client(PublicrpcGetRawHeartbeatsDesc, {
|
|
host: String(process.env.GATSBY_APP_RPC_URL)
|
|
})
|
|
client.onMessage(addHeartbeat)
|
|
client.start()
|
|
client.send({ serializeBinary: () => GetRawHeartbeatsRequest.encode({}).finish(), toObject: () => { return {} } })
|
|
|
|
return function cleanup() {
|
|
client.close()
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<Layout>
|
|
<SEO
|
|
title={intl.formatMessage({ id: 'network.title' })}
|
|
description={intl.formatMessage({ id: 'network.description' })}
|
|
/>
|
|
<div style={{ margin: '1em' }}>
|
|
<Title level={1}>{intl.formatMessage({ id: 'network.title' })}</Title>
|
|
{Object.keys(heartbeats).length === 0 ?
|
|
<Title level={2}>
|
|
{intl.formatMessage({ id: 'network.listening' })}
|
|
</Title>
|
|
:
|
|
<Title level={2}>
|
|
{Object.keys(heartbeats).length}
|
|
{intl.formatMessage({ id: 'network.guardiansFound' })}
|
|
</Title>
|
|
}
|
|
<GuardiansTable heartbeats={heartbeats} intl={intl} />
|
|
</div>
|
|
</Layout>
|
|
)
|
|
};
|
|
|
|
export default injectIntl(Network)
|