show last updated on per-network basis

package-lock.json

@@ -16,7 +16,8 @@
         "dotenv": "^16.0.3",
         "next": "12.3.1",
         "react": "18.2.0",
-        "react-dom": "18.2.0"
+        "react-dom": "18.2.0",
+        "tiny-relative-date": "^1.3.0"
       },
       "devDependencies": {
         "@types/node": "18.7.23",
@@ -6450,6 +6451,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tiny-relative-date": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz",
+      "integrity": "sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A=="
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -10827,6 +10833,11 @@
       "version": "0.2.0",
       "dev": true
     },
+    "tiny-relative-date": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz",
+      "integrity": "sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A=="
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",

package.json

@@ -19,7 +19,8 @@
     "dotenv": "^16.0.3",
     "next": "12.3.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "tiny-relative-date": "^1.3.0"
   },
   "devDependencies": {
     "@types/node": "18.7.23",

src/pages/index.tsx

@@ -7,6 +7,7 @@ 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'
+import relativeDate from 'tiny-relative-date'
 
 function statusIcon(state: State): ReactElement {
   if (state === State.Up) {
@@ -77,7 +78,17 @@ export default function HomePage(): ReactElement {
           Object.entries(data || {}).map(([networkName, value]) => (
             <Fragment key={networkName}>
               <h2 className={styles.networkName}>
-                {networkName == 'general' ? null : networkName}
+                {networkName == 'general' ? null : (
+                  <>
+                    {networkName}
+                    <span
+                      className={styles.date}
+                      title={`Last update: ${new Date(value.lastUpdatedOn)}`}
+                    >
+                      {relativeDate(new Date(value.lastUpdatedOn))}
+                    </span>
+                  </>
+                )}
               </h2>
               <div className={styles.grid}>
                 {value.components.map((component) => (

src/styles/Home.module.css

@@ -136,3 +136,10 @@
   margin-top: 30vh;
   text-align: center;
 }
+
+.date {
+  display: inline-block;
+  margin-left: calc(var(--spacer) / 6);
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+}