oceanprotocol/status-frontend
1
0
Fork 0
mirror of https://github.com/oceanprotocol/status-frontend.git synced 2024-11-21 17:36:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

show last updated on per-network basis

Browse Source
This commit is contained in:
Matthias Kretschmann 2022-10-19 18:17:15 +01:00
parent 2e49e35c55
commit 09d25d5c24
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

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

3
package.json
View File

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

13
src/pages/index.tsx
View File

@ -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) => (

7
src/styles/Home.module.css
View File

@ -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);
}