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' 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 }>() useEffect(() => { async function getStatuses() { const data = await getData() setData(data) } getStatuses() }, []) return (
Ocean Protocol Status

Ocean Protocol Status

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

{Object.entries(data || {}).map(([key, value]) => { const networkKey = key return (

{networkKey}

{Object.entries(value) .filter( // TODO: Remove this filter if we fix this on API level // Needs a new `components` key under Status response ([key]) => key !== 'currentBlock' && key !== 'lastUpdatedOn' && key !== 'network' && key !== '_id' && key !== '__v' ) .map(([key, value]) => (

{statusIcon( key === 'market' || key === 'dataFarming' ? value : value.status )}{' '} {key} {value.version}

{value.statusMessages && value.statusMessages !== '' && (
    {value.statusMessages .split(',') .map((message: string, i: number) => (
  • {message}
    • ))}
)}
))}

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