mirror of
https://github.com/oceanprotocol/status-frontend.git
synced 2024-11-21 17:36:58 +01:00
output contract addresses
This commit is contained in:
parent
9dca4a0967
commit
1eea458e46
GPG Key ID:
606EEEF3C479A91F
84
package-lock.json
generated
84
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "status-frontend",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@oceanprotocol/contracts": "^1.1.7",
|
||||
"@oceanprotocol/typographies": "^0.1.0",
|
||||
"@svgr/webpack": "^6.5.0",
|
||||
"axios": "^1.1.3",
|
||||
@ -2832,6 +2833,11 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@oceanprotocol/contracts": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz",
|
||||
"integrity": "sha512-Oe+oBRiu1dlco9PQ7eUYcTYi2Nua69S3TiSw62H46AIpwnFK8ORuO0Ny20No++KisBA9F+84b5lDn6kQy5Lt/Q=="
|
||||
},
|
||||
"node_modules/@oceanprotocol/typographies": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/typographies/-/typographies-0.1.0.tgz",
|
||||
@ -3578,6 +3584,21 @@
|
||||
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
||||
}
|
||||
},
|
||||
"node_modules/bufferutil": {
|
||||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
|
||||
"integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"node-gyp-build": "^4.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.14.2"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.2",
|
||||
"license": "MIT",
|
||||
@ -5505,6 +5526,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/node-gyp-build": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.5.0.tgz",
|
||||
"integrity": "sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"node-gyp-build": "bin.js",
|
||||
"node-gyp-build-optional": "optional.js",
|
||||
"node-gyp-build-test": "build-test.js"
|
||||
}
|
||||
},
|
||||
"node_modules/node-releases": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
|
||||
@ -6589,6 +6623,21 @@
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/utf-8-validate": {
|
||||
"version": "5.0.10",
|
||||
"resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
|
||||
"integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"node-gyp-build": "^4.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.14.2"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"dev": true,
|
||||
@ -8445,6 +8494,11 @@
|
||||
"fastq": "^1.6.0"
|
||||
}
|
||||
},
|
||||
"@oceanprotocol/contracts": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz",
|
||||
"integrity": "sha512-Oe+oBRiu1dlco9PQ7eUYcTYi2Nua69S3TiSw62H46AIpwnFK8ORuO0Ny20No++KisBA9F+84b5lDn6kQy5Lt/Q=="
|
||||
},
|
||||
"@oceanprotocol/typographies": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/typographies/-/typographies-0.1.0.tgz",
|
||||
@ -8910,6 +8964,17 @@
|
||||
"update-browserslist-db": "^1.0.9"
|
||||
}
|
||||
},
|
||||
"bufferutil": {
|
||||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
|
||||
"integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"node-gyp-build": "^4.3.0"
|
||||
}
|
||||
},
|
||||
"call-bind": {
|
||||
"version": "1.0.2",
|
||||
"requires": {
|
||||
@ -10185,6 +10250,14 @@
|
||||
"use-sync-external-store": "1.2.0"
|
||||
}
|
||||
},
|
||||
"node-gyp-build": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.5.0.tgz",
|
||||
"integrity": "sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node-releases": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
|
||||
@ -10854,6 +10927,17 @@
|
||||
"version": "1.2.0",
|
||||
"requires": {}
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"version": "5.0.10",
|
||||
"resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
|
||||
"integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"node-gyp-build": "^4.3.0"
|
||||
}
|
||||
},
|
||||
"which": {
|
||||
"version": "2.0.2",
|
||||
"dev": true,
|
||||
|
||||
@ -7,9 +7,11 @@
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"test": "npm run lint && tsc --noEmit"
|
||||
"type-check": "tsc --noEmit",
|
||||
"test": "npm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@oceanprotocol/contracts": "^1.1.7",
|
||||
"@oceanprotocol/typographies": "^0.1.0",
|
||||
"@svgr/webpack": "^6.5.0",
|
||||
"axios": "^1.1.3",
|
||||
|
||||
@ -5,6 +5,7 @@ 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) {
|
||||
@ -48,64 +49,95 @@ export default function HomePage(): ReactElement {
|
||||
<header>
|
||||
<LogoAsset className={styles.logo} />
|
||||
|
||||
<h1 className={styles.title}>Ocean Status</h1>
|
||||
<p className={styles.description}>Current Status of Ocean Components</p>
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{Object.entries(data || {}).map(([key, value]) => (
|
||||
<Fragment key={key}>
|
||||
<h2 className={styles.networkName}>{key}</h2>
|
||||
<div className={styles.grid}>
|
||||
{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]) => (
|
||||
<div
|
||||
key={key}
|
||||
className={`${styles.card} ${statusStyle(
|
||||
// TODO: all component states should be of type Status on API level
|
||||
key === 'market' || key === 'dataFarming'
|
||||
? value
|
||||
: value.status
|
||||
)}`}
|
||||
>
|
||||
<h2>
|
||||
{statusIcon(
|
||||
{Object.entries(data || {}).map(([key, value]) => {
|
||||
const networkKey = key
|
||||
|
||||
return (
|
||||
<Fragment key={networkKey}>
|
||||
<h2 className={styles.networkName}>{networkKey}</h2>
|
||||
<div className={styles.grid}>
|
||||
{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]) => (
|
||||
<div
|
||||
key={key}
|
||||
className={`${styles.card} ${statusStyle(
|
||||
// TODO: all component states should be of type Status on API level
|
||||
key === 'market' || key === 'dataFarming'
|
||||
? value
|
||||
: value.status
|
||||
)}{' '}
|
||||
{key}
|
||||
<code className={styles.version} title="deployed version">
|
||||
{value.version}
|
||||
</code>
|
||||
</h2>
|
||||
)}`}
|
||||
>
|
||||
<h2 className={styles.titleComponent}>
|
||||
{statusIcon(
|
||||
key === 'market' || key === 'dataFarming'
|
||||
? value
|
||||
: value.status
|
||||
)}{' '}
|
||||
{key}
|
||||
<code
|
||||
className={styles.version}
|
||||
title="deployed version"
|
||||
>
|
||||
{value.version}
|
||||
</code>
|
||||
</h2>
|
||||
|
||||
{value.statusMessages && value.statusMessages !== '' && (
|
||||
<ul className={styles.messages}>
|
||||
{value.statusMessages
|
||||
.split(',')
|
||||
.map((message: string, i: number) => (
|
||||
<li key={i} className={styles.statusMessage}>
|
||||
{message}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Fragment>
|
||||
))}
|
||||
{value.statusMessages && value.statusMessages !== '' && (
|
||||
<ul className={styles.messages}>
|
||||
{value.statusMessages
|
||||
.split(',')
|
||||
.map((message: string, i: number) => (
|
||||
<li key={i} className={styles.statusMessage}>
|
||||
{message}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<details className={styles.contracts}>
|
||||
<summary>
|
||||
<h3 className={styles.titleComponent}>Deployed Contracts</h3>
|
||||
</summary>
|
||||
<ul>
|
||||
{Object.entries((addresses as any)[networkKey]).map(
|
||||
([key, value]) =>
|
||||
key !== 'chainId' &&
|
||||
key !== 'startBlock' && (
|
||||
<li key={key}>
|
||||
<code className={styles.key}>{key}</code>:{' '}
|
||||
<code>{JSON.stringify(value)}</code>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
</details>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</main>
|
||||
|
||||
<footer className={styles.footer}></footer>
|
||||
|
||||
@ -14,8 +14,7 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
margin-bottom: calc(var(--spacer) / 4);
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@ -26,6 +25,8 @@
|
||||
|
||||
.description {
|
||||
font-size: var(--font-size-large);
|
||||
margin: 0 auto;
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
@ -48,8 +49,7 @@
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
.titleComponent {
|
||||
font-size: var(--font-size-large);
|
||||
margin: 0;
|
||||
}
|
||||
@ -96,3 +96,17 @@
|
||||
list-style-position: outside;
|
||||
color: var(--brand-alert-orange);
|
||||
}
|
||||
|
||||
.contracts {
|
||||
margin-top: var(--spacer);
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.contracts summary {
|
||||
margin-left: -1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.contracts .titleComponent {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user