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",
"version": "0.1.0",
"dependencies": {
"@oceanprotocol/art": "^3.2.0",
"@oceanprotocol/contracts": "^1.1.7",
"@oceanprotocol/typographies": "^0.1.0",
"@svgr/webpack": "^6.5.0",
@ -2833,6 +2834,11 @@
"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": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz",
@ -8494,6 +8500,11 @@
"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": {
"version": "1.1.7",
"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"
},
"dependencies": {
"@oceanprotocol/art": "^3.2.0",
"@oceanprotocol/contracts": "^1.1.7",
"@oceanprotocol/typographies": "^0.1.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 {
const [data, setData] = useState<{ [key: string]: Status }>()
const [isLoading, setIsloading] = useState<boolean>()
useEffect(() => {
async function getStatuses() {
setIsloading(true)
const data = await getData()
setData(data)
setIsloading(false)
}
getStatuses()
}, [])
@ -60,84 +63,90 @@ export default function HomePage(): ReactElement {
</header>
<main>
{Object.entries(data || {}).map(([key, value]) => {
const networkKey = key
{isLoading ? (
<div className={styles.loading}>Loading...</div>
) : (
Object.entries(data || {}).map(([key, value]) => {
const networkKey = key
return (
<Fragment key={networkKey}>
<h2 className={styles.networkName}>{networkKey}</h2>
<div className={styles.grid}>
{Object.entries(value)
.filter(
// TODO: Remove this filter if we fix this on API level
// Needs a new `components` key under Status response
([key]) =>
key !== 'currentBlock' &&
key !== 'lastUpdatedOn' &&
key !== 'network' &&
key !== '_id' &&
key !== '__v'
)
.map(([key, value]) => (
<div
key={key}
className={`${styles.card} ${statusStyle(
// TODO: all component states should be of type Status on API level
key === 'market' || key === 'dataFarming'
? value
: value.status
)}`}
>
<h2 className={styles.titleComponent}>
{statusIcon(
return (
<Fragment key={networkKey}>
<h2 className={styles.networkName}>{networkKey}</h2>
<div className={styles.grid}>
{Object.entries(value)
.filter(
// TODO: Remove this filter if we fix this on API level
// Needs a new `components` key under Status response
([key]) =>
key !== 'currentBlock' &&
key !== 'lastUpdatedOn' &&
key !== 'network' &&
key !== '_id' &&
key !== '__v'
)
.map(([key, value]) => (
<div
key={key}
className={`${styles.card} ${statusStyle(
// TODO: all component states should be of type Status on API level
key === 'market' || key === 'dataFarming'
? value
: value.status
)}{' '}
{key}
<code
className={styles.version}
title="deployed version"
>
{value.version}
</code>
</h2>
)}`}
>
<h2 className={styles.titleComponent}>
{statusIcon(
key === 'market' || key === 'dataFarming'
? value
: value.status
)}{' '}
{key}
<code
className={styles.version}
title="deployed version"
>
{value.version}
</code>
</h2>
{value.statusMessages && value.statusMessages !== '' && (
<ul className={styles.messages}>
{value.statusMessages
.split(',')
.map((message: string, i: number) => (
<li key={i} className={styles.statusMessage}>
{message}
</li>
))}
</ul>
)}
</div>
))}
</div>
{value.statusMessages && value.statusMessages !== '' && (
<ul className={styles.messages}>
{value.statusMessages
.split(',')
.map((message: string, i: number) => (
<li key={i} className={styles.statusMessage}>
{message}
</li>
))}
</ul>
)}
</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>
)
})}
<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>

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

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