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,14 +49,23 @@ 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>
+
+          return (
+            <Fragment key={networkKey}>
+              <h2 className={styles.networkName}>{networkKey}</h2>
               <div className={styles.grid}>
                 {Object.entries(value)
                   .filter(
@@ -78,14 +88,17 @@ export default function HomePage(): ReactElement {
                           : value.status
                       )}`}
                     >
-                    <h2>
+                      <h2 className={styles.titleComponent}>
                         {statusIcon(
                           key === 'market' || key === 'dataFarming'
                             ? value
                             : value.status
                         )}{' '}
                         {key}
-                      <code className={styles.version} title="deployed version">
+                        <code
+                          className={styles.version}
+                          title="deployed version"
+                        >
                           {value.version}
                         </code>
                       </h2>
@@ -104,8 +117,27 @@ export default function HomePage(): ReactElement {
                     </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>

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;
+}