output contract addresses

package-lock.json

@@ -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,

package.json

@@ -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",

src/pages/index.tsx

@@ -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>
+        <h1 className={styles.title}>Ocean Protocol Status</h1>
-        <p className={styles.description}>Current Status of Ocean Components</p>
+        <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]) => (
+        {Object.entries(data || {}).map(([key, value]) => {
-          <Fragment key={key}>
+          const networkKey = key
-            <h2 className={styles.networkName}>{key}</h2>
+
-            <div className={styles.grid}>
+          return (
-              {Object.entries(value)
+            <Fragment key={networkKey}>
-                .filter(
+              <h2 className={styles.networkName}>{networkKey}</h2>
-                  // TODO: Remove this filter if we fix this on API level
+              <div className={styles.grid}>
-                  // Needs a new `components` key under Status response
+                {Object.entries(value)
-                  ([key]) =>
+                  .filter(
-                    key !== 'currentBlock' &&
+                    // TODO: Remove this filter if we fix this on API level
-                    key !== 'lastUpdatedOn' &&
+                    // Needs a new `components` key under Status response
-                    key !== 'network' &&
+                    ([key]) =>
-                    key !== '_id' &&
+                      key !== 'currentBlock' &&
-                    key !== '__v'
+                      key !== 'lastUpdatedOn' &&
-                )
+                      key !== 'network' &&
-                .map(([key, value]) => (
+                      key !== '_id' &&
-                  <div
+                      key !== '__v'
-                    key={key}
+                  )
-                    className={`${styles.card} ${statusStyle(
+                  .map(([key, value]) => (
-                      // TODO: all component states should be of type Status on API level
+                    <div
-                      key === 'market' || key === 'dataFarming'
+                      key={key}
-                        ? value
+                      className={`${styles.card} ${statusStyle(
-                        : value.status
+                        // TODO: all component states should be of type Status on API level
-                    )}`}
-                  >
-                    <h2>
-                      {statusIcon(
                         key === 'market' || key === 'dataFarming'
                           ? value
                           : value.status
-                      )}{' '}
+                      )}`}
-                      {key}
+                    >
-                      <code className={styles.version} title="deployed version">
+                      <h2 className={styles.titleComponent}>
-                        {value.version}
+                        {statusIcon(
-                      </code>
+                          key === 'market' || key === 'dataFarming'
-                    </h2>
+                            ? value
+                            : value.status
+                        )}{' '}
+                        {key}
+                        <code
+                          className={styles.version}
+                          title="deployed version"
+                        >
+                          {value.version}
+                        </code>
+                      </h2>
 
-                    {value.statusMessages && value.statusMessages !== '' && (
+                      {value.statusMessages && value.statusMessages !== '' && (
-                      <ul className={styles.messages}>
+                        <ul className={styles.messages}>
-                        {value.statusMessages
+                          {value.statusMessages
-                          .split(',')
+                            .split(',')
-                          .map((message: string, i: number) => (
+                            .map((message: string, i: number) => (
-                            <li key={i} className={styles.statusMessage}>
+                              <li key={i} className={styles.statusMessage}>
-                              {message}
+                                {message}
-                            </li>
+                              </li>
-                          ))}
+                            ))}
-                      </ul>
+                        </ul>
-                    )}
+                      )}
-                  </div>
+                    </div>
-                ))}
+                  ))}
-            </div>
+              </div>
-          </Fragment>
+
-        ))}
+              <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>

src/styles/Home.module.css

@@ -14,8 +14,7 @@
 }
 
 .title {
-  margin: 0;
+  margin-bottom: calc(var(--spacer) / 4);
-  line-height: 1.15;
   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 {
+.titleComponent {
-  margin: 0 0 1rem 0;
   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;
+}