oceanprotocol
/
status-frontend
mirror of https://github.com/oceanprotocol/status-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ui consistency

This commit is contained in:
Matthias Kretschmann 2022-10-18 21:51:23 +01:00
parent 1eea458e46
commit 23ce2558ff
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 105 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "status-frontend", "name": "status-frontend",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@oceanprotocol/art": "^3.2.0",
"@oceanprotocol/contracts": "^1.1.7", "@oceanprotocol/contracts": "^1.1.7",
"@oceanprotocol/typographies": "^0.1.0", "@oceanprotocol/typographies": "^0.1.0",
"@svgr/webpack": "^6.5.0", "@svgr/webpack": "^6.5.0",
@ -2833,6 +2834,11 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@oceanprotocol/art": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-3.2.0.tgz",
"integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
},
"node_modules/@oceanprotocol/contracts": { "node_modules/@oceanprotocol/contracts": {
"version": "1.1.7", "version": "1.1.7",
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz", "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz",
@ -8494,6 +8500,11 @@
"fastq": "^1.6.0" "fastq": "^1.6.0"
} }
}, },
"@oceanprotocol/art": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-3.2.0.tgz",
"integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
},
"@oceanprotocol/contracts": { "@oceanprotocol/contracts": {
"version": "1.1.7", "version": "1.1.7",
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz", "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz",

1
package.json
View File

@ -11,6 +11,7 @@
"test": "npm run lint" "test": "npm run lint"
}, },
"dependencies": { "dependencies": {
"@oceanprotocol/art": "^3.2.0",
"@oceanprotocol/contracts": "^1.1.7", "@oceanprotocol/contracts": "^1.1.7",
"@oceanprotocol/typographies": "^0.1.0", "@oceanprotocol/typographies": "^0.1.0",
"@svgr/webpack": "^6.5.0", "@svgr/webpack": "^6.5.0",

153
src/pages/index.tsx
View File

@ -29,11 +29,14 @@ function statusStyle(state: State) {
export default function HomePage(): ReactElement { export default function HomePage(): ReactElement {
const [data, setData] = useState<{ [key: string]: Status }>() const [data, setData] = useState<{ [key: string]: Status }>()
const [isLoading, setIsloading] = useState<boolean>()
useEffect(() => { useEffect(() => {
async function getStatuses() { async function getStatuses() {
setIsloading(true)
const data = await getData() const data = await getData()
setData(data) setData(data)
setIsloading(false)
} }
getStatuses() getStatuses()
}, []) }, [])
@ -60,84 +63,90 @@ export default function HomePage(): ReactElement {
</header> </header>
<main> <main>
{Object.entries(data || {}).map(([key, value]) => { {isLoading ? (
const networkKey = key <div className={styles.loading}>Loading...</div>
) : (
Object.entries(data || {}).map(([key, value]) => {
const networkKey = key
return ( return (
<Fragment key={networkKey}> <Fragment key={networkKey}>
<h2 className={styles.networkName}>{networkKey}</h2> <h2 className={styles.networkName}>{networkKey}</h2>
<div className={styles.grid}> <div className={styles.grid}>
{Object.entries(value) {Object.entries(value)
.filter( .filter(
// TODO: Remove this filter if we fix this on API level // TODO: Remove this filter if we fix this on API level
// Needs a new `components` key under Status response // Needs a new `components` key under Status response
([key]) => ([key]) =>
key !== 'currentBlock' && key !== 'currentBlock' &&
key !== 'lastUpdatedOn' && key !== 'lastUpdatedOn' &&
key !== 'network' && key !== 'network' &&
key !== '_id' && key !== '_id' &&
key !== '__v' key !== '__v'
) )
.map(([key, value]) => ( .map(([key, value]) => (
<div <div
key={key} key={key}
className={`${styles.card} ${statusStyle( className={`${styles.card} ${statusStyle(
// TODO: all component states should be of type Status on API level // TODO: all component states should be of type Status on API level
key === 'market' || key === 'dataFarming'
? value
: value.status
)}`}
>
<h2 className={styles.titleComponent}>
{statusIcon(
key === 'market' || key === 'dataFarming' key === 'market' || key === 'dataFarming'
? value ? value
: value.status : value.status
)}{' '} )}`}
{key} >
<code <h2 className={styles.titleComponent}>
className={styles.version} {statusIcon(
title="deployed version" key === 'market' || key === 'dataFarming'
> ? value
{value.version} : value.status
</code> )}{' '}
</h2> {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>
<details className={styles.contracts}> <details className={styles.contracts}>
<summary> <summary>
<h3 className={styles.titleComponent}>Deployed Contracts</h3> <h3 className={styles.titleComponent}>
</summary> Deployed Contracts
<ul> </h3>
{Object.entries((addresses as any)[networkKey]).map( </summary>
([key, value]) => <ul>
key !== 'chainId' && {Object.entries((addresses as any)[networkKey]).map(
key !== 'startBlock' && ( ([key, value]) =>
<li key={key}> key !== 'chainId' &&
<code className={styles.key}>{key}</code>:{' '} key !== 'startBlock' && (
<code>{JSON.stringify(value)}</code> <li key={key}>
</li> <code className={styles.key}>{key}</code>:{' '}
) <code>{JSON.stringify(value)}</code>
)} </li>
</ul> )
</details> )}
</Fragment> </ul>
) </details>
})} </Fragment>
)
})
)}
</main> </main>
<footer className={styles.footer}></footer> <footer className={styles.footer}></footer>

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

@ -1,6 +1,8 @@
.container { .container {
padding: var(--spacer); padding: var(--spacer);
margin: 0 auto; margin: 0 auto;
background: url('../../node_modules/@oceanprotocol/art/waves/waves.svg')
no-repeat center 13.5rem;
} }
@media screen and (min-width: 50rem) { @media screen and (min-width: 50rem) {
@ -36,7 +38,7 @@
} }
.networkName { .networkName {
margin-top: calc(var(--spacer) * 2); margin-top: calc(var(--spacer) * 3);
text-transform: capitalize; text-transform: capitalize;
} }
@ -45,8 +47,10 @@
text-align: left; text-align: left;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
background: var(--background-content);
border-radius: var(--border-radius); border-radius: var(--border-radius);
border: 2px solid var(--border-color); box-shadow: 0 6px 17px 0 var(--box-shadow-color);
border: 1px solid var(--border-color);
} }
.titleComponent { .titleComponent {
@ -72,7 +76,7 @@
fill: var(--font-color-heading); fill: var(--font-color-heading);
height: 4rem; height: 4rem;
width: 4rem; width: 4rem;
margin: 0 auto; margin: 0 auto calc(var(--spacer) / 2) auto;
} }
.icon { .icon {
@ -110,3 +114,8 @@
.contracts .titleComponent { .contracts .titleComponent {
display: inline-block; display: inline-block;
} }
.loading {
margin-top: 30vh;
text-align: center;
}