1
0
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:
Akshay 2021-08-16 22:03:52 +02:00
parent 8a2acb1471
commit 3703740869
3 changed files with 165 additions and 1 deletions

View File

@ -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/

View File

@ -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
//

View 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
}
}
}
}
`