mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Feature: Create Deployments page
This commit is contained in:
parent
8a2acb1471
commit
3703740869
@ -8,6 +8,8 @@
|
||||
link: /concepts/architecture/
|
||||
- title: Supported Networks
|
||||
link: /concepts/networks/
|
||||
- title: Deployments
|
||||
link: /concepts/deployments/
|
||||
- title: Projects using Ocean
|
||||
link: /concepts/projects-using-ocean/
|
||||
|
||||
|
@ -128,9 +128,11 @@ exports.createPages = ({ graphql, actions }) => {
|
||||
})
|
||||
})
|
||||
|
||||
// API: brizo, aquarius
|
||||
// API: aquarius
|
||||
await createSwaggerPages(createPage)
|
||||
|
||||
await createDeploymentsPage(createPage)
|
||||
|
||||
// API: ocean.js
|
||||
const lastRelease =
|
||||
result.data.oceanJs.repository.releases.edges.filter(
|
||||
@ -176,6 +178,15 @@ exports.createPages = ({ graphql, actions }) => {
|
||||
})
|
||||
}
|
||||
|
||||
const createDeploymentsPage = async (createPage) => {
|
||||
const template = path.resolve('./src/components/Deployments.jsx')
|
||||
const slug = `/concepts/deployments/`
|
||||
|
||||
createPage({
|
||||
path: slug,
|
||||
component: template
|
||||
})
|
||||
}
|
||||
//
|
||||
// Create pages from TypeDoc json files
|
||||
//
|
||||
|
151
src/components/Deployments.jsx
Normal file
151
src/components/Deployments.jsx
Normal file
@ -0,0 +1,151 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import Layout from '../components/Layout'
|
||||
import Content from '../components/Content'
|
||||
import HeaderSection from '../components/HeaderSection'
|
||||
import Sidebar from '../components/Sidebar'
|
||||
import stylesDoc from '../templates/Doc.module.scss'
|
||||
import Seo from './Seo'
|
||||
import PropTypes from 'prop-types'
|
||||
import { graphql } from 'gatsby'
|
||||
|
||||
export default function Deployments({ data, location }) {
|
||||
const [content, setContent] = useState(undefined)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const networks = {
|
||||
'Ethereum Mainnet': {
|
||||
aquarius: 'https://aquarius.mainnet.oceanprotocol.com',
|
||||
provider: 'https://provider.mainnet.oceanprotocol.com'
|
||||
},
|
||||
'Polygon Mainnet': {
|
||||
aquarius: 'https://aquarius.polygon.oceanprotocol.com',
|
||||
provider: 'https://provider.polygon.oceanprotocol.com'
|
||||
},
|
||||
'Binance Smart Chain': {
|
||||
aquarius: 'https://aquarius.bsc.oceanprotocol.com',
|
||||
provider: 'https://provider.bsc.oceanprotocol.com'
|
||||
},
|
||||
Ropsten: {
|
||||
aquarius: 'https://aquarius.ropsten.oceanprotocol.com',
|
||||
provider: 'https://provider.ropsten.oceanprotocol.com'
|
||||
},
|
||||
Rinkeby: {
|
||||
aquarius: 'https://aquarius.rinkeby.oceanprotocol.com',
|
||||
provider: 'https://provider.rinkeby.oceanprotocol.com'
|
||||
},
|
||||
Mumbai: {
|
||||
aquarius: 'https://aquarius.mumbai.oceanprotocol.com',
|
||||
provider: 'https://provider.mumbai.oceanprotocol.com'
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(async () => {
|
||||
const table = await getTable(networks)
|
||||
setContent(table)
|
||||
setLoading(false)
|
||||
}, [])
|
||||
|
||||
const getAquariusVersion = async (url) => {
|
||||
if (!url) return
|
||||
try {
|
||||
const data = await fetch(url)
|
||||
const { version } = await data.json()
|
||||
return version
|
||||
} catch {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
|
||||
const getProviderVersion = async (url) => {
|
||||
if (!url) return
|
||||
try {
|
||||
const data = await fetch(url)
|
||||
const { version } = await data.json()
|
||||
return version
|
||||
} catch {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
|
||||
const getTable = async (networks) => {
|
||||
const objs = []
|
||||
|
||||
for (const key of Object.keys(networks)) {
|
||||
const aquariusVerison = await getAquariusVersion(networks[key].aquarius)
|
||||
const providerVerison = await getProviderVersion(networks[key].provider)
|
||||
objs.push(
|
||||
<tr key={key}>
|
||||
<td>{key}</td>
|
||||
<td>{aquariusVerison}</td>
|
||||
<td>{providerVerison}</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{' '}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Network</th>
|
||||
<th>Aquarius</th>
|
||||
<th>Provider</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{objs}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<body className="concepts" />
|
||||
</Helmet>
|
||||
|
||||
<Seo
|
||||
title="Deployments"
|
||||
description=""
|
||||
slug="/concepts/deployments/"
|
||||
article
|
||||
location={location}
|
||||
/>
|
||||
|
||||
<Layout location={location}>
|
||||
<HeaderSection title="Core Concepts" />
|
||||
<Content>
|
||||
<main className={stylesDoc.wrapper}>
|
||||
<aside className={stylesDoc.sidebar}>
|
||||
<Sidebar location={location} sidebar="concepts" collapsed />
|
||||
</aside>
|
||||
<article className={stylesDoc.main}>
|
||||
<div>{loading ? <>Fetching versions</> : content}</div>
|
||||
</article>
|
||||
</main>
|
||||
</Content>
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Deployments.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
location: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export const DeploymentsQuery = graphql`
|
||||
query {
|
||||
allSectionsYaml {
|
||||
edges {
|
||||
node {
|
||||
title
|
||||
description
|
||||
link
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
Loading…
Reference in New Issue
Block a user