import Head from 'next/head' import React, { Fragment, ReactElement, useEffect, useState } from 'react' import { State, Status } from '../@types' import styles from '../styles/Home.module.css' import { getData } from '../utils/getData' import LogoAsset from '../images/logo.svg' import CheckAsset from '../images/check.svg' import addresses from '@oceanprotocol/contracts/addresses/address.json' import { statusApiUri } from '../../app.config' 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 [data, setData] = useState<{ [key: string]: Status }>() const [isLoading, setIsloading] = useState() const [error, setError] = useState() useEffect(() => { async function getStatuses() { setIsloading(true) const data = await getData() if (!data) setError(`Could not get data from ${statusApiUri}`) setData(data) setIsloading(false) } getStatuses() }, []) return (
Ocean Protocol Status

Ocean Protocol Status

Status overview of all{' '} deployed components {' '} hosted by the Ocean Protocol Foundation.

{isLoading ? (
Loading...
) : error ? (
{error}
) : ( Object.entries(data || {}).map(([networkName, value]) => (

{networkName == 'general' ? null : networkName}

{value.components.map((component) => (

{statusIcon(component.status)} {component.name} {component.version}

{component.statusMessages?.length ? (
    {component.statusMessages.map( (message: string, i: number) => (
  • {message}
    • ) )}
) : null}
))}
{networkName !== 'general' && (

Deployed Contracts

    {Object.entries((addresses as any)[networkName]).map( ([key, value]) => key !== 'chainId' && key !== 'startBlock' && (
  • {key}:{' '} {JSON.stringify(value)}
    • ) )}
)} )) )}
) }