oceanprotocol/status-frontend
1
0
Fork 0
mirror of https://github.com/oceanprotocol/status-frontend.git synced 2024-12-22 09:13:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updating how networks are handled

Browse Source
This commit is contained in:
Jamie Hewitt 2022-10-10 18:02:21 +03:00
parent d2f9068e4d
commit cc8887a853
5 changed files with 32 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env
View File

@ -1 +1,2 @@
NEXT_STATUS_API_URI='http://localhost:8080'
NEXT_STATUS_API_URI='http://localhost:8080'
NEXT_NETWORKS='["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]'

3
.env.example
View File

@ -1 +1,2 @@
NEXT_STATUS_API_URI='http://localhost:8080'
NEXT_STATUS_API_URI='http://localhost:8080'
NEXT_NETWORKS='["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]'

5
app.config.js
View File

@ -1,3 +1,6 @@
module.exports = {
statusApiUri: process.env.NEXT_STATUS_API_URI || 'http://localhost:8000'
statusApiUri: process.env.NEXT_STATUS_API_URI || 'http://localhost:8000',
availableNetworks:
process.env.NEXT_NETWORKS ||
'["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]'
}

21
src/pages/index.tsx
View File

@ -1,14 +1,15 @@
import Head from 'next/head'
import React, { FormEvent, ReactElement, useEffect, useState } from 'react'
import React, { ReactElement, useEffect, useState } from 'react'
import { Status, State, Summary } from '../@types'
import styles from '../styles/Home.module.css'
import { getData, getSummary, getNetworks } from '../utils/getData'
import { getData, getSummary } from '../utils/getData'
import { availableNetworks } from '../../app.config'
export default function HomePage(): ReactElement {
const [network, setNetwork] = useState<number>(0)
const [networks, setNetworks] = useState<string[]>()
const [network, setNetwork] = useState<string>('mainnet')
const [statuses, setStatuses] = useState<Status[]>()
const [summary, setSummary] = useState<Summary[]>()
const networks = JSON.parse(availableNetworks)
function statusStyle(state: State) {
console.log('state', state)
@ -21,8 +22,8 @@ export default function HomePage(): ReactElement {
}
}
function networkStyle(networkIndex: number) {
if (networkIndex === network) {
function networkStyle(currentNet: string) {
if (currentNet === network) {
return styles.networkSelected
} else return styles.networkUnselected
}
@ -37,10 +38,6 @@ export default function HomePage(): ReactElement {
const summaryData = getSummary(network, statuses)
console.log('summaryData', summaryData)
if (summaryData) setSummary(summaryData)
const networksData = getNetworks(statuses)
console.log('networksData', networksData)
if (networksData) setNetworks(networksData)
}
getStatuses()
}, [network])
@ -66,8 +63,8 @@ export default function HomePage(): ReactElement {
{networks.map((value: string, i: number) => (
<button
key={i}
className={`${styles.network} ${networkStyle(i)}`}
onClick={() => setNetwork(i)}
className={`${styles.network} ${networkStyle(value)}`}
onClick={() => setNetwork(value)}
>
{value}
</button>

42
src/utils/getData.ts
View File

@ -19,33 +19,37 @@ export async function getData(): Promise<Status[]> {
}
}
export function getSummary(network: number, data: Status[]): Summary[] {
export function getSummary(network: string, data: Status[]): Summary[] {
console.log('2. data', data)
try {
if (data) {
let status: Status
data.forEach((element) => {
if (element.network === network) return (status = element)
})
const summary: Summary[] = [
{ component: 'Aquarius', status: data[network].aquarius.status },
{ component: 'Provider', status: data[network].provider.status },
{ component: 'Subgraph', status: data[network].subgraph.status },
{ component: 'Market', status: data[network].market },
{ component: 'Port', status: data[network].port },
{ component: 'Aquarius', status: status.aquarius.status },
{ component: 'Provider', status: status.provider.status },
{ component: 'Subgraph', status: status.subgraph.status },
{ component: 'Market', status: status.market },
{ component: 'Port', status: status.port },
{
component: 'Data Farming',
status: data[network].dataFarming
status: status.dataFarming
},
{
component: 'Operator Service',
status: data[network].operator.status
status: status.operator.status
},
{
component: 'DAO Grants',
status: data[network].daoGrants
status: status.daoGrants
}
]
data[network].faucet.status &&
status.faucet.status &&
summary.push({
component: 'Faucet',
status: data[network].faucet.status
status: status.faucet.status
})
return summary
@ -54,19 +58,3 @@ export function getSummary(network: number, data: Status[]): Summary[] {
console.log(error)
}
}
export function getNetworks(data: Status[]): string[] {
console.log('3. data', data)
try {
if (data) {
const networks: string[] = []
for (let i = 0; i < data.length; i++) {
console.log(i, 'data', data[i].network)
networks.push(data[i].network)
}
return networks
}
} catch (error) {
console.log(error)
}
}