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 19:17:32 +02:00
|
|
|
import { State, Status } from '../@types'
|
2022-09-29 16:25:10 +02:00
|
|
|
import styles from '../styles/Home.module.css'
|
2022-10-18 19:17:32 +02:00
|
|
|
import { getData } 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-10-18 21:52:14 +02:00
|
|
|
import addresses from '@oceanprotocol/contracts/addresses/address.json'
|
2022-10-19 17:40:44 +02:00
|
|
|
import { statusApiUri } from '../../app.config'
|
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 20:14:49 +02:00
|
|
|
return <CheckAsset className={`${styles.icon} ${styles.check}`} />
|
2022-10-18 16:27:41 +02:00
|
|
|
} else if (state === State.Down) {
|
2022-10-18 20:14:49 +02:00
|
|
|
return <span className={styles.icon}>🚨</span>
|
2022-10-18 16:27:41 +02:00
|
|
|
} else {
|
2022-10-18 20:14:49 +02:00
|
|
|
return <span className={styles.icon}>🚧</span>
|
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 {
|
2022-10-18 19:17:32 +02:00
|
|
|
const [data, setData] = useState<{ [key: string]: Status }>()
|
2022-10-18 22:51:23 +02:00
|
|
|
const [isLoading, setIsloading] = useState<boolean>()
|
2022-10-19 17:40:44 +02:00
|
|
|
const [error, setError] = useState<string>()
|
2022-10-10 14:13:56 +02:00
|
|
|
|
2022-09-30 12:47:53 +02:00
|
|
|
useEffect(() => {
|
|
|
|
async function getStatuses() {
|
2022-10-18 22:51:23 +02:00
|
|
|
setIsloading(true)
|
2022-10-18 19:17:32 +02:00
|
|
|
const data = await getData()
|
2022-10-19 19:05:19 +02:00
|
|
|
if (!data) setError(`Could not get data from ${statusApiUri}`)
|
2022-10-18 19:17:32 +02:00
|
|
|
setData(data)
|
2022-10-18 22:51:23 +02:00
|
|
|
setIsloading(false)
|
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 (
|
2022-10-19 19:10:04 +02:00
|
|
|
<div className={styles.app}>
|
2022-09-29 16:25:10 +02:00
|
|
|
<Head>
|
2022-09-29 16:42:07 +02:00
|
|
|
<title>Ocean Protocol Status</title>
|
2022-10-19 17:40:44 +02:00
|
|
|
<meta
|
|
|
|
name="description"
|
|
|
|
content="Status overview of all deployed components hosted by the Ocean Protocol Foundation."
|
|
|
|
/>
|
2022-09-29 16:25:10 +02:00
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
</Head>
|
2022-10-18 16:45:01 +02:00
|
|
|
|
2022-10-19 19:10:04 +02:00
|
|
|
<header className={styles.header}>
|
2022-10-18 16:27:41 +02:00
|
|
|
<LogoAsset className={styles.logo} />
|
|
|
|
|
2022-10-18 21:52:14 +02:00
|
|
|
<h1 className={styles.title}>Ocean Protocol Status</h1>
|
|
|
|
<p className={styles.description}>
|
|
|
|
Status overview of all{' '}
|
|
|
|
<a href="https://docs.oceanprotocol.com/core-concepts/networks">
|
|
|
|
deployed components
|
|
|
|
</a>{' '}
|
|
|
|
hosted by the Ocean Protocol Foundation.
|
|
|
|
</p>
|
2022-10-18 16:45:01 +02:00
|
|
|
</header>
|
2022-10-18 16:27:41 +02:00
|
|
|
|
2022-10-19 19:10:04 +02:00
|
|
|
<main className={styles.content}>
|
2022-10-18 22:51:23 +02:00
|
|
|
{isLoading ? (
|
|
|
|
<div className={styles.loading}>Loading...</div>
|
2022-10-19 17:40:44 +02:00
|
|
|
) : error ? (
|
|
|
|
<div className={styles.loading}>{error}</div>
|
2022-10-18 22:51:23 +02:00
|
|
|
) : (
|
2022-10-19 13:39:01 +02:00
|
|
|
Object.entries(data || {}).map(([networkName, value]) => (
|
|
|
|
<Fragment key={networkName}>
|
2022-10-19 19:05:19 +02:00
|
|
|
<h2 className={styles.networkName}>
|
|
|
|
{networkName == 'general' ? null : networkName}
|
|
|
|
</h2>
|
2022-10-19 13:39:01 +02:00
|
|
|
<div className={styles.grid}>
|
2022-10-19 17:40:44 +02:00
|
|
|
{value.components.map((component) => (
|
|
|
|
<div
|
|
|
|
key={component.name}
|
|
|
|
className={`${styles.card} ${statusStyle(
|
|
|
|
component.status
|
|
|
|
)}`}
|
|
|
|
>
|
|
|
|
<h2 className={styles.titleComponent}>
|
|
|
|
{statusIcon(component.status)} {component.name}
|
|
|
|
<code className={styles.version} title="deployed version">
|
|
|
|
{component.version}
|
|
|
|
</code>
|
|
|
|
</h2>
|
2022-10-18 21:52:14 +02:00
|
|
|
|
2022-10-19 17:40:44 +02:00
|
|
|
{component.statusMessages?.length ? (
|
|
|
|
<ul className={styles.messages}>
|
|
|
|
{component.statusMessages.map(
|
|
|
|
(message: string, i: number) => (
|
|
|
|
<li key={i} className={styles.statusMessage}>
|
|
|
|
{message}
|
|
|
|
</li>
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
</ul>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
))}
|
2022-10-19 13:39:01 +02:00
|
|
|
</div>
|
2022-10-18 21:52:14 +02:00
|
|
|
|
2022-10-19 17:40:44 +02:00
|
|
|
{networkName !== 'general' && (
|
|
|
|
<details className={styles.contracts}>
|
|
|
|
<summary>
|
|
|
|
<h3 className={styles.titleComponent}>
|
|
|
|
Deployed Contracts
|
|
|
|
</h3>
|
|
|
|
</summary>
|
|
|
|
<ul>
|
|
|
|
{Object.entries((addresses as any)[networkName]).map(
|
|
|
|
([key, value]) =>
|
|
|
|
key !== 'chainId' &&
|
|
|
|
key !== 'startBlock' && (
|
|
|
|
<li key={key}>
|
|
|
|
<code className={styles.key}>{key}</code>:{' '}
|
|
|
|
<code>{JSON.stringify(value)}</code>
|
|
|
|
</li>
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
</ul>
|
|
|
|
</details>
|
|
|
|
)}
|
2022-10-19 13:39:01 +02:00
|
|
|
</Fragment>
|
|
|
|
))
|
2022-10-18 22:51:23 +02:00
|
|
|
)}
|
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>
|
|
|
|
)
|
|
|
|
}
|