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

ui consistency

Browse Source
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",

15
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,7 +63,10 @@ export default function HomePage(): ReactElement {
</header>
<main>
{Object.entries(data || {}).map(([key, value]) => {
{isLoading ? (
<div className={styles.loading}>Loading...</div>
) : (
Object.entries(data || {}).map(([key, value]) => {
const networkKey = key
return (
@ -120,7 +126,9 @@ export default function HomePage(): ReactElement {
<details className={styles.contracts}>
<summary>
<h3 className={styles.titleComponent}>Deployed Contracts</h3>
<h3 className={styles.titleComponent}>
Deployed Contracts
</h3>
</summary>
<ul>
{Object.entries((addresses as any)[networkKey]).map(
@ -137,7 +145,8 @@ export default function HomePage(): ReactElement {
</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;
}