2022-09-29 16:25:10 +02:00
|
|
|
import Head from 'next/head'
|
2022-10-18 16:45:01 +02:00
|
|
|
import React, { Fragment, ReactElement, useEffect, useState } from 'react'
|
2022-10-18 17:34:20 +02:00
|
|
|
import { State, Summary, NetworkSummary } from '../@types'
|
2022-09-29 16:25:10 +02:00
|
|
|
import styles from '../styles/Home.module.css'
|
2022-10-17 14:34:22 +02:00
|
|
|
import { getData, getNetworkSUmmary, getSummary } from '../utils/getData'
|
2022-10-18 16:27:41 +02:00
|
|
|
import LogoAsset from '../images/logo.svg'
|
2022-10-18 17:20:56 +02:00
|
|
|
import CheckAsset from '../images/check.svg'
|
2022-09-30 12:47:53 +02:00
|
|
|
|
2022-10-18 17:20:56 +02:00
|
|
|
function statusIcon(state: State): ReactElement {
|
2022-10-18 16:27:41 +02:00
|
|
|
if (state === State.Up) {
|
2022-10-18 17:20:56 +02:00
|
|
|
return <CheckAsset className={styles.check} />
|
2022-10-18 16:27:41 +02:00
|
|
|
} else if (state === State.Down) {
|
2022-10-18 17:20:56 +02:00
|
|
|
return <>🚨</>
|
2022-10-18 16:27:41 +02:00
|
|
|
} else {
|
2022-10-18 17:20:56 +02:00
|
|
|
return <>🚧</>
|
2022-10-17 14:34:22 +02:00
|
|
|
}
|
2022-10-18 16:27:41 +02:00
|
|
|
}
|
2022-10-05 15:21:07 +02:00
|
|
|
|
2022-10-18 16:27:41 +02:00
|
|
|
function statusStyle(state: State) {
|
|
|
|
|
if (state === State.Down) {
|
|
|
|
|
return styles.down
|
|
|
|
|
} else if (state === State.Warning) {
|
|
|
|
|
return styles.warning
|
|
|
|
|
} else {
|
|
|
|
|
return styles.up
|
2022-10-05 15:21:07 +02:00
|
|
|
}
|
2022-10-18 16:27:41 +02:00
|
|
|
}
|
2022-09-30 12:47:53 +02:00
|
|
|
|
2022-10-18 16:27:41 +02:00
|
|
|
export default function HomePage(): ReactElement {
|
|
|
|
|
const [summary, setSummary] = useState<Summary[]>()
|
|
|
|
|
const [networks, setNetworks] = useState<NetworkSummary[]>()
|
2022-10-10 14:13:56 +02:00
|
|
|
|
2022-09-30 12:47:53 +02:00
|
|
|
useEffect(() => {
|
|
|
|
|
async function getStatuses() {
|
2022-10-10 13:40:07 +02:00
|
|
|
const statusData = await getData()
|
2022-10-18 17:34:20 +02:00
|
|
|
const summaryData = getSummary('mainnet', statusData)
|
2022-10-10 13:40:07 +02:00
|
|
|
if (summaryData) setSummary(summaryData)
|
2022-10-17 14:34:22 +02:00
|
|
|
const networkSummary = getNetworkSUmmary(statusData)
|
|
|
|
|
if (networkSummary) setNetworks(networkSummary)
|
2022-09-30 12:47:53 +02:00
|
|
|
}
|
|
|
|
|
getStatuses()
|
2022-10-18 17:34:20 +02:00
|
|
|
}, [])
|
2022-10-05 15:21:07 +02:00
|
|
|
|
2022-09-29 16:25:10 +02:00
|
|
|
return (
|
|
|
|
|
<div className={styles.container}>
|
|
|
|
|
<Head>
|
2022-09-29 16:42:07 +02:00
|
|
|
<title>Ocean Protocol Status</title>
|
2022-09-29 16:25:10 +02:00
|
|
|
<meta name="description" content="Generated by create next app" />
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
2022-10-18 16:45:01 +02:00
|
|
|
|
|
|
|
|
<header>
|
2022-10-18 16:27:41 +02:00
|
|
|
<LogoAsset className={styles.logo} />
|
|
|
|
|
|
2022-09-30 12:16:56 +02:00
|
|
|
<h1 className={styles.title}>Ocean Status</h1>
|
2022-09-29 16:25:10 +02:00
|
|
|
<p className={styles.description}>
|
2022-09-30 12:16:56 +02:00
|
|
|
Current Status of Ocean Components{' '}
|
2022-09-29 16:25:10 +02:00
|
|
|
</p>
|
2022-10-18 16:45:01 +02:00
|
|
|
</header>
|
2022-10-18 16:27:41 +02:00
|
|
|
|
2022-10-18 16:45:01 +02:00
|
|
|
<main>
|
2022-10-18 16:27:41 +02:00
|
|
|
{networks?.map((network: NetworkSummary, i: number) => (
|
2022-10-18 16:45:01 +02:00
|
|
|
<Fragment key={i}>
|
|
|
|
|
<h2 className={styles.networkName}>{network.name}</h2>
|
2022-10-18 16:27:41 +02:00
|
|
|
|
|
|
|
|
<div className={styles.grid}>
|
|
|
|
|
{summary?.map((value: Summary) => (
|
2022-10-06 16:43:52 +02:00
|
|
|
<div
|
|
|
|
|
key={value.component}
|
2022-10-10 14:13:56 +02:00
|
|
|
className={`${styles.card} ${statusStyle(value.status)}`}
|
2022-10-06 16:43:52 +02:00
|
|
|
>
|
2022-10-18 17:10:40 +02:00
|
|
|
<h2>
|
|
|
|
|
{statusIcon(value.status)} {value.component}
|
|
|
|
|
</h2>
|
|
|
|
|
<code className={styles.version}>{value.version}</code>
|
2022-10-05 13:15:54 +02:00
|
|
|
</div>
|
2022-10-05 15:21:07 +02:00
|
|
|
))}
|
2022-10-18 16:27:41 +02:00
|
|
|
</div>
|
2022-10-18 16:45:01 +02:00
|
|
|
</Fragment>
|
2022-10-18 16:27:41 +02:00
|
|
|
// <button
|
|
|
|
|
// key={i}
|
|
|
|
|
// className={`${styles.network} ${networkStyle(network.name)}`}
|
|
|
|
|
// onClick={() => setNetwork(network.name)}
|
|
|
|
|
// >
|
|
|
|
|
// <span>
|
|
|
|
|
// {network.name} {statusIcon(network.status)}
|
|
|
|
|
// </span>
|
|
|
|
|
// </button>
|
|
|
|
|
))}
|
2022-09-29 16:25:10 +02:00
|
|
|
</main>
|
|
|
|
|
|
2022-09-30 12:16:56 +02:00
|
|
|
<footer className={styles.footer}></footer>
|
2022-09-29 16:25:10 +02:00
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
