import Head from 'next/head' import React, { Fragment, ReactElement, useEffect, useState } from 'react' import { State, Summary, NetworkSummary } from '../@types' import styles from '../styles/Home.module.css' import { getData, getNetworkSUmmary, getSummary } from '../utils/getData' import LogoAsset from '../images/logo.svg' import CheckAsset from '../images/check.svg' function statusIcon(state: State): ReactElement { if (state === State.Up) { return } else if (state === State.Down) { return <>🚨 } else { return <>🚧 } } function statusStyle(state: State) { if (state === State.Down) { return styles.down } else if (state === State.Warning) { return styles.warning } else { return styles.up } } export default function HomePage(): ReactElement { const [summary, setSummary] = useState() const [networks, setNetworks] = useState() useEffect(() => { async function getStatuses() { const statusData = await getData() const summaryData = getSummary('mainnet', statusData) if (summaryData) setSummary(summaryData) const networkSummary = getNetworkSUmmary(statusData) if (networkSummary) setNetworks(networkSummary) } getStatuses() }, []) return (

Ocean Protocol Status

Ocean Status

Current Status of Ocean Components{' '}

{networks?.map((network: NetworkSummary, i: number) => (

{network.name}

{summary?.map((value: Summary) => (

{statusIcon(value.status)} {value.component}

{value.version}

))}

// ))}

) }