mirror of
https://github.com/oceanprotocol/status-frontend.git
synced 2024-12-22 09:13:36 +01:00
ui consistency
This commit is contained in:
parent
1eea458e46
commit
23ce2558ff
11
package-lock.json
generated
11
package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user