From 09d25d5c246bace42a57ca294073dd8a07f86d99 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 19 Oct 2022 18:17:15 +0100
Subject: [PATCH] show last updated on per-network basis

---
 package-lock.json          | 13 ++++++++++++-
 package.json               |  3 ++-
 src/pages/index.tsx        | 13 ++++++++++++-
 src/styles/Home.module.css |  7 +++++++
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 685afd7..763ac65 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 0f8bada..a732b71 100644
--- a/package.json
+++ b/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",
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 847d349..c450c79 100644
--- a/src/pages/index.tsx
+++ b/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) => (
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
index 92ee423..c5a7920 100644
--- a/src/styles/Home.module.css
+++ b/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);
+}